Capture console errors; not just unhandled ones

Author: EdmondChuiHW

front_end/core/host/RNPerfMetrics.ts

@@ -20,6 +20,7 @@ export function getInstance(): RNPerfMetrics {
 
 type UnsubscribeFn = () => void;
 class RNPerfMetrics {
+  readonly #CONSOLE_ERROR_METHOD = 'error';
   #listeners: Set<RNReliabilityEventListener> = new Set();
   #launchId: string|null = null;
 
@@ -70,33 +71,33 @@ class RNPerfMetrics {
   }
 
   registerGlobalErrorReporting(): void {
-    window.addEventListener('error', event => {
-      this.sendEvent({
-        eventName: 'Browser.UnhandledError',
-        params: {
-          type: 'error',
-          message: event.message,
-          error: event.error instanceof Error ? event.error : null,
-        }
-      });
-    }, {passive: true});
-
-    window.addEventListener('unhandledrejection', event => {
-      let message: string;
+    // Indirection for `console` ensures minifier won't strip this out.
+    const cons = globalThis.console;
+    const originalConsoleError = cons[this.#CONSOLE_ERROR_METHOD];
+    cons[this.#CONSOLE_ERROR_METHOD] = (...args: unknown[]) => {
       try {
-        message = String(event.reason);
-      } catch {
-        message = '[Promise was rejected without a serialisable reason]';
+        const maybeError = args[0];
+        const [message, error] = maybeWrapError('[RNPerfMetrics] console.error called', maybeError);
+        this.sendEvent({
+          eventName: 'Browser.ConsoleError',
+          params: {
+            message,
+            error,
+          }
+        });
+      } catch (e) {
+        const [message, error] = maybeWrapError('[RNPerfMetrics] Error handling console.error', e);
+        this.sendEvent({
+          eventName: 'Browser.ConsoleError',
+          params: {
+            message,
+            error,
+          }
+        });
+      } finally {
+        originalConsoleError.apply(cons, args);
       }
-      this.sendEvent({
-        eventName: 'Browser.UnhandledError',
-        params: {
-          type: 'rejectedPromise',
-          message,
-          error: event.reason instanceof Error ? event.reason : null,
-        }
-      });
-    }, {passive: true});
+    }
   }
 
   setLaunchId(launchId: string|null): void {
@@ -175,6 +176,16 @@ function maybeTruncateDeveloperResourceUrl(parsedURL: ParsedURL): string {
   return parsedURL.isHttpOrHttps() ? url : `${url.slice(0, 100)} …(omitted ${url.length - 100} characters)`;
 }
 
+function maybeWrapError(baseMessage: string, error: unknown): [string, Error] {
+  if (error instanceof Error) {
+    const message = `${baseMessage}: ${error.message}`
+    return [message, error];
+  }
+
+  const message = `${baseMessage}: ${String(error)}`;
+  return [message, new Error(message, {cause: error})];
+}
+
 type CommonEventFields = Readonly<{
   timestamp: DOMHighResTimeStamp,
   launchId: string | void | null,
@@ -203,12 +214,11 @@ export type BrowserVisibilityChangeEvent = Readonly<{
   }>,
 }>;
 
-export type UnhandledErrorEvent = Readonly<{
-  eventName: 'Browser.UnhandledError',
+export type ConsoleErrorEvent = Readonly<{
+  eventName: 'Browser.ConsoleError',
   params: Readonly<{
-    type: 'error' | 'rejectedPromise',
     message: string,
-    error: Error | null | undefined,
+    error: Error,
   }>,
 }>;
 
@@ -238,7 +248,7 @@ export type DeveloperResourceLoadingFinishedEvent = Readonly<{
 }>;
 
 export type ReactNativeChromeDevToolsEvent = EntrypointLoadingStartedEvent|EntrypointLoadingFinishedEvent|
-    DebuggerReadyEvent|BrowserVisibilityChangeEvent|UnhandledErrorEvent|RemoteDebuggingTerminatedEvent|
+    DebuggerReadyEvent|BrowserVisibilityChangeEvent|ConsoleErrorEvent|RemoteDebuggingTerminatedEvent|
     DeveloperResourceLoadingStartedEvent|DeveloperResourceLoadingFinishedEvent;
 
 export type DecoratedReactNativeChromeDevToolsEvent = CommonEventFields&ReactNativeChromeDevToolsEvent;