Extract shared SymbolicationState type

packages/react-native/Libraries/LogBox/Data/LogBoxData.js

@@ -10,13 +10,8 @@
 
 import type {ExtendedError} from '../../Core/ExtendedError';
 import type {LogLevel} from './LogBoxLog';
-import type {
-  Category,
-  ComponentStack,
-  ComponentStackType,
-  ExtendedExceptionData,
-  Message,
-} from './parseLogBoxLog';
+import type {Stack} from './LogBoxSymbolication';
+import type {Category, ExtendedExceptionData, Message} from './parseLogBoxLog';
 
 import DebuggerSessionObserver from '../../../src/private/devsupport/rndevtools/FuseboxSessionObserver';
 import toExtendedError from '../../../src/private/utilities/toExtendedError';
@@ -31,8 +26,7 @@ export type LogData = Readonly<{
   level: LogLevel,
   message: Message,
   category: Category,
-  componentStack: ComponentStack,
-  componentStackType: ComponentStackType | null,
+  componentStack: Stack,
   stack?: string,
 }>;
 
@@ -238,7 +232,6 @@ export function addLog(log: LogData): void {
           stack,
           category: log.category,
           componentStack: log.componentStack,
-          componentStackType: log.componentStackType || 'legacy',
         }),
       );
     } catch (error: unknown) {

packages/react-native/Libraries/LogBox/Data/LogBoxLog.js

@@ -9,60 +9,27 @@
  */
 
 import type {Stack} from './LogBoxSymbolication';
-import type {
-  Category,
-  CodeFrame,
-  ComponentStack,
-  ComponentStackType,
-  Message,
-} from './parseLogBoxLog';
+import type {Category, CodeFrame, Message} from './parseLogBoxLog';
 
 import * as LogBoxSymbolication from './LogBoxSymbolication';
 
 type SymbolicationStatus = 'NONE' | 'PENDING' | 'COMPLETE' | 'FAILED';
 
-export type LogLevel = 'warn' | 'error' | 'fatal' | 'syntax';
-
-// TODO: once component stacks are fully supported, we can refactor
-// ComponentStack to just be Stack and remove these conversions fns.
-function convertComponentStateToStack(componentStack: ComponentStack): Stack {
-  return componentStack.map(frame => ({
-    column: frame?.location?.column,
-    file: frame.fileName,
-    lineNumber: frame?.location?.row,
-    methodName: frame.content,
-    collapse: false,
-  }));
-}
+type SymbolicationState =
+  | Readonly<{error: null, stack: null, status: 'NONE'}>
+  | Readonly<{error: null, stack: null, status: 'PENDING'}>
+  | Readonly<{error: null, stack: Stack, status: 'COMPLETE'}>
+  | Readonly<{error: Error, stack: null, status: 'FAILED'}>;
 
-function convertStackToComponentStack(stack: Stack): ComponentStack {
-  const componentStack = [];
-  for (let i = 0; i < stack.length; i++) {
-    const frame = stack[i];
-    // NOTE: Skip stack frames missing location.
-    if (frame.lineNumber != null && frame.column != null) {
-      componentStack.push({
-        fileName: frame?.file || '',
-        location: {
-          row: frame.lineNumber,
-          column: frame.column,
-        },
-        content: frame.methodName,
-        collapse: false,
-      });
-    }
-  }
-  return componentStack;
-}
+export type LogLevel = 'warn' | 'error' | 'fatal' | 'syntax';
 
 export type LogBoxLogData = Readonly<{
   level: LogLevel,
   type?: ?string,
   message: Message,
   stack: Stack,
   category: string,
-  componentStackType?: ComponentStackType,
-  componentStack: ComponentStack,
+  componentStack: Stack,
   codeFrame?: ?CodeFrame,
   isComponentError: boolean,
   extraData?: unknown,
@@ -73,35 +40,22 @@ class LogBoxLog {
   message: Message;
   type: ?string;
   category: Category;
-  componentStack: ComponentStack;
-  componentStackType: ComponentStackType;
+  componentStack: Stack;
   stack: Stack;
   count: number;
   level: LogLevel;
   codeFrame: ?CodeFrame;
   componentCodeFrame: ?CodeFrame;
   isComponentError: boolean;
   extraData: unknown | void;
-  symbolicated:
-    | Readonly<{error: null, stack: null, status: 'NONE'}>
-    | Readonly<{error: null, stack: null, status: 'PENDING'}>
-    | Readonly<{error: null, stack: Stack, status: 'COMPLETE'}>
-    | Readonly<{error: Error, stack: null, status: 'FAILED'}> = {
+  symbolicated: SymbolicationState = {
     error: null,
     stack: null,
     status: 'NONE',
   };
-  symbolicatedComponentStack:
-    | Readonly<{error: null, componentStack: null, status: 'NONE'}>
-    | Readonly<{error: null, componentStack: null, status: 'PENDING'}>
-    | Readonly<{
-        error: null,
-        componentStack: ComponentStack,
-        status: 'COMPLETE',
-      }>
-    | Readonly<{error: Error, componentStack: null, status: 'FAILED'}> = {
+  symbolicatedComponentStack: SymbolicationState = {
     error: null,
-    componentStack: null,
+    stack: null,
     status: 'NONE',
   };
   onNotificationPress: ?() => void;
@@ -113,7 +67,6 @@ class LogBoxLog {
     this.stack = data.stack;
     this.category = data.category;
     this.componentStack = data.componentStack;
-    this.componentStackType = data.componentStackType || 'legacy';
     this.codeFrame = data.codeFrame;
     this.isComponentError = data.isComponentError;
     this.extraData = data.extraData;
@@ -131,12 +84,9 @@ class LogBoxLog {
       : this.stack;
   }
 
-  getAvailableComponentStack(): ComponentStack {
-    if (this.componentStackType === 'legacy') {
-      return this.componentStack;
-    }
+  getAvailableComponentStack(): Stack {
     return this.symbolicatedComponentStack.status === 'COMPLETE'
-      ? this.symbolicatedComponentStack.componentStack
+      ? this.symbolicatedComponentStack.stack
       : this.componentStack;
   }
 
@@ -147,9 +97,7 @@ class LogBoxLog {
       retry = true;
     }
     if (this.symbolicatedComponentStack.status !== 'COMPLETE') {
-      LogBoxSymbolication.deleteStack(
-        convertComponentStateToStack(this.componentStack),
-      );
+      LogBoxSymbolication.deleteStack(this.componentStack);
       retry = true;
     }
     if (retry) {
@@ -180,19 +128,16 @@ class LogBoxLog {
     }
     if (
       this.componentStack != null &&
-      this.componentStackType === 'stack' &&
+      this.componentStack.length > 0 &&
       this.symbolicatedComponentStack.status !== 'PENDING' &&
       this.symbolicatedComponentStack.status !== 'COMPLETE'
     ) {
       this.updateComponentStackStatus(null, null, null, callback);
-      const componentStackFrames = convertComponentStateToStack(
-        this.componentStack,
-      );
-      LogBoxSymbolication.symbolicate(componentStackFrames, []).then(
+      LogBoxSymbolication.symbolicate(this.componentStack, []).then(
         data => {
           this.updateComponentStackStatus(
             null,
-            convertStackToComponentStack(data.stack),
+            data.stack,
             data?.codeFrame,
             callback,
           );
@@ -242,30 +187,30 @@ class LogBoxLog {
 
   updateComponentStackStatus(
     error: ?Error,
-    componentStack: ?ComponentStack,
+    stack: ?Stack,
     codeFrame: ?CodeFrame,
     callback?: (status: SymbolicationStatus) => void,
   ): void {
     const lastStatus = this.symbolicatedComponentStack.status;
     if (error != null) {
       this.symbolicatedComponentStack = {
         error,
-        componentStack: null,
+        stack: null,
         status: 'FAILED',
       };
-    } else if (componentStack != null) {
+    } else if (stack != null) {
       if (codeFrame) {
         this.componentCodeFrame = codeFrame;
       }
       this.symbolicatedComponentStack = {
         error: null,
-        componentStack,
+        stack,
         status: 'COMPLETE',
       };
     } else {
       this.symbolicatedComponentStack = {
         error: null,
-        componentStack: null,
+        stack: null,
         status: 'PENDING',
       };
     }

packages/react-native/Libraries/LogBox/Data/__tests__/LogBoxData-test.js

@@ -65,7 +65,6 @@ const addLogs = (logs: Array<string>, options: void | {flush: boolean}) => {
       },
       category: message,
       componentStack: [],
-      componentStackType: null,
     });
     if (options == null || options.flush !== false) {
       jest.runOnlyPendingTimers();