@expo/metro-runtime 3.0.1 → 3.0.2

package/src/error-overlay/Data/LogBoxLog.ts

@@ -0,0 +1,221 @@
+/**
+ * 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 * as LogBoxSymbolication from './LogBoxSymbolication';
+import type { Stack } from './LogBoxSymbolication';
+import type { Category, Message, ComponentStack, CodeFrame } from './parseLogBoxLog';
+
+type SymbolicationStatus = 'NONE' | 'PENDING' | 'COMPLETE' | 'FAILED';
+
+export type LogLevel = 'warn' | 'error' | 'fatal' | 'syntax' | 'static';
+
+export type LogBoxLogData = {
+  level: LogLevel;
+  type?: string;
+  message: Message;
+  stack: Stack;
+  category: string;
+  componentStack: ComponentStack;
+  codeFrame?: CodeFrame;
+  isComponentError: boolean;
+};
+
+export type StackType = 'stack' | 'component';
+
+function componentStackToStack(componentStack: ComponentStack): Stack {
+  return componentStack.map((stack) => ({
+    file: stack.fileName,
+    methodName: stack.content,
+    lineNumber: stack.location?.row ?? 0,
+    column: stack.location?.column ?? 0,
+    arguments: [],
+  }));
+}
+
+type SymbolicationCallback = (status: SymbolicationStatus) => void;
+
+type SymbolicationResult =
+  | { error: null; stack: null; status: 'NONE' }
+  | { error: null; stack: null; status: 'PENDING' }
+  | { error: null; stack: Stack; status: 'COMPLETE' }
+  | { error: Error; stack: null; status: 'FAILED' };
+
+export class LogBoxLog {
+  message: Message;
+  type: string;
+  category: Category;
+  componentStack: ComponentStack;
+  stack: Stack;
+  count: number;
+  level: LogLevel;
+  codeFrame?: CodeFrame;
+  isComponentError: boolean;
+  symbolicated: Record<StackType, SymbolicationResult> = {
+    stack: {
+      error: null,
+      stack: null,
+      status: 'NONE',
+    },
+    component: {
+      error: null,
+      stack: null,
+      status: 'NONE',
+    },
+  };
+
+  private callbacks: Map<StackType, Set<SymbolicationCallback>> = new Map();
+
+  constructor(
+    data: LogBoxLogData & {
+      symbolicated?: Record<StackType, SymbolicationResult>;
+    }
+  ) {
+    this.level = data.level;
+    this.type = data.type ?? 'error';
+    this.message = data.message;
+    this.stack = data.stack;
+    this.category = data.category;
+    this.componentStack = data.componentStack;
+    this.codeFrame = data.codeFrame;
+    this.isComponentError = data.isComponentError;
+    this.count = 1;
+    this.symbolicated = data.symbolicated ?? this.symbolicated;
+  }
+
+  incrementCount(): void {
+    this.count += 1;
+  }
+
+  getAvailableStack(type: StackType): Stack | null {
+    if (this.symbolicated[type].status === 'COMPLETE') {
+      return this.symbolicated[type].stack;
+    }
+    return this.getStack(type);
+  }
+
+  private flushCallbacks(type: StackType): void {
+    const callbacks = this.callbacks.get(type);
+    const status = this.symbolicated[type].status;
+    if (callbacks) {
+      for (const callback of callbacks) {
+        callback(status);
+      }
+      callbacks.clear();
+    }
+  }
+
+  private pushCallback(type: StackType, callback: SymbolicationCallback): void {
+    let callbacks = this.callbacks.get(type);
+    if (!callbacks) {
+      callbacks = new Set();
+      this.callbacks.set(type, callbacks);
+    }
+    callbacks.add(callback);
+  }
+
+  retrySymbolicate(type: StackType, callback?: (status: SymbolicationStatus) => void): void {
+    this._symbolicate(type, true, callback);
+  }
+
+  symbolicate(type: StackType, callback?: (status: SymbolicationStatus) => void): void {
+    this._symbolicate(type, false, callback);
+  }
+
+  private _symbolicate(
+    type: StackType,
+    retry: boolean,
+    callback?: (status: SymbolicationStatus) => void
+  ): void {
+    if (callback) {
+      this.pushCallback(type, callback);
+    }
+    const status = this.symbolicated[type].status;
+
+    if (status === 'COMPLETE') {
+      return this.flushCallbacks(type);
+    }
+
+    if (retry) {
+      LogBoxSymbolication.deleteStack(this.getStack(type));
+      this.handleSymbolicate(type);
+    } else {
+      if (status === 'NONE') {
+        this.handleSymbolicate(type);
+      }
+    }
+  }
+
+  private componentStackCache: Stack | null = null;
+
+  private getStack(type: StackType): Stack {
+    if (type === 'component') {
+      if (this.componentStackCache == null) {
+        this.componentStackCache = componentStackToStack(this.componentStack);
+      }
+      return this.componentStackCache;
+    }
+    return this.stack;
+  }
+
+  private handleSymbolicate(type: StackType): void {
+    if (type === 'component' && !this.componentStack?.length) {
+      return;
+    }
+
+    if (this.symbolicated[type].status !== 'PENDING') {
+      this.updateStatus(type, null, null, null);
+      LogBoxSymbolication.symbolicate(this.getStack(type)).then(
+        (data) => {
+          this.updateStatus(type, null, data?.stack, data?.codeFrame);
+        },
+        (error) => {
+          this.updateStatus(type, error, null, null);
+        }
+      );
+    }
+  }
+
+  private updateStatus(
+    type: StackType,
+    error?: Error | null,
+    stack?: Stack | null,
+    codeFrame?: CodeFrame | null
+  ): void {
+    const lastStatus = this.symbolicated[type].status;
+    if (error != null) {
+      this.symbolicated[type] = {
+        error,
+        stack: null,
+        status: 'FAILED',
+      };
+    } else if (stack != null) {
+      if (codeFrame) {
+        this.codeFrame = codeFrame;
+      }
+
+      this.symbolicated[type] = {
+        error: null,
+        stack,
+        status: 'COMPLETE',
+      };
+    } else {
+      this.symbolicated[type] = {
+        error: null,
+        stack: null,
+        status: 'PENDING',
+      };
+    }
+
+    const status = this.symbolicated[type].status;
+    if (lastStatus !== status) {
+      if (['COMPLETE', 'FAILED'].includes(status)) {
+        this.flushCallbacks(type);
+      }
+    }
+  }
+}

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,
+  };
+}