fix(network-activity-plugin): race condition when reloading the app (#235)

## Summary

- Adds a `recording-state` event sent by the React Native side to the
DevTools UI on every new connection, broadcasting the current recording
state.
- The DevTools UI listens for this event and re-syncs its recording
toggle by sending `network-enable` or `network-disable` if the states
diverge.
- This fixes a race condition where reloading the app could leave the UI
and the native side out of sync (e.g. UI shows recording enabled but
native has reset to disabled).

## Test plan

- [ ] Start the app with network recording enabled, reload the app, and
verify the DevTools UI stays in sync with the native recording state.
- [ ] Toggle recording off, reload the app, and confirm the UI reflects
the disabled state.
- [ ] Verify no regressions in normal network recording start/stop flow.

Author: V3RON

packages/network-activity-plugin/src/react-native/useNetworkActivityDevTools.ts

@@ -99,6 +99,12 @@ export const useNetworkActivityDevTools = (
       }),
     ];
 
+    // Inform the DevTools UI of the current recording state so it can detect
+    // and resolve desynchronization (e.g. after an app reload)
+    client.send('recording-state', {
+      isRecording: isRecordingEnabledRef.current,
+    });
+
     // Send initial or changed values live
     sendClientUISettings();
 

packages/network-activity-plugin/src/shared/client.ts

@@ -14,6 +14,9 @@ export type NetworkActivityEventMap = {
   'network-enable': unknown;
   'network-disable': unknown;
 
+  // Recording state sync (sent by React Native to inform DevTools UI of current state)
+  'recording-state': { isRecording: boolean };
+
   // Client UI settings events
   'get-client-ui-settings': unknown;
   'client-ui-settings': {

packages/network-activity-plugin/src/ui/state/store.ts

@@ -123,6 +123,16 @@ export const createNetworkActivityStore = () =>
           data: NetworkActivityEventMap[K],
         ) => {
           switch (eventType) {
+            case 'recording-state': {
+              const eventData =
+                data as NetworkActivityEventMap['recording-state'];
+              const { isRecording, _client } = get();
+              if (_client && isRecording !== eventData.isRecording) {
+                _client.send(isRecording ? 'network-enable' : 'network-disable', {});
+              }
+              break;
+            }
+
             case 'client-ui-settings': {
               const eventData =
                 data as NetworkActivityEventMap['client-ui-settings'];
@@ -583,6 +593,9 @@ export const createNetworkActivityStore = () =>
 
             // Subscribe to all events using the unified handler
             const unsubscribeFunctions = [
+              client.onMessage('recording-state', (data) =>
+                handleEvent('recording-state', data)
+              ),
               client.onMessage('client-ui-settings', (data) =>
                 handleEvent('client-ui-settings', data),
               ),