Merge branch 'main' into users/devanb/landingView

Author: sbuggay

.github/pull_request_template.md

@@ -12,5 +12,5 @@
 
 <!-- Pick one: -->
 
-- [ ] This commit should be sent as a patch to the upstream `devtools-frontend` repo. I've reviewed the [contribution guide](https://docs.google.com/document/d/1WNF-KqRSzPLUUfZqQG5AFeU_Ll8TfWYcJasa_XGf7ro/edit#heading=h.9kj7femz1xg5).
+- [ ] This commit should be sent as a patch to the upstream `devtools-frontend` repo following the [contribution guide for Meta employees](https://fburl.com/wiki/43s6yft1) OR [contribution guide](https://chromium.googlesource.com/devtools/devtools-frontend/+/main/docs/contributing/README.md).
 - [ ] This commit is React Native-specific and cannot be upstreamed.

README.md

@@ -19,6 +19,11 @@ This repository is a fork of [ChromeDevTools/devtools-frontend](https://github.c
 
 ### Build-and-run options
 
+Run prebuild to set up the out dir:
+```
+npm run prebuild
+```
+
 1. Build continuously with a file watcher:
 
     ```sh

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,6 +283,21 @@ class RNPerfMetrics {
     });
   }
 
+  stackTraceFrameUrlResolutionSucceeded(): void {
+    this.sendEvent({
+      eventName: 'StackTraceFrameUrlResolutionSucceeded',
+    });
+  }
+
+  stackTraceFrameUrlResolutionFailed(uniqueUrls: string[]): void {
+    this.sendEvent({
+      eventName: 'StackTraceFrameUrlResolutionFailed',
+      params: {
+        uniqueUrls,
+      },
+    });
+  }
+
   panelShown(_panelName: string, _isLaunching?: boolean): void {
     // no-op
     // We only care about the "main" and "drawer" panels for now via panelShownInLocation(…)
@@ -434,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<{
@@ -443,10 +478,23 @@ export type StackTraceSymbolicationFailed = Readonly<{
   }>,
 }>;
 
+export type StackTraceFrameUrlResolutionSucceeded = Readonly<{
+  eventName: 'StackTraceFrameUrlResolutionSucceeded',
+}>;
+
+export type StackTraceFrameUrlResolutionFailed = Readonly<{
+  eventName: 'StackTraceFrameUrlResolutionFailed',
+  params: Readonly<{
+    uniqueUrls: string[],
+  }>,
+}>;
+
 export type ReactNativeChromeDevToolsEvent =
     EntrypointLoadingStartedEvent|EntrypointLoadingFinishedEvent|DebuggerReadyEvent|BrowserVisibilityChangeEvent|
     BrowserErrorEvent|RemoteDebuggingTerminatedEvent|DeveloperResourceLoadingStartedEvent|
     DeveloperResourceLoadingFinishedEvent|FuseboxSetClientMetadataStartedEvent|FuseboxSetClientMetadataFinishedEvent|
-    MemoryPanelActionStartedEvent|MemoryPanelActionFinishedEvent|PanelShownEvent|PanelClosedEvent|StackTraceSymbolicationFailed;
+    MemoryPanelActionStartedEvent|MemoryPanelActionFinishedEvent|PanelShownEvent|PanelClosedEvent|
+    StackTraceSymbolicationSucceeded|StackTraceSymbolicationFailed|StackTraceFrameUrlResolutionSucceeded|
+    StackTraceFrameUrlResolutionFailed;
 
 export type DecoratedReactNativeChromeDevToolsEvent = CommonEventFields&ReactNativeChromeDevToolsEvent;

front_end/entrypoints/rn_fusebox/FuseboxExperimentsObserver.ts

@@ -21,7 +21,7 @@ const UIStrings = {
   /**
    * @description Message for the "settings changed" banner shown when a reload is required for the Network panel.
    */
-  reloadRequiredForNetworkPanelMessage: 'Network panel is now available for dogfooding. Please reload to access it.',
+  reloadRequiredForNetworkPanelMessage: 'The Network panel is now available for dogfooding. Please reload to access it.',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('entrypoints/rn_fusebox/FuseboxExperimentsObserver.ts', UIStrings);

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/panels/console/ErrorStackParser.ts

@@ -21,37 +21,57 @@ export interface ParsedErrorFrame {
   };
 }
 
-export type SpecialHermesStackTraceFrameTypes = 'native' | 'address at' | 'empty url';
-
-function getSpecialHermesStackTraceFrameType({
-    url,
-}: {
-  url: Platform.DevToolsPath.UrlString,
-}): SpecialHermesStackTraceFrameTypes | null {
-  // functions implemented in c++.
-  // TODO: these might be enhanced to include the C++ loc for the frame
-  // so that a debugger could stitch together a hybrid cross-language call stack
+export type SpecialHermesStackTraceFrameTypes =
+  // e.g "(native)"- Functions implemented on the native side.
+  // TODO: Might be enhanced to include the native (C++/Java/etc) loc
+  // for the frame so that a debugger could stitch together a
+  // hybrid cross-language call stack
+  'native' |
+  // e.g "(eval:1:2)"- Seem to be reported when there's a
+  // ReferenceError or TypeError during the initial bundle code execution.
+  // TODO: Understand exactly where these originate from and what further work
+  // should be done in regards to them
+  'eval' |
+  // e.g "(:3:4)"- Frames with empty url
+  // TODO: Seems to be happening due to a bug that needs to be investigated
+  // and produce an actual script URL instead
+  'empty url' |
+  // e.g "(address at InternalBytecode.js:5:6)"- Frames pointing to bytecode locations
+  // TODO: Could be symbolicated and link to source files with the help of
+  // a bytecode source maps once they are available.
+  'address at' |
+  // e.g " ... skipping 7 frames" - Frames collapsed in the middle of a stack trace
+  // for very long stack traces
+  'skipping x frames' ;
+
+function getSpecialHermesFrameBasedOnURL(url: string): SpecialHermesStackTraceFrameTypes | null {
   if (url === 'native') {
     return 'native';
   }
 
-  // frames with empty url
-  // TODO: these seem to be happening due to a bug that needs to be investigated
-  // and produce an actual script URL instead
+  if (url === 'eval') {
+    return 'eval';
+  }
+
   if (url === '') {
     return 'empty url';
   }
 
-  // frames pointing to a bytecode locations
-  // TODO: these could be symbolicated and link to source files with the help of
-  // a bytecode source maps once they are available.
   if (url.startsWith?.('address at ')) {
     return 'address at';
   }
 
   return null;
 }
 
+function getSpecialHermesFrameBasedOnLine(line: string): SpecialHermesStackTraceFrameTypes | null {
+  if (/^\s*... skipping \d+ frames$/.exec(line)) {
+    return 'skipping x frames';
+  }
+
+  return null;
+}
+
 /**
  * Takes a V8 Error#stack string and extracts source position information.
  *
@@ -71,10 +91,24 @@ export function parseSourcePositionsFromErrorStack(
 
   const lines = stack.split('\n');
   const linkInfos = [];
+  const specialHermesFramesParsed = new Set<SpecialHermesStackTraceFrameTypes>();
+
   for (const line of lines) {
     const match = /^\s*at\s(async\s)?/.exec(line);
     if (!match) {
       if (linkInfos.length && linkInfos[linkInfos.length - 1].isCallFrame) {
+        const specialHermesFrameType = getSpecialHermesFrameBasedOnLine(line);
+        if (specialHermesFrameType !== null) {
+          specialHermesFramesParsed.add(specialHermesFrameType);
+          if (!linkInfos[linkInfos.length - 1].link) {
+            // Combine builtin frames.
+            linkInfos[linkInfos.length - 1].line += `\n${line}`;
+          } else {
+            linkInfos.push({line, isCallFrame: false});
+          }
+          continue;
+        }
+
         Host.rnPerfMetrics.stackTraceSymbolicationFailed(stack, line, '"at (url)" not found');
         return null;
       }
@@ -110,7 +144,11 @@ export function parseSourcePositionsFromErrorStack(
 
     const linkCandidate = line.substring(left, right);
     const splitResult = Common.ParsedURL.ParsedURL.splitLineAndColumn(linkCandidate);
-    const specialHermesFrameType = getSpecialHermesStackTraceFrameType(splitResult);
+    const specialHermesFrameType = getSpecialHermesFrameBasedOnURL(splitResult.url);
+    if (specialHermesFrameType !== null) {
+      specialHermesFramesParsed.add(specialHermesFrameType);
+    }
+
     if (splitResult.url === '<anonymous>' || specialHermesFrameType !== null) {
       if (linkInfos.length && linkInfos[linkInfos.length - 1].isCallFrame && !linkInfos[linkInfos.length - 1].link) {
         // Combine builtin frames.
@@ -142,6 +180,11 @@ export function parseSourcePositionsFromErrorStack(
       },
     });
   }
+
+  if (linkInfos?.length) {
+    Host.rnPerfMetrics.stackTraceSymbolicationSucceeded(Array.from(specialHermesFramesParsed));
+  }
+
   return linkInfos;
 }
 

front_end/panels/rn_welcome/RNWelcome.ts

@@ -173,10 +173,11 @@ export class RNWelcomeImpl extends UI.Widget.VBox implements
             </x-link>
           </div>
           ${launchId ? html`
-            <div class="rn-session-id">
+            <div class="rn-session-id-message">
               ${i18nString(UIStrings.sessionIdMessage)}
-              <br/>
-              ${launchId}
+              <div class="rn-session-id">
+                ${launchId}
+              </div>
             </div>
           ` : ''}
           ${this.#reactNativeVersion !== null && this.#reactNativeVersion !== undefined ? html`

front_end/panels/rn_welcome/rnWelcome.css

@@ -101,10 +101,12 @@
   border-right: 1px solid var(--sys-color-on-base-divider);
 }
 
-.rn-session-id {
-  display: flex;
-  align-items: center;
+.rn-session-id-message {
+  display: block;
   margin-top: 24px;
+}
+
+.rn-session-id-message > .rn-session-id {
   user-select: all;
 }
 

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;