feat: Snapshots (without snapshot renaming) #58

fpena · 2025-10-16T03:57:36Z

What does this PR do?

This PR implements the state snapshots feature for Reactotron, allowing developers to capture, store, and restore application state snapshots.

The feature adds a new "Snapshots" tab to the existing State screen, enabling users to take snapshots of their Redux or MobX-State-Tree store state with a single click, view them in an expandable card layout, and restore any captured state back to the connected client.

"Snapshots" enhances the debugging experience by providing state persistence across sessions, enabling developers to capture state at specific points in time and restore it later for testing scenarios or bug reproduction. The implementation includes proper error handling, type safety, and integrates seamlessly with Reactotron's existing WebSocket communication system.

Key Features:

📸 Snapshot Creation: One-click state capture from Redux/MobX-State-Tree stores
💾 State Storage: Local storage with automatic deduplication
🔄 State Restoration: Restore any snapshot to connected clients
📋 Copy Operations: Copy individual or all snapshots to clipboard
🗑️ Snapshot Management: Delete unwanted snapshots
🎨 Modern UI: Card-based layout with expandable content
⏰ Smart Naming: Human-readable timestamps (e.g., "Wednesday @ 5:00:15 PM")
🛡️ Error Handling: Robust validation and error management
🔗 Client Targeting: Restore to specific clients or active client

⚠️ Known Limitations:

Snapshot Renaming: The ability to rename snapshots has not been included due to some modifications the patches within the patches folder are making. These patches modify TextInput behavior in React Native macOS, causing issues with text input functionality. This feature will be addressed in a separate PR once the TextInput issues are resolved.

What GitHub issues does this PR fix?

#41

How to verify this code works?

reactotron-macos setup for this PR

gh pr checkout <PR_NUMBER>
npm install
npm run pod
npm run start
npm run macos

reactotron example app setup for this PR

yarn install
Add Reactotron standalone server port to example app configuration

diff --git a/apps/example-app/app/devtools/ReactotronConfig.ts b/apps/example-app/app/devtools/ReactotronConfig.ts
index a5c7d5b6..9b9c1dad 100644
--- a/apps/example-app/app/devtools/ReactotronConfig.ts
+++ b/apps/example-app/app/devtools/ReactotronConfig.ts
@@ -18,6 +18,7 @@ import { Reactotron } from "./ReactotronClient"

 const reactotron = Reactotron.configure({
   name: require("../../package.json").name,
+  port: 9292,
   onConnect: () => {
     /** since this file gets hot reloaded, let's clear the past logs every time we connect */
     Reactotron.clear()

yarn workspace example-app start
Start on a different port to avoid conflicting with reactotron-macos
Press i to launch in iOS simulator
Consider Cmd + Shift + R to reload reactotron-macos to get connection

Step by step of how to test this PR

Prerequisites

Ensure you have a React Native app connected to Reactotron
The app should be using Redux, MobX-State-Tree, or another state management library
Reactotron server should be running and connected

Testing Steps

📸 Snapshot Creation

Navigate to the State screen in Reactotron
Click on the "Snapshots" tab
Click the "Create Snapshot" button
Verify that a new snapshot appears in the list with a timestamp-based name (e.g., "Wednesday @ 5:00:15 PM")
Test creating multiple snapshots to verify deduplication works

🔍 Snapshot Interaction

Expand/Collapse: Click on any snapshot card to expand and view the state tree
Copy Individual: Click the clipboard icon on a snapshot to copy it to clipboard
Copy All: Click the "Copy All" button to copy all snapshots to clipboard
Delete: Click the trash icon to delete a snapshot

🔄 State Restoration

Create a snapshot of your current app state
Make changes to your app's state (e.g., update Redux store, modify MobX state)
In Reactotron, click the restore icon (arrow up) on the snapshot
Verify that your app's state has been restored to the captured state
Test restoration with different clients if multiple are connected

🎨 UI/UX Testing

Tab Switching: Switch between "Subscriptions" and "Snapshots" tabs
Empty State: Test the empty state message when no snapshots exist
Tooltips: Hover over action buttons to verify tooltips appear

🧪 Edge Cases

No Active Client: Try creating snapshots when no client is connected
Invalid State: Test with corrupted or invalid state data
Multiple Clients: Test snapshot creation/restoration with multiple connected clients
Large State: Test with large state objects to verify performance

🔧 Technical Validation

Deduplication: Create snapshots rapidly to test duplicate prevention
Memory Management: Create and delete many snapshots to test cleanup
Error Handling: Test with network disconnections during snapshot operations

Expected Results
✅ Snapshots are created with proper timestamps
✅ State restoration works correctly
✅ Copy operations work (check clipboard)
✅ UI is responsive and intuitive
✅ Error handling works for edge cases
✅ No memory leaks with repeated operations

Screenshot/Video of "How to test this PR?"

CleanShot.2025-10-23.at.20.20.30.mp4

jamonholmgren

Some things to address, but headed the right direction

jamonholmgren · 2025-10-24T17:13:35Z

app/screens/StateScreen.tsx

+    if (!activeTab) {
+      console.log("No active client to create snapshot from")
+      return
+    }


Prefer one-liner guards if possible.

Suggested change

if (!activeTab) {

console.log("No active client to create snapshot from")

return

}

if (!activeTab) return console.log("No active client to create snapshot from")

jamonholmgren · 2025-10-24T17:14:31Z

app/screens/StateScreen.tsx

+
+  const copySnapshotToClipboard = (snapshot: Snapshot) => {
+    try {
+      IRClipboard.setString(JSON.stringify(snapshot.state, null, 2))


Should we be formatting the JSON string like this, or just stringifying without formatting?

I think this should be exported to a utility function in another file rather than putting it inline in the component body. It doesn't depend on any state except what's passed in.

@jamonholmgren

Should we be formatting the JSON string like this, or just stringifying without formatting?

Is your concern here about performance and/or storage usage?

jamonholmgren · 2025-10-24T17:16:59Z

app/screens/StateScreen.tsx

+    } catch (error) {
+      console.error("Failed to copy snapshots to clipboard:", error)
+    }
+  }


This can be extracted to a utility function as well. You can either pass in the snapshots to the function or just get them on-demand with withGlobal (or if @SeanBarker182 has renamed that function, whatever he landed on).

app/screens/StateScreen.tsx

jamonholmgren · 2025-10-24T17:33:03Z

app/screens/StateScreen.tsx

-          >
-            <Text>Clear State</Text>
-          </Pressable>
+    <>


Why is the ScrollView wrapped in a Fragment, here? Looks like it's just one element.

jamonholmgren · 2025-10-24T17:35:02Z

app/screens/StateScreen.tsx

+          <Tab id="snapshots" label="Snapshots" tabgroup="activeStateTab" />
+        </View>
+        <View style={$stateContainer()}>
+          {activeStateTab === "Subscriptions" ? (


I think we're at the point where this should be refactored into two sub components. Likely something like StateSubscriptions and StateSnapshots.

app/state/connectToServer.ts

jamonholmgren · 2025-10-24T17:40:18Z

Add screenshots of the feature too, please

fpena added 11 commits October 10, 2025 19:29

Add snapshots tab and arrowDownUp icon

21f2b45

Add EmptyState component and update StateScreen UI

2fc5b61

Moving forward with implementation

2df391b

Add snapshot renaming with tooltip and input

35a0c52

Moving forward

01d64ac

Refactor snapshot list UI with card layout

7ab4041

Remove snapshot download functionality from StateScreen

1600827

Add restore logic

7555996

Adjust style better

ec41f97

Remove snapshot renaming functionality temporarily from StateScreen

39f633a

Remove unused isExpanded parameter from style functions

f78791d

fpena changed the title ~~[DRAFT] Snapshots~~ feat: Snapshots Oct 24, 2025

fpena changed the title ~~feat: Snapshots~~ feat: Snapshots (without snapshot renaming) Oct 24, 2025

fpena added 3 commits October 23, 2025 20:27

Add styling to empty state text in StateScreen

b4cd61a

Refactor snapshot card and header styles

b0a4bba

Update Icon components to use theme color and key

dd691d5

fpena marked this pull request as ready for review October 24, 2025 03:33

fpena added 2 commits October 23, 2025 20:33

Merge branch 'main' into fpena/41-state-snapshots

efadc1b

Remove arrowDownUp icon and references

7be6756

jamonholmgren requested changes Oct 24, 2025

View reviewed changes

fpena added 8 commits October 24, 2025 13:21

Remove unnecessary console logs and error messages

56d181b

Remove console error on missing client in StateScreen

2d27a26

Refactor StateScreen to remove unnecessary fragment

3cd2761

Refactor state backup response type check

9289ee7

Refactor StateScreen to use StateSubscriptions component

46c216a

Refactor snapshot UI into StateSnapshots component

decd0ae

Refactor state management in State components

e6b978d

Move copySnapshotToClipboard to top-level function

2ba3bea

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat: Snapshots (without snapshot renaming) #58

feat: Snapshots (without snapshot renaming) #58

Uh oh!

fpena commented Oct 16, 2025 •

edited

Loading

Uh oh!

jamonholmgren left a comment

Uh oh!

jamonholmgren Oct 24, 2025

Uh oh!

jamonholmgren Oct 24, 2025

Uh oh!

jamonholmgren Oct 24, 2025

Uh oh!

fpena Oct 27, 2025

Uh oh!

jamonholmgren Oct 24, 2025

Uh oh!

Uh oh!

Uh oh!

jamonholmgren Oct 24, 2025

Uh oh!

jamonholmgren Oct 24, 2025

Uh oh!

Uh oh!

Uh oh!

jamonholmgren commented Oct 24, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

feat: Snapshots (without snapshot renaming) #58

Are you sure you want to change the base?

feat: Snapshots (without snapshot renaming) #58

Uh oh!

Conversation

fpena commented Oct 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

Key Features:

⚠️ Known Limitations:

What GitHub issues does this PR fix?

How to verify this code works?

reactotron-macos setup for this PR

reactotron example app setup for this PR

Step by step of how to test this PR

Prerequisites

Testing Steps

Screenshot/Video of "How to test this PR?"

Uh oh!

jamonholmgren left a comment

Choose a reason for hiding this comment

Uh oh!

jamonholmgren Oct 24, 2025

Choose a reason for hiding this comment

Uh oh!

jamonholmgren Oct 24, 2025

Choose a reason for hiding this comment

Uh oh!

jamonholmgren Oct 24, 2025

Choose a reason for hiding this comment

Uh oh!

fpena Oct 27, 2025

Choose a reason for hiding this comment

Uh oh!

jamonholmgren Oct 24, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

jamonholmgren Oct 24, 2025

Choose a reason for hiding this comment

Uh oh!

jamonholmgren Oct 24, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

jamonholmgren commented Oct 24, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

fpena commented Oct 16, 2025 •

edited

Loading