Track Stack Trace Frames Succeed / Fail to Resolve URL (#191)

Author: vzaidman

front_end/core/host/RNPerfMetrics.ts

@@ -30,6 +30,10 @@ class RNPerfMetrics {
   // map of panel location to panel name
   #currentPanels = new Map<PanelLocation, string>();
 
+  isEnabled(): boolean {
+    return globalThis.enableReactNativePerfMetrics === true;
+  }
+
   addEventListener(listener: RNReliabilityEventListener): UnsubscribeFn {
     this.#listeners.add(listener);
 
@@ -259,6 +263,15 @@ class RNPerfMetrics {
     });
   }
 
+  stackTraceSymbolicationSucceeded(specialHermesFrameTypes: string[]): void {
+    this.sendEvent({
+      eventName: 'StackTraceSymbolicationSucceeded',
+      params: {
+        specialHermesFrameTypes,
+      },
+    });
+  }
+
   stackTraceSymbolicationFailed(stackTrace: string, line: string, reason: string): void {
     this.sendEvent({
       eventName: 'StackTraceSymbolicationFailed',
@@ -270,11 +283,17 @@ class RNPerfMetrics {
     });
   }
 
-  stackTraceSymbolicationSucceeded(specialHermesFrameTypes: string[]): void {
+  stackTraceFrameUrlResolutionSucceeded(): void {
     this.sendEvent({
-      eventName: 'StackTraceSymbolicationSucceeded',
+      eventName: 'StackTraceFrameUrlResolutionSucceeded',
+    });
+  }
+
+  stackTraceFrameUrlResolutionFailed(uniqueUrls: string[]): void {
+    this.sendEvent({
+      eventName: 'StackTraceFrameUrlResolutionFailed',
       params: {
-        specialHermesFrameTypes,
+        uniqueUrls,
       },
     });
   }
@@ -443,6 +462,13 @@ export type PanelClosedEvent = Readonly<{
   }>,
 }>;
 
+export type StackTraceSymbolicationSucceeded = Readonly<{
+  eventName: 'StackTraceSymbolicationSucceeded',
+  params: Readonly<{
+    specialHermesFrameTypes: string[],
+  }>,
+}>;
+
 export type StackTraceSymbolicationFailed = Readonly<{
   eventName: 'StackTraceSymbolicationFailed',
   params: Readonly<{
@@ -452,10 +478,14 @@ export type StackTraceSymbolicationFailed = Readonly<{
   }>,
 }>;
 
-export type StackTraceSymbolicationSucceeded = Readonly<{
-  eventName: 'StackTraceSymbolicationSucceeded',
+export type StackTraceFrameUrlResolutionSucceeded = Readonly<{
+  eventName: 'StackTraceFrameUrlResolutionSucceeded',
+}>;
+
+export type StackTraceFrameUrlResolutionFailed = Readonly<{
+  eventName: 'StackTraceFrameUrlResolutionFailed',
   params: Readonly<{
-    specialHermesFrameTypes: string[],
+    uniqueUrls: string[],
   }>,
 }>;
 
@@ -464,6 +494,7 @@ export type ReactNativeChromeDevToolsEvent =
     BrowserErrorEvent|RemoteDebuggingTerminatedEvent|DeveloperResourceLoadingStartedEvent|
     DeveloperResourceLoadingFinishedEvent|FuseboxSetClientMetadataStartedEvent|FuseboxSetClientMetadataFinishedEvent|
     MemoryPanelActionStartedEvent|MemoryPanelActionFinishedEvent|PanelShownEvent|PanelClosedEvent|
-    StackTraceSymbolicationFailed|StackTraceSymbolicationSucceeded;
+    StackTraceSymbolicationSucceeded|StackTraceSymbolicationFailed|StackTraceFrameUrlResolutionSucceeded|
+    StackTraceFrameUrlResolutionFailed;
 
 export type DecoratedReactNativeChromeDevToolsEvent = CommonEventFields&ReactNativeChromeDevToolsEvent;

front_end/panels/console/ConsoleViewMessage.ts

@@ -1844,6 +1844,21 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
           });
     }
 
+    if (Host.rnPerfMetrics.isEnabled()) {
+      const unresolvedScriptUrls = formattedResult
+        .querySelectorAll("[data-fallback-anchor='1']")
+        .values()
+        .map(element => element.getAttribute('title') || '')
+        .map(title => title.replace(/\:\d+(?:\:\d+)?$/, '')) // row and column e.g :11:11
+        .toArray();
+      if (unresolvedScriptUrls.length === 0) {
+        Host.rnPerfMetrics.stackTraceFrameUrlResolutionSucceeded();
+      } else {
+        const uniqueUrls = Array.from(new Set(unresolvedScriptUrls));
+        Host.rnPerfMetrics.stackTraceFrameUrlResolutionFailed(uniqueUrls);
+      }
+    }
+
     return formattedResult;
   }
 

front_end/ui/legacy/components/utils/Linkifier.ts

@@ -264,6 +264,7 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
     const {columnNumber, className = ''} = linkifyURLOptions;
     if (sourceURL) {
       fallbackAnchor = Linkifier.linkifyURL(sourceURL, linkifyURLOptions);
+      fallbackAnchor.dataset.fallbackAnchor = '1';
     }
     if (!target || target.isDisposed()) {
       return fallbackAnchor;