Annotate debugger events with frontend User-Agent if available (#39110)

Summary: Pull Request resolved: #39110 TSIA. Changelog: [Internal] Reviewed By: huntie Differential Revision: D48560563 fbshipit-source-id: a268173e5e7b3e6e497ab79a8b362caa897afec6
facebook · Aug 22, 2023 · 8b62200 · 8b62200
1 parent cbbf169
commit 8b62200
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 6 deletions.
diff --git a/packages/dev-middleware/src/inspector-proxy/Device.js b/packages/dev-middleware/src/inspector-proxy/Device.js
@@ -46,7 +46,7 @@ type DebuggerInfo = {
   originalSourceURLAddress?: string,
   prependedFilePrefix: boolean,
   pageId: string,
-  ...
+  userAgent: string | null,
 };
 
 const REACT_NATIVE_RELOADABLE_PAGE_ID = '-1';
@@ -170,12 +170,19 @@ export default class Device {
   // 1. Sends connect event to device
   // 2. Forwards all messages from the debugger to device as wrappedEvent
   // 3. Sends disconnect event to device when debugger connection socket closes.
-  handleDebuggerConnection(socket: WS, pageId: string) {
+  handleDebuggerConnection(
+    socket: WS,
+    pageId: string,
+    metadata: $ReadOnly<{
+      userAgent: string | null,
+    }>,
+  ) {
     // Clear any commands we were waiting on.
     this._deviceEventReporter?.logDisconnection('debugger');
 
     this._deviceEventReporter?.logConnection('debugger', {
-      pageId: pageId,
+      pageId,
+      frontendUserAgent: metadata.userAgent,
     });
 
     // Disconnect current debugger if we already have debugger connected.
@@ -188,6 +195,7 @@ export default class Device {
       socket,
       prependedFilePrefix: false,
       pageId,
+      userAgent: metadata.userAgent,
     };
     this._debuggerConnection = debuggerInfo;
 
@@ -206,6 +214,7 @@ export default class Device {
       const debuggerRequest = JSON.parse(message);
       this._deviceEventReporter?.logRequest(debuggerRequest, 'debugger', {
         pageId: this._debuggerConnection?.pageId ?? null,
+        frontendUserAgent: metadata.userAgent,
       });
       const handled = this._interceptMessageFromDebugger(
         debuggerRequest,
@@ -271,6 +280,9 @@ export default class Device {
       newDevice.handleDebuggerConnection(
         oldDebugger.socket,
         oldDebugger.pageId,
+        {
+          userAgent: oldDebugger.userAgent,
+        },
       );
     }
   }
@@ -333,6 +345,7 @@ export default class Device {
       if ('id' in parsedPayload) {
         this._deviceEventReporter?.logResponse(parsedPayload, 'device', {
           pageId: this._debuggerConnection?.pageId ?? null,
+          frontendUserAgent: this._debuggerConnection?.userAgent ?? null,
         });
       }
 
@@ -414,6 +427,7 @@ export default class Device {
     for (const message of toSend) {
       this._deviceEventReporter?.logRequest(message, 'proxy', {
         pageId: this._debuggerConnection?.pageId ?? null,
+        frontendUserAgent: this._debuggerConnection?.userAgent ?? null,
       });
       this._sendMessageToDevice({
         event: 'wrappedEvent',
@@ -510,6 +524,7 @@ export default class Device {
       const resumeMessage = {method: 'Debugger.resume', id: 0};
       this._deviceEventReporter?.logRequest(resumeMessage, 'proxy', {
         pageId: this._debuggerConnection?.pageId ?? null,
+        frontendUserAgent: this._debuggerConnection?.userAgent ?? null,
       });
       this._sendMessageToDevice({
         event: 'wrappedEvent',
@@ -579,6 +594,7 @@ export default class Device {
       socket.send(JSON.stringify(response));
       this._deviceEventReporter?.logResponse(response, 'proxy', {
         pageId: this._debuggerConnection?.pageId ?? null,
+        frontendUserAgent: this._debuggerConnection?.userAgent ?? null,
       });
     };
     const sendErrorResponse = (error: string) => {
@@ -591,6 +607,7 @@ export default class Device {
       this._sendErrorToDebugger(error);
       this._deviceEventReporter?.logResponse(response, 'proxy', {
         pageId: this._debuggerConnection?.pageId ?? null,
+        frontendUserAgent: this._debuggerConnection?.userAgent ?? null,
       });
     };
 

diff --git a/packages/dev-middleware/src/inspector-proxy/DeviceEventReporter.js b/packages/dev-middleware/src/inspector-proxy/DeviceEventReporter.js
@@ -26,6 +26,7 @@ type DeviceMetadata = $ReadOnly<{
 
 type RequestMetadata = $ReadOnly<{
   pageId: string | null,
+  frontendUserAgent: string | null,
 }>;
 
 class DeviceEventReporter {
@@ -75,6 +76,7 @@ class DeviceEventReporter {
     origin: 'device' | 'proxy',
     metadata: $ReadOnly<{
       pageId: string | null,
+      frontendUserAgent: string | null,
     }>,
   ): void {
     const pendingCommand = this._pendingCommands.get(res.id);
@@ -92,6 +94,7 @@ class DeviceEventReporter {
         deviceId: this._metadata.deviceId,
         deviceName: this._metadata.deviceName,
         pageId: metadata.pageId,
+        frontendUserAgent: metadata.frontendUserAgent,
       });
       return;
     }
@@ -116,6 +119,7 @@ class DeviceEventReporter {
         deviceId: this._metadata.deviceId,
         deviceName: this._metadata.deviceName,
         pageId: pendingCommand.metadata.pageId,
+        frontendUserAgent: pendingCommand.metadata.frontendUserAgent,
       });
       return;
     }
@@ -131,12 +135,16 @@ class DeviceEventReporter {
       deviceId: this._metadata.deviceId,
       deviceName: this._metadata.deviceName,
       pageId: pendingCommand.metadata.pageId,
+      frontendUserAgent: pendingCommand.metadata.frontendUserAgent,
     });
   }
 
   logConnection(
     connectedEntity: 'debugger',
-    metadata: $ReadOnly<{pageId: string}>,
+    metadata: $ReadOnly<{
+      pageId: string,
+      frontendUserAgent: string | null,
+    }>,
   ) {
     this._eventReporter.logEvent({
       type: 'connect_debugger_frontend',
@@ -145,6 +153,7 @@ class DeviceEventReporter {
       deviceName: this._metadata.deviceName,
       deviceId: this._metadata.deviceId,
       pageId: metadata.pageId,
+      frontendUserAgent: metadata.frontendUserAgent,
     });
   }
 
@@ -171,6 +180,7 @@ class DeviceEventReporter {
         deviceId: this._metadata.deviceId,
         deviceName: this._metadata.deviceName,
         pageId: pendingCommand.metadata.pageId,
+        frontendUserAgent: pendingCommand.metadata.frontendUserAgent,
       });
     }
     this._pendingCommands.clear();
@@ -190,6 +200,7 @@ class DeviceEventReporter {
       deviceId: this._metadata.deviceId,
       deviceName: this._metadata.deviceName,
       pageId: pendingCommand.metadata.pageId,
+      frontendUserAgent: pendingCommand.metadata.frontendUserAgent,
     });
   }
 }

diff --git a/packages/dev-middleware/src/inspector-proxy/InspectorProxy.js b/packages/dev-middleware/src/inspector-proxy/InspectorProxy.js
@@ -224,7 +224,9 @@ export default class InspectorProxy {
           throw new Error('Unknown device with ID ' + deviceId);
         }
 
-        device.handleDebuggerConnection(socket, pageId);
+        device.handleDebuggerConnection(socket, pageId, {
+          userAgent: req.headers['user-agent'] ?? null,
+        });
       } catch (e) {
         console.error(e);
         socket.close(INTERNAL_ERROR_CODE, e?.toString() ?? 'Unknown error');

diff --git a/packages/dev-middleware/src/types/EventReporter.js b/packages/dev-middleware/src/types/EventReporter.js
@@ -41,7 +41,12 @@ export type ReportableEvent =
     }
   | {
       type: 'connect_debugger_frontend',
-      ...SuccessResult<DebuggerSessionIDs> | ErrorResult<mixed>,
+      ...
+        | SuccessResult<{
+            ...DebuggerSessionIDs,
+            frontendUserAgent: string | null,
+          }>
+        | ErrorResult<mixed>,
     }
   | {
       type: 'debugger_command',
@@ -52,6 +57,7 @@ export type ReportableEvent =
       responseOrigin: 'proxy' | 'device',
       timeSinceStart: number | null,
       ...DebuggerSessionIDs,
+      frontendUserAgent: string | null,
       ...
         | SuccessResult<void>
         | CodedErrorResult<