@expo/metro-runtime 3.0.0 → 3.0.2

package/src/error-overlay/Data/LogBoxSymbolication.tsx

@@ -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.
+ */
+
+import { StackFrame as UpstreamStackFrame } from 'stacktrace-parser';
+
+import symbolicateStackTrace from '../modules/symbolicateStackTrace';
+
+type SymbolicatedStackTrace = any;
+
+type StackFrame = UpstreamStackFrame & { collapse?: boolean };
+
+export type Stack = StackFrame[];
+
+const cache: Map<Stack, Promise<SymbolicatedStackTrace>> = new Map();
+
+/**
+ * Sanitize because sometimes, `symbolicateStackTrace` gives us invalid values.
+ */
+const sanitize = ({
+  stack: maybeStack,
+  codeFrame,
+}: SymbolicatedStackTrace): SymbolicatedStackTrace => {
+  if (!Array.isArray(maybeStack)) {
+    throw new Error('Expected stack to be an array.');
+  }
+  const stack: StackFrame[] = [];
+  for (const maybeFrame of maybeStack) {
+    let collapse = false;
+    if ('collapse' in maybeFrame) {
+      if (typeof maybeFrame.collapse !== 'boolean') {
+        throw new Error('Expected stack frame `collapse` to be a boolean.');
+      }
+      collapse = maybeFrame.collapse;
+    }
+    stack.push({
+      arguments: [],
+      column: maybeFrame.column,
+      file: maybeFrame.file,
+      lineNumber: maybeFrame.lineNumber,
+      methodName: maybeFrame.methodName,
+      collapse,
+    });
+  }
+  return { stack, codeFrame };
+};
+
+export function deleteStack(stack: Stack): void {
+  cache.delete(stack);
+}
+
+export function symbolicate(stack: Stack): Promise<SymbolicatedStackTrace> {
+  let promise = cache.get(stack);
+  if (promise == null) {
+    promise = symbolicateStackTrace(stack).then(sanitize);
+    cache.set(stack, promise);
+  }
+
+  return promise;
+}

package/src/error-overlay/Data/LogContext.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Platform } from 'react-native';
+
+import { LogBoxLog } from './LogBoxLog';
+
+// Context provider for Array<LogBoxLog>
+
+export const LogContext = React.createContext<{
+  selectedLogIndex: number;
+  isDisabled: boolean;
+  logs: LogBoxLog[];
+} | null>(null);
+
+export function useLogs(): {
+  selectedLogIndex: number;
+  isDisabled: boolean;
+  logs: LogBoxLog[];
+} {
+  const logs = React.useContext(LogContext);
+  if (!logs) {
+    if (Platform.OS === 'web' && typeof window !== 'undefined') {
+      // Logbox data that is pre-fetched on the dev server and rendered here.
+      const expoCliStaticErrorElement = document.getElementById('_expo-static-error');
+      if (expoCliStaticErrorElement?.textContent) {
+        const raw = JSON.parse(expoCliStaticErrorElement.textContent);
+        return {
+          ...raw,
+          logs: raw.logs.map((raw: any) => new LogBoxLog(raw)),
+        };
+      }
+    }
+
+    throw new Error('useLogs must be used within a LogProvider');
+  }
+  return logs;
+}
+
+export function useSelectedLog() {
+  const { selectedLogIndex, logs } = useLogs();
+  return logs[selectedLogIndex];
+}

package/src/error-overlay/Data/parseLogBoxLog.tsx

@@ -0,0 +1,342 @@
+/**
+ * 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 type { LogBoxLogData } from './LogBoxLog';
+import parseErrorStack from '../modules/parseErrorStack';
+import stringifySafe from '../modules/stringifySafe';
+type ExceptionData = any;
+
+const BABEL_TRANSFORM_ERROR_FORMAT =
+  /^(?:TransformError )?(?:SyntaxError: |ReferenceError: )(.*): (.*) \((\d+):(\d+)\)\n\n([\s\S]+)/;
+const BABEL_CODE_FRAME_ERROR_FORMAT =
+  /^(?:TransformError )?(?:.*):? (?:.*?)(\/.*): ([\s\S]+?)\n([ >]{2}[\d\s]+ \|[\s\S]+|\u{001b}[\s\S]+)/u;
+const METRO_ERROR_FORMAT =
+  /^(?:InternalError Metro has encountered an error:) (.*): (.*) \((\d+):(\d+)\)\n\n([\s\S]+)/u;
+
+export type ExtendedExceptionData = ExceptionData & {
+  isComponentError: boolean;
+  [key: string]: any;
+};
+export type Category = string;
+export type CodeFrame = {
+  content: string;
+  location?: {
+    row: number;
+    column: number;
+    [key: string]: any;
+  } | null;
+  fileName: string;
+
+  // TODO: When React switched to using call stack frames,
+  // we gained the ability to use the collapse flag, but
+  // it is not integrated into the LogBox UI.
+  collapse?: boolean;
+};
+
+export type Message = {
+  content: string;
+  substitutions: {
+    length: number;
+    offset: number;
+  }[];
+};
+
+export type ComponentStack = CodeFrame[];
+
+const SUBSTITUTION = '\ufeff%s';
+
+export function parseInterpolation(args: readonly any[]): {
+  category: Category;
+  message: Message;
+} {
+  const categoryParts: string[] = [];
+  const contentParts: string[] = [];
+  const substitutionOffsets: { length: number; offset: number }[] = [];
+
+  const remaining = [...args];
+  if (typeof remaining[0] === 'string') {
+    const formatString = String(remaining.shift());
+    const formatStringParts = formatString.split('%s');
+    const substitutionCount = formatStringParts.length - 1;
+    const substitutions = remaining.splice(0, substitutionCount);
+
+    let categoryString = '';
+    let contentString = '';
+
+    let substitutionIndex = 0;
+    for (const formatStringPart of formatStringParts) {
+      categoryString += formatStringPart;
+      contentString += formatStringPart;
+
+      if (substitutionIndex < substitutionCount) {
+        if (substitutionIndex < substitutions.length) {
+          // Don't stringify a string type.
+          // It adds quotation mark wrappers around the string,
+          // which causes the LogBox to look odd.
+          const substitution =
+            typeof substitutions[substitutionIndex] === 'string'
+              ? substitutions[substitutionIndex]
+              : stringifySafe(substitutions[substitutionIndex]);
+          substitutionOffsets.push({
+            length: substitution.length,
+            offset: contentString.length,
+          });
+
+          categoryString += SUBSTITUTION;
+          contentString += substitution;
+        } else {
+          substitutionOffsets.push({
+            length: 2,
+            offset: contentString.length,
+          });
+
+          categoryString += '%s';
+          contentString += '%s';
+        }
+
+        substitutionIndex++;
+      }
+    }
+
+    categoryParts.push(categoryString);
+    contentParts.push(contentString);
+  }
+
+  const remainingArgs = remaining.map((arg) => {
+    // Don't stringify a string type.
+    // It adds quotation mark wrappers around the string,
+    // which causes the LogBox to look odd.
+    return typeof arg === 'string' ? arg : stringifySafe(arg);
+  });
+  categoryParts.push(...remainingArgs);
+  contentParts.push(...remainingArgs);
+
+  return {
+    category: categoryParts.join(' '),
+    message: {
+      content: contentParts.join(' '),
+      substitutions: substitutionOffsets,
+    },
+  };
+}
+
+function isComponentStack(consoleArgument: string) {
+  const isOldComponentStackFormat = / {4}in/.test(consoleArgument);
+  const isNewComponentStackFormat = / {4}at/.test(consoleArgument);
+  const isNewJSCComponentStackFormat = /@.*\n/.test(consoleArgument);
+
+  return isOldComponentStackFormat || isNewComponentStackFormat || isNewJSCComponentStackFormat;
+}
+
+export function parseComponentStack(message: string): ComponentStack {
+  // In newer versions of React, the component stack is formatted as a call stack frame.
+  // First try to parse the component stack as a call stack frame, and if that doesn't
+  // work then we'll fallback to the old custom component stack format parsing.
+  const stack = parseErrorStack(message);
+  if (stack && stack.length > 0) {
+    return stack.map((frame) => ({
+      content: frame.methodName,
+      collapse: frame.collapse || false,
+      fileName: frame.file == null ? 'unknown' : frame.file,
+      location: {
+        column: frame.column == null ? -1 : frame.column,
+        row: frame.lineNumber == null ? -1 : frame.lineNumber,
+      },
+    }));
+  }
+
+  return message
+    .split(/\n {4}in /g)
+    .map((s) => {
+      if (!s) {
+        return null;
+      }
+      const match = s.match(/(.*) \(at (.*\.js):([\d]+)\)/);
+      if (!match) {
+        return null;
+      }
+
+      const [content, fileName, row] = match.slice(1);
+      return {
+        content,
+        fileName,
+        location: { column: -1, row: parseInt(row, 10) },
+      };
+    })
+    .filter(Boolean) as ComponentStack;
+}
+
+export function parseLogBoxException(error: ExtendedExceptionData): LogBoxLogData {
+  const message = error.originalMessage != null ? error.originalMessage : 'Unknown';
+
+  const metroInternalError = message.match(METRO_ERROR_FORMAT);
+  if (metroInternalError) {
+    const [content, fileName, row, column, codeFrame] = metroInternalError.slice(1);
+
+    return {
+      level: 'fatal',
+      type: 'Metro Error',
+      stack: [],
+      isComponentError: false,
+      componentStack: [],
+      codeFrame: {
+        fileName,
+        location: {
+          row: parseInt(row, 10),
+          column: parseInt(column, 10),
+        },
+        content: codeFrame,
+      },
+      message: {
+        content,
+        substitutions: [],
+      },
+      category: `${fileName}-${row}-${column}`,
+    };
+  }
+
+  const babelTransformError = message.match(BABEL_TRANSFORM_ERROR_FORMAT);
+  if (babelTransformError) {
+    // Transform errors are thrown from inside the Babel transformer.
+    const [fileName, content, row, column, codeFrame] = babelTransformError.slice(1);
+
+    return {
+      level: 'syntax',
+      stack: [],
+      isComponentError: false,
+      componentStack: [],
+      codeFrame: {
+        fileName,
+        location: {
+          row: parseInt(row, 10),
+          column: parseInt(column, 10),
+        },
+        content: codeFrame,
+      },
+      message: {
+        content,
+        substitutions: [],
+      },
+      category: `${fileName}-${row}-${column}`,
+    };
+  }
+
+  const babelCodeFrameError = message.match(BABEL_CODE_FRAME_ERROR_FORMAT);
+
+  if (babelCodeFrameError) {
+    // Codeframe errors are thrown from any use of buildCodeFrameError.
+    const [fileName, content, codeFrame] = babelCodeFrameError.slice(1);
+    return {
+      level: 'syntax',
+      stack: [],
+      isComponentError: false,
+      componentStack: [],
+      codeFrame: {
+        fileName,
+        location: null, // We are not given the location.
+        content: codeFrame,
+      },
+      message: {
+        content,
+        substitutions: [],
+      },
+      category: `${fileName}-${1}-${1}`,
+    };
+  }
+
+  if (message.match(/^TransformError /)) {
+    return {
+      level: 'syntax',
+      stack: error.stack,
+      isComponentError: error.isComponentError,
+      componentStack: [],
+      message: {
+        content: message,
+        substitutions: [],
+      },
+      category: message,
+    };
+  }
+
+  const componentStack = error.componentStack;
+  if (error.isFatal || error.isComponentError) {
+    return {
+      level: 'fatal',
+      stack: error.stack,
+      isComponentError: error.isComponentError,
+      componentStack: componentStack != null ? parseComponentStack(componentStack) : [],
+      ...parseInterpolation([message]),
+    };
+  }
+
+  if (componentStack != null) {
+    // It is possible that console errors have a componentStack.
+    return {
+      level: 'error',
+      stack: error.stack,
+      isComponentError: error.isComponentError,
+      componentStack: parseComponentStack(componentStack),
+      ...parseInterpolation([message]),
+    };
+  }
+
+  // Most `console.error` calls won't have a componentStack. We parse them like
+  // regular logs which have the component stack burried in the message.
+  return {
+    level: 'error',
+    stack: error.stack,
+    isComponentError: error.isComponentError,
+    ...parseLogBoxLog([message]),
+  };
+}
+
+export function parseLogBoxLog(args: readonly any[]): {
+  componentStack: ComponentStack;
+  category: Category;
+  message: Message;
+} {
+  const message = args[0];
+  let argsWithoutComponentStack: any[] = [];
+  let componentStack: ComponentStack = [];
+
+  // Extract component stack from warnings like "Some warning%s".
+  if (typeof message === 'string' && message.slice(-2) === '%s' && args.length > 0) {
+    const lastArg = args[args.length - 1];
+    if (typeof lastArg === 'string' && isComponentStack(lastArg)) {
+      argsWithoutComponentStack = args.slice(0, -1);
+      argsWithoutComponentStack[0] = message.slice(0, -2);
+      componentStack = parseComponentStack(lastArg);
+    }
+  }
+
+  if (componentStack.length === 0) {
+    // Try finding the component stack elsewhere.
+    for (const arg of args) {
+      if (typeof arg === 'string' && isComponentStack(arg)) {
+        // Strip out any messages before the component stack.
+        let messageEndIndex = arg.search(/\n {4}(in|at) /);
+        if (messageEndIndex < 0) {
+          // Handle JSC component stacks.
+          messageEndIndex = arg.search(/\n/);
+        }
+        if (messageEndIndex > 0) {
+          argsWithoutComponentStack.push(arg.slice(0, messageEndIndex));
+        }
+
+        componentStack = parseComponentStack(arg);
+      } else {
+        argsWithoutComponentStack.push(arg);
+      }
+    }
+  }
+
+  return {
+    ...parseInterpolation(argsWithoutComponentStack),
+    componentStack,
+  };
+}

package/src/error-overlay/ErrorOverlay.tsx

@@ -0,0 +1,191 @@
+/**
+ * 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, { useCallback, useEffect, useState } from 'react';
+import { Keyboard, ScrollView, View, StyleSheet } from 'react-native';
+
+import * as LogBoxData from './Data/LogBoxData';
+import { LogBoxLog, StackType } from './Data/LogBoxLog';
+import { useLogs, useSelectedLog } from './Data/LogContext';
+import * as LogBoxStyle from './UI/LogBoxStyle';
+import { LogBoxInspectorCodeFrame } from './overlay/LogBoxInspectorCodeFrame';
+import { LogBoxInspectorFooter as ErrorOverlayFooter } from './overlay/LogBoxInspectorFooter';
+import { LogBoxInspectorHeader as ErrorOverlayHeader } from './overlay/LogBoxInspectorHeader';
+import { LogBoxInspectorMessageHeader } from './overlay/LogBoxInspectorMessageHeader';
+import { LogBoxInspectorStackFrames } from './overlay/LogBoxInspectorStackFrames';
+
+const HEADER_TITLE_MAP = {
+  warn: 'Console Warning',
+  error: 'Console Error',
+  fatal: 'Uncaught Error',
+  syntax: 'Syntax Error',
+  static: 'Static Rendering Error (Node.js)',
+  component: 'Render Error',
+};
+
+export function LogBoxInspectorContainer() {
+  const { selectedLogIndex, logs } = useLogs();
+  const log = logs[selectedLogIndex];
+  if (log == null) {
+    return null;
+  }
+  return <LogBoxInspector log={log} selectedLogIndex={selectedLogIndex} logs={logs} />;
+}
+
+export function LogBoxInspector({
+  log,
+  selectedLogIndex,
+  logs,
+}: {
+  log: LogBoxLog;
+  selectedLogIndex: number;
+  logs: LogBoxLog[];
+}) {
+  const onDismiss = useCallback((): void => {
+    // Here we handle the cases when the log is dismissed and it
+    // was either the last log, or when the current index
+    // is now outside the bounds of the log array.
+    const logsArray = Array.from(logs);
+    if (selectedLogIndex != null) {
+      if (logsArray.length - 1 <= 0) {
+        LogBoxData.setSelectedLog(-1);
+      } else if (selectedLogIndex >= logsArray.length - 1) {
+        LogBoxData.setSelectedLog(selectedLogIndex - 1);
+      }
+
+      LogBoxData.dismiss(logsArray[selectedLogIndex]);
+    }
+  }, [selectedLogIndex]);
+
+  const onMinimize = useCallback((): void => {
+    LogBoxData.setSelectedLog(-1);
+  }, []);
+
+  const onChangeSelectedIndex = useCallback((index: number): void => {
+    LogBoxData.setSelectedLog(index);
+  }, []);
+
+  useEffect(() => {
+    if (log) {
+      LogBoxData.symbolicateLogNow('stack', log);
+      LogBoxData.symbolicateLogNow('component', log);
+    }
+  }, [log]);
+
+  useEffect(() => {
+    // Optimistically symbolicate the last and next logs.
+    if (logs.length > 1) {
+      const selected = selectedLogIndex;
+      const lastIndex = logs.length - 1;
+      const prevIndex = selected - 1 < 0 ? lastIndex : selected - 1;
+      const nextIndex = selected + 1 > lastIndex ? 0 : selected + 1;
+      for (const type of ['component', 'stack'] as const) {
+        LogBoxData.symbolicateLogLazy(type, logs[prevIndex]);
+        LogBoxData.symbolicateLogLazy(type, logs[nextIndex]);
+      }
+    }
+  }, [logs, selectedLogIndex]);
+
+  useEffect(() => {
+    Keyboard.dismiss();
+  }, []);
+
+  const _handleRetry = useCallback(
+    (type: StackType) => {
+      LogBoxData.retrySymbolicateLogNow(type, log);
+    },
+    [log]
+  );
+
+  return (
+    <View style={styles.container}>
+      <ErrorOverlayHeader onSelectIndex={onChangeSelectedIndex} level={log.level} />
+      <ErrorOverlayBody onRetry={_handleRetry} />
+      <ErrorOverlayFooter onDismiss={onDismiss} onMinimize={onMinimize} />
+    </View>
+  );
+}
+
+export function ErrorOverlayBody({ onRetry }: { onRetry: (type: StackType) => void }) {
+  const log = useSelectedLog();
+  return <ErrorOverlayBodyContents log={log} onRetry={onRetry} />;
+}
+
+export function ErrorOverlayBodyContents({
+  log,
+  onRetry,
+}: {
+  log: LogBoxLog;
+  onRetry: (type: StackType) => void;
+}) {
+  const [collapsed, setCollapsed] = useState(true);
+
+  useEffect(() => {
+    setCollapsed(true);
+  }, [log]);
+
+  const headerTitle = HEADER_TITLE_MAP[log.isComponentError ? 'component' : log.level] ?? log.type;
+
+  const header = (
+    <LogBoxInspectorMessageHeader
+      collapsed={collapsed}
+      onPress={() => setCollapsed(!collapsed)}
+      message={log.message}
+      level={log.level}
+      title={headerTitle}
+    />
+  );
+
+  // Hide useless React stack.
+  const needsStack = !log.message.content.match(
+    /(Expected server HTML to contain a matching|Text content did not match\.)/
+  );
+
+  return (
+    <>
+      {collapsed && header}
+      <ScrollView style={styles.scrollBody}>
+        {!collapsed && header}
+
+        <LogBoxInspectorCodeFrame codeFrame={log.codeFrame} />
+        {needsStack && (
+          <LogBoxInspectorStackFrames
+            type="stack"
+            // eslint-disable-next-line react/jsx-no-bind
+            onRetry={onRetry.bind(onRetry, 'stack')}
+          />
+        )}
+        {!!log?.componentStack?.length && (
+          <LogBoxInspectorStackFrames
+            type="component"
+            // eslint-disable-next-line react/jsx-no-bind
+            onRetry={onRetry.bind(onRetry, 'component')}
+          />
+        )}
+      </ScrollView>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  scrollBody: {
+    backgroundColor: LogBoxStyle.getBackgroundColor(1),
+    flex: 1,
+  },
+  container: {
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    zIndex: 999,
+    flex: 1,
+    // @ts-expect-error: fixed is not in the RN types but it works on web
+    position: 'fixed',
+  },
+});
+
+export default LogBoxData.withSubscription(LogBoxInspectorContainer);

package/src/error-overlay/LogBox.ts

@@ -0,0 +1,51 @@
+import { IgnorePattern, LogData } from './Data/LogBoxData';
+import { ExtendedExceptionData } from './Data/parseLogBoxLog';
+
+export { LogData, ExtendedExceptionData, IgnorePattern };
+
+interface ILogBox {
+  install(): void;
+  uninstall(): void;
+  isInstalled(): boolean;
+  ignoreLogs(patterns: readonly IgnorePattern[]): void;
+  ignoreAllLogs(ignore?: boolean): void;
+  clearAllLogs(): void;
+  addLog(log: LogData): void;
+  addException(error: ExtendedExceptionData): void;
+}
+
+const LogBox: ILogBox = {
+  install(): void {
+    // Do nothing.
+  },
+
+  uninstall(): void {
+    // Do nothing.
+  },
+
+  isInstalled(): boolean {
+    return false;
+  },
+
+  ignoreLogs(patterns: readonly IgnorePattern[]): void {
+    // Do nothing.
+  },
+
+  ignoreAllLogs(value?: boolean): void {
+    // Do nothing.
+  },
+
+  clearAllLogs(): void {
+    // Do nothing.
+  },
+
+  addLog(log: LogData): void {
+    // Do nothing.
+  },
+
+  addException(ex: ExtendedExceptionData): void {
+    // Do nothing.
+  },
+};
+
+export default LogBox;