@expo/metro-runtime 3.0.1 → 3.0.2

package/src/error-overlay/UI/LogBoxStyle.ts

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 650 Industries.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export function getBackgroundColor(opacity?: number): string {
+  return `rgba(0, 0, 0, ${opacity == null ? 1 : opacity})`;
+  // return `rgba(51, 51, 51, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getBackgroundLightColor(opacity?: number): string {
+  return `rgba(69, 69, 69, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getBackgroundDarkColor(opacity?: number): string {
+  return `rgba(34, 34, 34, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getWarningColor(opacity?: number): string {
+  return `rgba(250, 186, 48, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getWarningDarkColor(opacity?: number): string {
+  return `rgba(224, 167, 8, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getFatalColor(opacity?: number): string {
+  return `rgba(243, 83, 105, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getFatalDarkColor(opacity?: number): string {
+  return `rgba(208, 75, 95, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getErrorColor(opacity?: number): string {
+  return `rgba(243, 83, 105, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getErrorDarkColor(opacity?: number): string {
+  return `rgba(208, 75, 95, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getLogColor(opacity?: number): string {
+  return `rgba(119, 119, 119, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getWarningHighlightColor(opacity?: number): string {
+  return `rgba(252, 176, 29, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getDividerColor(opacity?: number): string {
+  return `rgba(255, 255, 255, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getHighlightColor(opacity?: number): string {
+  return `rgba(252, 176, 29, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getTextColor(opacity?: number): string {
+  return `rgba(255, 255, 255, ${opacity == null ? 1 : opacity})`;
+}

package/src/error-overlay/UI/constants.ts

@@ -0,0 +1,7 @@
+import { Platform } from 'react-native';
+
+export const CODE_FONT = Platform.select({
+  default: 'Courier',
+  ios: 'Courier New',
+  android: 'monospace',
+});

package/src/error-overlay/formatProjectFilePath.ts

@@ -0,0 +1,38 @@
+import type { StackFrame } from 'stacktrace-parser';
+
+export type MetroStackFrame = StackFrame & { collapse?: boolean };
+
+export function formatProjectFilePath(projectRoot: string, file?: string | null): string {
+  if (file == null) {
+    return '<unknown>';
+  }
+
+  return pathRelativeToPath(file.replace(/\\/g, '/'), projectRoot.replace(/\\/g, '/')).replace(
+    /\?.*$/,
+    ''
+  );
+}
+
+function pathRelativeToPath(path: string, relativeTo: string, sep = '/') {
+  const relativeToParts = relativeTo.split(sep);
+  const pathParts = path.split(sep);
+  let i = 0;
+  while (i < relativeToParts.length && i < pathParts.length) {
+    if (relativeToParts[i] !== pathParts[i]) {
+      break;
+    }
+    i++;
+  }
+  return pathParts.slice(i).join(sep);
+}
+
+export function getStackFormattedLocation(projectRoot: string, frame: MetroStackFrame) {
+  const column = frame.column != null && parseInt(String(frame.column), 10);
+  const location =
+    formatProjectFilePath(projectRoot, frame.file) +
+    (frame.lineNumber != null
+      ? ':' + frame.lineNumber + (column && !isNaN(column) ? ':' + (column + 1) : '')
+      : '');
+
+  return location;
+}

package/src/error-overlay/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+// TODO: This will break tree shaking due to how we transpile this package.
+import { Platform } from 'react-native';
+
+import ErrorToastContainer from './toast/ErrorToastContainer';
+
+declare const process: any;
+
+if (!global.setImmediate) {
+  global.setImmediate = function (fn) {
+    return setTimeout(fn, 0);
+  };
+}
+
+if (process.env.NODE_ENV === 'development') {
+  if (Platform.OS === 'web') {
+    // Stack traces are big with React Navigation
+
+    require('./LogBox').default.install();
+  }
+}
+
+export function withErrorOverlay(Comp: React.ComponentType<any>) {
+  if (process.env.NODE_ENV === 'production') {
+    return Comp;
+  }
+  return function ErrorOverlay(props: any) {
+    return (
+      <ErrorToastContainer>
+        <Comp {...props} />
+      </ErrorToastContainer>
+    );
+  };
+}

package/src/error-overlay/modules/ExceptionsManager/index.native.ts

@@ -0,0 +1,4 @@
+// @ts-expect-error
+import ExceptionsManager from 'react-native/Library/Core/ExceptionsManager';
+
+export default ExceptionsManager;

package/src/error-overlay/modules/ExceptionsManager/index.ts

@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) 650 Industries.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import parseErrorStack from '../parseErrorStack';
+
+type ExtendedError = any;
+
+class SyntheticError extends Error {
+  name: string = '';
+}
+
+/**
+ * Handles the developer-visible aspect of errors and exceptions
+ */
+let exceptionID = 0;
+
+function parseException(e: ExtendedError, isFatal: boolean) {
+  const stack = parseErrorStack(e?.stack);
+  const currentExceptionID = ++exceptionID;
+  const originalMessage = e.message || '';
+  let message = originalMessage;
+  if (e.componentStack != null) {
+    message += `\n\nThis error is located at:${e.componentStack}`;
+  }
+  const namePrefix = e.name == null || e.name === '' ? '' : `${e.name}: `;
+
+  if (!message.startsWith(namePrefix)) {
+    message = namePrefix + message;
+  }
+
+  message = e.jsEngine == null ? message : `${message}, js engine: ${e.jsEngine}`;
+
+  const data = {
+    message,
+    originalMessage: message === originalMessage ? null : originalMessage,
+    name: e.name == null || e.name === '' ? null : e.name,
+    componentStack: typeof e.componentStack === 'string' ? e.componentStack : null,
+    stack,
+    id: currentExceptionID,
+    isFatal,
+    extraData: {
+      jsEngine: e.jsEngine,
+      rawStack: e.stack,
+    },
+  };
+
+  return {
+    ...data,
+    isComponentError: !!e.isComponentError,
+  };
+}
+
+/**
+ * Logs exceptions to the (native) console and displays them
+ */
+function handleException(e: any) {
+  let error: Error;
+  if (e instanceof Error) {
+    error = e;
+  } else {
+    // Workaround for reporting errors caused by `throw 'some string'`
+    // Unfortunately there is no way to figure out the stacktrace in this
+    // case, so if you ended up here trying to trace an error, look for
+    // `throw '<error message>'` somewhere in your codebase.
+    error = new SyntheticError(e);
+  }
+
+  require('../../LogBox').default.addException(parseException(error, true));
+}
+
+const ErrorUtils = {
+  parseException,
+  handleException,
+  SyntheticError,
+};
+
+export default ErrorUtils;

package/src/error-overlay/modules/NativeLogBox/index.native.ts

@@ -0,0 +1,3 @@
+import NativeLogBox from 'react-native/Libraries/NativeModules/specs/NativeLogBox';
+
+export default NativeLogBox;

package/src/error-overlay/modules/NativeLogBox/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+let currentRoot: ReactDOM.Root | null = null;
+export default {
+  show() {
+    if (currentRoot) {
+      return;
+    }
+    const ErrorOverlay: React.ComponentType = require('../../ErrorOverlay').default;
+    // Create a new div with ID `error-overlay` element and render LogBoxInspector into it.
+    const div = document.createElement('div');
+    div.id = 'error-overlay';
+    document.body.appendChild(div);
+
+    currentRoot = ReactDOM.createRoot(div);
+    currentRoot.render(<ErrorOverlay />);
+  },
+  hide() {
+    // Remove div with ID `error-overlay`
+    if (currentRoot) {
+      currentRoot.unmount();
+      currentRoot = null;
+    }
+    const div = document.getElementById('error-overlay');
+    div?.remove();
+  },
+};

package/src/error-overlay/modules/openFileInEditor/index.native.ts

@@ -0,0 +1,3 @@
+import openFileInEditor from 'react-native/Libraries/Core/Devtools/openFileInEditor';
+
+export default openFileInEditor;

package/src/error-overlay/modules/openFileInEditor/index.ts

@@ -0,0 +1,16 @@
+declare const process: any;
+
+function openFileInEditor(file: string, lineNumber: number) {
+  if (process.env.NODE_ENV !== 'production') {
+    // TODO: This is not a great URL since it now blocks users from accessing the `/open-stack-frame` url in their router
+    // ideally it would be something like `/_devtools/open-stack-frame`.
+    const baseUrl = window.location.protocol + '//' + window.location.host;
+
+    fetch(baseUrl + '/open-stack-frame', {
+      method: 'POST',
+      body: JSON.stringify({ file, lineNumber }),
+    });
+  }
+}
+
+export default openFileInEditor;

package/src/error-overlay/modules/parseErrorStack/index.ts

@@ -0,0 +1,26 @@
+import { parse, StackFrame } from 'stacktrace-parser';
+
+function parseErrorStack(stack?: string): (StackFrame & { collapse?: boolean })[] {
+  if (stack == null) {
+    return [];
+  }
+  if (Array.isArray(stack)) {
+    return stack;
+  }
+
+  // This file seems to be web-only, so we can remove this.
+  // // Native support for parsing for non-standard Hermes stack traces.
+  // if (global.HermesInternal) {
+  //   return require('./parseHermesStack').parseErrorStack(stack);
+  // }
+
+  return parse(stack).map((frame) => {
+    // frame.file will mostly look like `http://localhost:8081/index.bundle?platform=web&dev=true&hot=false`
+    return {
+      ...frame,
+      column: frame.column != null ? frame.column - 1 : null,
+    };
+  });
+}
+
+export default parseErrorStack;

package/src/error-overlay/modules/parseErrorStack/parseHermesStack.ts

@@ -0,0 +1,3 @@
+import parseErrorStack from 'react-native/Libraries/Core/Devtools/parseErrorStack';
+
+export { parseErrorStack };

package/src/error-overlay/modules/stringifySafe/index.ts

@@ -0,0 +1,115 @@
+/**
+ * Copyright (c) 650 Industries.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Tries to stringify with JSON.stringify and toString, but catches exceptions
+ * (e.g. from circular objects) and always returns a string and never throws.
+ */
+export function createStringifySafeWithLimits(limits: {
+  maxDepth?: number;
+  maxStringLimit?: number;
+  maxArrayLimit?: number;
+  maxObjectKeysLimit?: number;
+}): (foo: any) => string {
+  const {
+    maxDepth = Number.POSITIVE_INFINITY,
+    maxStringLimit = Number.POSITIVE_INFINITY,
+    maxArrayLimit = Number.POSITIVE_INFINITY,
+    maxObjectKeysLimit = Number.POSITIVE_INFINITY,
+  } = limits;
+  const stack: any[] = [];
+  function replacer(this: unknown, _key: string, value: any): any {
+    while (stack.length && this !== stack[0]) {
+      stack.shift();
+    }
+
+    if (typeof value === 'string') {
+      const truncatedString = '...(truncated)...';
+      if (value.length > maxStringLimit + truncatedString.length) {
+        return value.substring(0, maxStringLimit) + truncatedString;
+      }
+      return value;
+    }
+    if (typeof value !== 'object' || value === null) {
+      return value;
+    }
+
+    let retval = value;
+    if (Array.isArray(value)) {
+      if (stack.length >= maxDepth) {
+        retval = `[ ... array with ${value.length} values ... ]`;
+      } else if (value.length > maxArrayLimit) {
+        retval = value
+          .slice(0, maxArrayLimit)
+          .concat([`... extra ${value.length - maxArrayLimit} values truncated ...`]);
+      }
+    } else {
+      // Add refinement after Array.isArray call.
+      if (typeof value !== 'object') {
+        throw new Error('This was already found earlier');
+      }
+      const keys = Object.keys(value);
+      if (stack.length >= maxDepth) {
+        retval = `{ ... object with ${keys.length} keys ... }`;
+      } else if (keys.length > maxObjectKeysLimit) {
+        // Return a sample of the keys.
+        retval = {};
+        for (const k of keys.slice(0, maxObjectKeysLimit)) {
+          retval[k] = value[k];
+        }
+        const truncatedKey = '...(truncated keys)...';
+        retval[truncatedKey] = keys.length - maxObjectKeysLimit;
+      }
+    }
+    stack.unshift(retval);
+    return retval;
+  }
+
+  return function stringifySafe(arg: any): string {
+    if (arg === undefined) {
+      return 'undefined';
+    } else if (arg === null) {
+      return 'null';
+    } else if (typeof arg === 'function') {
+      try {
+        return arg.toString();
+      } catch {
+        return '[function unknown]';
+      }
+    } else if (arg instanceof Error) {
+      return arg.name + ': ' + arg.message;
+    } else {
+      // Perform a try catch, just in case the object has a circular
+      // reference or stringify throws for some other reason.
+      try {
+        const ret = JSON.stringify(arg, replacer);
+        if (ret === undefined) {
+          return '["' + typeof arg + '" failed to stringify]';
+        }
+        return ret;
+      } catch {
+        if (typeof arg.toString === 'function') {
+          try {
+            // $FlowFixMe[incompatible-use] : toString shouldn't take any arguments in general.
+            return arg.toString();
+          } catch {}
+        }
+      }
+    }
+    return '["' + typeof arg + '" failed to stringify]';
+  };
+}
+
+const stringifySafe = createStringifySafeWithLimits({
+  maxDepth: 10,
+  maxStringLimit: 100,
+  maxArrayLimit: 50,
+  maxObjectKeysLimit: 50,
+});
+
+export default stringifySafe;

package/src/error-overlay/modules/symbolicateStackTrace/index.native.ts

@@ -0,0 +1,3 @@
+import symbolicateStackTrace from 'react-native/Libraries/Core/Devtools/symbolicateStackTrace';
+
+export default symbolicateStackTrace;

package/src/error-overlay/modules/symbolicateStackTrace/index.ts

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 650 Industries.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { StackFrame } from 'stacktrace-parser';
+
+export type CodeFrame = {
+  content: string;
+  location?: {
+    row: number;
+    column: number;
+    [key: string]: any;
+  };
+  fileName: string;
+};
+
+export type SymbolicatedStackTrace = {
+  stack: StackFrame[];
+  codeFrame?: CodeFrame;
+};
+
+async function symbolicateStackTrace(stack: StackFrame[]): Promise<SymbolicatedStackTrace> {
+  const baseUrl =
+    typeof window === 'undefined'
+      ? process.env.EXPO_DEV_SERVER_ORIGIN
+      : window.location.protocol + '//' + window.location.host;
+
+  const response = await fetch(baseUrl + '/symbolicate', {
+    method: 'POST',
+    body: JSON.stringify({ stack }),
+  });
+  return await response.json();
+}
+
+export default symbolicateStackTrace;

package/src/error-overlay/overlay/LogBoxInspectorCodeFrame.tsx

@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) 650 Industries.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import { LogBoxInspectorSection } from './LogBoxInspectorSection';
+import type { CodeFrame } from '../Data/parseLogBoxLog';
+import { Ansi } from '../UI/AnsiHighlight';
+import { LogBoxButton } from '../UI/LogBoxButton';
+import * as LogBoxStyle from '../UI/LogBoxStyle';
+import { CODE_FONT } from '../UI/constants';
+import { formatProjectFilePath } from '../formatProjectFilePath';
+import openFileInEditor from '../modules/openFileInEditor';
+
+declare const process: any;
+
+export function LogBoxInspectorCodeFrame({ codeFrame }: { codeFrame?: CodeFrame }) {
+  if (codeFrame == null) {
+    return null;
+  }
+
+  function getFileName() {
+    return formatProjectFilePath(process.env.EXPO_PROJECT_ROOT, codeFrame?.fileName);
+  }
+
+  function getLocation() {
+    const location = codeFrame?.location;
+    if (location != null) {
+      return ` (${location.row}:${location.column + 1 /* Code frame columns are zero indexed */})`;
+    }
+
+    return null;
+  }
+
+  return (
+    <LogBoxInspectorSection heading="Source">
+      <View style={styles.box}>
+        <View style={styles.frame}>
+          <ScrollView horizontal>
+            <Ansi style={styles.content} text={codeFrame.content} />
+          </ScrollView>
+        </View>
+        <LogBoxButton
+          backgroundColor={{
+            default: 'transparent',
+            pressed: LogBoxStyle.getBackgroundDarkColor(1),
+          }}
+          style={styles.button}
+          onPress={() => {
+            openFileInEditor(codeFrame.fileName, codeFrame.location?.row ?? 0);
+          }}>
+          <Text style={styles.fileText}>
+            {getFileName()}
+            {getLocation()}
+          </Text>
+        </LogBoxButton>
+      </View>
+    </LogBoxInspectorSection>
+  );
+}
+
+const styles = StyleSheet.create({
+  box: {
+    backgroundColor: LogBoxStyle.getBackgroundColor(),
+    borderWidth: 1,
+    borderColor: '#323232',
+    marginLeft: 10,
+    marginRight: 10,
+    marginTop: 5,
+    borderRadius: 3,
+  },
+  frame: {
+    padding: 10,
+    borderBottomColor: LogBoxStyle.getTextColor(0.1),
+    borderBottomWidth: 1,
+  },
+  button: {
+    paddingTop: 10,
+    paddingBottom: 10,
+  },
+  content: {
+    color: LogBoxStyle.getTextColor(1),
+    fontSize: 12,
+    includeFontPadding: false,
+    lineHeight: 20,
+    fontFamily: CODE_FONT,
+  },
+  fileText: {
+    userSelect: 'none',
+    color: LogBoxStyle.getTextColor(0.5),
+    textAlign: 'center',
+    flex: 1,
+    fontSize: 16,
+    includeFontPadding: false,
+    fontFamily: CODE_FONT,
+  },
+});