@expo/metro-runtime 6.0.2 → 6.1.0

package/build/metroServerLogs.d.ts

@@ -0,0 +1,2 @@
+export declare function captureStackForServerLogs(): void;
+//# sourceMappingURL=metroServerLogs.d.ts.map

package/build/metroServerLogs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"metroServerLogs.d.ts","sourceRoot":"","sources":["../src/metroServerLogs.ts"],"names":[],"mappings":"AAAA,wBAAgB,yBAAyB,SAAK"}

package/build/metroServerLogs.native.d.ts

@@ -0,0 +1,2 @@
+export declare function captureStackForServerLogs(): void;
+//# sourceMappingURL=metroServerLogs.native.d.ts.map

package/build/metroServerLogs.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"metroServerLogs.native.d.ts","sourceRoot":"","sources":["../src/metroServerLogs.native.ts"],"names":[],"mappings":"AASA,wBAAgB,yBAAyB,SAyCxC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expo/metro-runtime",
-  "version": "6.0.2",
+  "version": "6.1.0",
   "description": "Tools for making advanced Metro bundler features work",
   "sideEffects": true,
   "main": "src/index.ts",
@@ -53,5 +53,5 @@
   "devDependencies": {
     "react-dom": "19.1.0"
   },
-  "gitHead": "eaa9b645058cf2233fbb27bb21a19bc605c90a88"
+  "gitHead": "de2ce610a804a8f3ddcee6ea9474543e81b903bd"
 }

package/src/index.ts

@@ -10,12 +10,12 @@ import './location/install';
 import '@expo/metro-runtime/rsc/runtime';
 
 if (__DEV__) {
+  require('./metroServerLogs').captureStackForServerLogs();
+
   // TODO: Remove when fixed upstream. Expected in RN 0.82.
   // https://github.com/facebook/react-native/commit/c4082c9ce208a324c2d011823ca2ba432411aafc
   require('./promiseRejectionTracking').enablePromiseRejectionTracking();
-}
 
-if (__DEV__) {
   // @ts-expect-error: TODO: Remove this when we remove the log box.
   globalThis.__expo_dev_resetErrors = require('./error-overlay/LogBox').default.clearAllLogs;
 }

package/src/metroServerLogs.native.ts

@@ -0,0 +1,88 @@
+import React from 'react';
+
+const HMRClient = require('react-native/Libraries/Utilities/HMRClient').default;
+
+type ReactWithOwnerStack = typeof React & {
+  captureOwnerStack?: () => string | null;
+};
+const captureOwnerStack = (React as ReactWithOwnerStack).captureOwnerStack;
+
+export function captureStackForServerLogs() {
+  const HMRClientLogOriginal = HMRClient.log;
+
+  HMRClient.log = (level: string, data: unknown[]) => {
+    // NOTE: Should we print stack trace for warnings as well?
+    if (![/*'warn',*/ 'error'].includes(level)) {
+      // If the log level is not warn or error, we don't need to capture the stack trace.
+      return HMRClientLogOriginal.apply(HMRClient, [level, data]);
+    }
+
+    const hasErrorLikeStack = data.some((item) => hasStringKey(item, 'stack'));
+    const hasComponentStack = data.some(
+      (item) =>
+        (typeof item === 'string' && isComponentStack(withoutANSIColorStyles(item))) ||
+        (hasStringKey(item, 'message') && isComponentStack(withoutANSIColorStyles(item.message)))
+    );
+
+    // This is not an Expo error. It's used only to capture the stack trace of the log call.
+    // If you see this, look higher in the stack to find the actual cause.
+    const syntheticStack = hasErrorLikeStack ? undefined : captureCurrentStack();
+    const componentStack = hasComponentStack ? undefined : captureOwnerStack?.();
+
+    const dataWithStack = [...data];
+    if (syntheticStack) {
+      dataWithStack.push(syntheticStack);
+    } else {
+      data.forEach((item) => {
+        if (hasStringKey(item, 'stack')) {
+          // We have to explicitly push the stack to the data array
+          // because otherwise it will be lost by `pretty-format`.
+          // TODO: Remove message from the stack to avoid duplication (message from `pretty-format` and from our added stack).
+          dataWithStack.push(item.stack);
+        }
+      });
+    }
+    if (componentStack) {
+      dataWithStack.push(componentStack);
+    }
+
+    HMRClientLogOriginal.apply(HMRClient, [level, dataWithStack]);
+  };
+}
+
+// Based on https://github.com/facebook/react-native/blob/a8bc74c0099252cb1d11ad3b80f3deac71dcc0d5/packages/react-native/Libraries/LogBox/Data/parseLogBoxLog.js#L447
+function withoutANSIColorStyles(message: string): string {
+  return message.replace(
+    // eslint-disable-next-line no-control-regex
+    /[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g,
+    ''
+  );
+}
+
+// Based on https://github.com/facebook/react-native/blob/a8bc74c0099252cb1d11ad3b80f3deac71dcc0d5/packages/react-native/Libraries/LogBox/Data/parseLogBoxLog.js#L214
+const RE_COMPONENT_STACK_LINE_OLD = / {4}in/;
+const RE_COMPONENT_STACK_LINE_NEW = / {4}at/;
+const RE_COMPONENT_STACK_LINE_STACK_FRAME = /@.*\n/;
+function isComponentStack(consoleArgument: string) {
+  const isOldComponentStackFormat = RE_COMPONENT_STACK_LINE_OLD.test(consoleArgument);
+  const isNewComponentStackFormat = RE_COMPONENT_STACK_LINE_NEW.test(consoleArgument);
+  const isNewJSCComponentStackFormat = RE_COMPONENT_STACK_LINE_STACK_FRAME.test(consoleArgument);
+
+  return isOldComponentStackFormat || isNewComponentStackFormat || isNewJSCComponentStackFormat;
+}
+
+function hasStringKey(obj: unknown, key: string): obj is { [key: string]: string } {
+  return (
+    typeof obj === 'object' &&
+    obj !== null &&
+    key in obj &&
+    typeof (obj as Record<string, unknown>)[key] === 'string'
+  );
+}
+
+class NamelessError extends Error {
+  name = '';
+}
+function captureCurrentStack() {
+  return new NamelessError().stack;
+}

package/src/metroServerLogs.ts

@@ -0,0 +1 @@
+export function captureStackForServerLogs() {}