re-write console stack trace frame urls to be relative to debugger (#52704)

Summary:
Pull Request resolved: #52704

Stack traces for console calls are passed to the debugger when they are relative to device. (e.g. 10.0.2.2 for Android emulator)

Changelog: [android][fixed] fix stack trace linkifying failing when using Android emulator and other situations where the device and debugger have different bundle urls

Reviewed By: motiz88

Differential Revision: D78553183

fbshipit-source-id: 91d7e7ccc99d12ec7d06f4201237ecf557a46c4f

Author: vzaidman

packages/dev-middleware/src/__tests__/InspectorProxyCdpRewritingHacks-test.js

@@ -184,7 +184,7 @@ describe.each(['HTTP', 'HTTPS'])(
     describe.each(['10.0.2.2:8080', '[::1]', 'example.com:2000'])(
       '%s aliasing to and from localhost',
       sourceHost => {
-        test('in source map fetching during Debugger.scriptParsed', async () => {
+        test('Debugger.scriptParsed - in source map fetching', async () => {
           serverRef.app.use('/source-map', serveStaticJson({version: 3}));
           const {device, debugger_} = await createAndConnectTarget(
             serverRef,
@@ -220,6 +220,53 @@ describe.each(['HTTP', 'HTTPS'])(
           }
         });
 
+        test('Runtime.consoleAPICalled - in location resolutions', async () => {
+          const {device, debugger_} = await createAndConnectTarget(
+            serverRef,
+            autoCleanup.signal,
+            {
+              app: 'bar-app',
+              id: 'page1',
+              title: 'bar-title',
+              vm: 'bar-vm',
+            },
+            {
+              deviceHostHeader: sourceHost,
+            },
+          );
+          try {
+            const consoleMessage = await sendFromTargetToDebugger(
+              device,
+              debugger_,
+              'page1',
+              {
+                method: 'Runtime.consoleAPICalled',
+                params: {
+                  stackTrace: {
+                    callFrames: [
+                      {
+                        url: `${protocol.toLowerCase()}://${sourceHost}/bundleFile:1:2`,
+                        field2: 'aaa',
+                      },
+                      {
+                        url: `${protocol.toLowerCase()}://${sourceHost}/bundleFile:5:4`,
+                        field3: 'bbb',
+                      },
+                    ],
+                  },
+                },
+              },
+            );
+            expect(consoleMessage.params.stackTrace.callFrames).toEqual([
+              {url: `${serverRef.serverBaseUrl}/bundleFile:1:2`, field2: 'aaa'},
+              {url: `${serverRef.serverBaseUrl}/bundleFile:5:4`, field3: 'bbb'},
+            ]);
+          } finally {
+            device.close();
+            debugger_.close();
+          }
+        });
+
         test('in Debugger.setBreakpointByUrl', async () => {
           const {device, debugger_} = await createAndConnectTarget(
             serverRef,

packages/dev-middleware/src/inspector-proxy/Device.js

@@ -844,6 +844,23 @@ export default class Device {
 
       this.#isLegacyPageReloading = false;
     }
+
+    if (payload.method === 'Runtime.consoleAPICalled') {
+      const callFrames = payload.params?.stackTrace?.callFrames ?? [];
+      for (const callFrame of callFrames) {
+        if (callFrame.url) {
+          const parsedUrl = this.#tryParseHTTPURL(callFrame.url);
+          if (parsedUrl) {
+            // Rewrite device-relative URLs pointing to the server so that they're
+            // reachable from the frontend.
+            callFrame.url = this.#deviceRelativeUrlToDebuggerRelativeUrl(
+              parsedUrl,
+              debuggerInfo,
+            ).href;
+          }
+        }
+      }
+    }
   }
 
   /**

packages/dev-middleware/src/inspector-proxy/cdp-types/messages.js

@@ -48,6 +48,7 @@ export type CDPClientMessage =
 
 export type CDPServerMessage =
   | CDPEvent<'Debugger.scriptParsed'>
+  | CDPEvent<'Runtime.consoleAPICalled'>
   | CDPEvent<>
   | CDPResponse<'Debugger.getScriptSource'>
   | CDPResponse<>;

packages/dev-middleware/src/inspector-proxy/cdp-types/protocol.js

@@ -84,10 +84,27 @@ export interface Debugger {
      */
     sourceMapURL: string,
   };
+
+  ConsoleAPICalled: {
+    args: Array<{type: string, value: string}>,
+    executionContextId: number,
+    stackTrace: {
+      timestamp: number,
+      type: string,
+      callFrames: Array<{
+        columnNumber: number,
+        lineNumber: number,
+        functionName: string,
+        scriptId: string,
+        url: string,
+      }>,
+    },
+  };
 }
 
 export type Events = {
   'Debugger.scriptParsed': Debugger['ScriptParsedEvent'],
+  'Runtime.consoleAPICalled': Debugger['ConsoleAPICalled'],
   [method: string]: JSONSerializable,
 };