Feat: Fallback to stacktrace parsing (#5946)

Co-authored-by: Claude <noreply@anthropic.com>

Author: lucas-zimerman

packages/core/src/js/integrations/debugsymbolicator.ts

@@ -69,6 +69,10 @@ async function processEvent(event: Event, hint: EventHint): Promise<Event> {
 async function symbolicate(rawStack: string, skipFirstFrames: number = 0): Promise<SentryStackFrame[] | null> {
   try {
     const parsedStack = parseErrorStack(rawStack);
+    if (parsedStack.length === 0) {
+      debug.warn('parseErrorStack returned empty array, skipping symbolication');
+      return null;
+    }
 
     const prettyStack = await symbolicateStackTrace(parsedStack);
     if (!prettyStack) {

packages/core/src/js/integrations/debugsymbolicatorutils.ts

@@ -1,6 +1,7 @@
 import type { StackFrame as SentryStackFrame } from '@sentry/core';
 
-import { debug } from '@sentry/core';
+import { debug, parseStackFrames } from '@sentry/core';
+import { defaultStackParser } from '@sentry/react';
 
 import type * as ReactNative from '../vendor/react-native';
 
@@ -72,13 +73,65 @@ function getSentryMetroSourceContextUrl(): string | undefined {
 }
 
 /**
- * Loads and calls RN Core Devtools parseErrorStack function.
+ * Converts Sentry StackFrames to React Native StackFrames.
+ * This is the reverse of convertReactNativeFramesToSentryFrames in debugsymbolicator.ts
+ */
+function convertSentryFramesToReactNativeFrames(frames: SentryStackFrame[]): Array<ReactNative.StackFrame> {
+  // Reverse the frames because Sentry parser returns them in reverse order compared to RN
+  return frames.reverse().map((frame): ReactNative.StackFrame => {
+    const rnFrame: ReactNative.StackFrame = {
+      methodName: frame.function || '?',
+    };
+
+    if (frame.filename !== undefined) {
+      rnFrame.file = frame.filename;
+    }
+
+    if (frame.lineno !== undefined) {
+      rnFrame.lineNumber = frame.lineno;
+    }
+
+    if (frame.colno !== undefined) {
+      rnFrame.column = frame.colno;
+    }
+
+    return rnFrame;
+  });
+}
+
+/**
+ * Parses an error stack string into React Native StackFrames.
+ * Uses RN Devtools parseErrorStack by default for compatibility.
+ * Falls back to Sentry's built-in stack parser if Devtools is not available.
+ *
+ * @param errorStack - Raw stack trace string from Error.stack
+ * @returns Array of React Native StackFrame objects
  */
 export function parseErrorStack(errorStack: string): Array<ReactNative.StackFrame> {
-  if (!ReactNativeLibraries.Devtools) {
-    throw new Error('React Native Devtools not available.');
+  // Try using RN Devtools first for maximum compatibility with existing tooling
+  if (ReactNativeLibraries.Devtools?.parseErrorStack) {
+    try {
+      return ReactNativeLibraries.Devtools.parseErrorStack(errorStack);
+    } catch (error) {
+      debug.warn('RN Devtools parseErrorStack failed, falling back to Sentry stack parser');
+    }
+  }
+
+  // Fallback: Use Sentry's stack parser (works without RN Devtools dependency)
+  try {
+    // Create a temporary Error object with the stack
+    const error = new Error();
+    error.stack = errorStack;
+
+    // Use Sentry's parser to parse the stack
+    const sentryFrames = parseStackFrames(defaultStackParser, error);
+
+    // Convert Sentry frames back to RN format
+    return convertSentryFramesToReactNativeFrames(sentryFrames);
+  } catch (error) {
+    debug.error('Failed to parse error stack:', error);
+    return [];
   }
-  return ReactNativeLibraries.Devtools.parseErrorStack(errorStack);
 }
 
 /**

packages/core/src/js/utils/rnlibrariesinterface.ts

@@ -12,7 +12,7 @@ export type { EmitterSubscription } from 'react-native/Libraries/vendor/emitter/
 
 export interface ReactNativeLibrariesInterface {
   Devtools?: {
-    parseErrorStack: (errorStack: string) => Array<ReactNative.StackFrame>;
+    parseErrorStack?: (errorStack: string) => Array<ReactNative.StackFrame>;
     symbolicateStackTrace: (
       stack: Array<ReactNative.StackFrame>,
       extraData?: Record<string, unknown>,

packages/core/test/integrations/debugsymbolicator.test.ts

@@ -708,6 +708,61 @@ describe('Debug Symbolicator Integration', () => {
       });
     });
 
+    it('should not wipe original frames when parseErrorStack returns empty array', async () => {
+      (parseErrorStack as jest.Mock).mockReturnValue([]);
+
+      const originalFrames = [
+        {
+          function: 'originalFoo',
+          filename: '/original/path/foo.js',
+          lineno: 10,
+          colno: 5,
+        },
+        {
+          function: 'originalBar',
+          filename: '/original/path/bar.js',
+          lineno: 20,
+          colno: 15,
+        },
+      ];
+
+      const symbolicatedEvent = await processEvent(
+        {
+          exception: {
+            values: [
+              {
+                type: 'Error',
+                value: 'Error: test',
+                stacktrace: {
+                  frames: originalFrames,
+                },
+              },
+            ],
+          },
+        },
+        {
+          originalException: {
+            stack: mockRawStack,
+          },
+        },
+      );
+
+      // Original frames should be preserved when parseErrorStack returns empty array
+      expect(symbolicatedEvent).toStrictEqual(<Event>{
+        exception: {
+          values: [
+            {
+              type: 'Error',
+              value: 'Error: test',
+              stacktrace: {
+                frames: originalFrames,
+              },
+            },
+          ],
+        },
+      });
+    });
+
     it('should symbolicate error with different amount of exception hints ', async () => {
       // Example: Sentry captures an Error with 20 Causes, but limits the captured exceptions to
       // 5 in event.exception. Meanwhile, hint.originalException contains all 20 items.

packages/core/test/integrations/debugsymbolicatorutils.test.ts

@@ -0,0 +1,68 @@
+import { parseErrorStack } from '../../src/js/integrations/debugsymbolicatorutils';
+
+describe('parseErrorStack', () => {
+  it('should parse Chrome-style stack trace', () => {
+    const stack = `Error: Test error
+  at foo (http://localhost:8081/index.bundle:10:15)
+  at bar (http://localhost:8081/index.bundle:20:25)`;
+
+    const frames = parseErrorStack(stack);
+
+    expect(frames).toHaveLength(2);
+    expect(frames[0]).toMatchObject({
+      methodName: 'foo',
+      file: 'http://localhost:8081/index.bundle',
+      lineNumber: 10,
+    });
+    expect(frames[0].column).toBeDefined();
+    expect(frames[1]).toMatchObject({
+      methodName: 'bar',
+      file: 'http://localhost:8081/index.bundle',
+      lineNumber: 20,
+    });
+    expect(frames[1].column).toBeDefined();
+  });
+
+  it('should handle anonymous functions', () => {
+    const stack = `Error: Test error
+  at <anonymous> (http://localhost:8081/index.bundle:10:15)`;
+
+    const frames = parseErrorStack(stack);
+
+    expect(frames.length).toBeGreaterThanOrEqual(1);
+    expect(frames[0].methodName).toBeDefined();
+    expect(frames[0].lineNumber).toBe(10);
+  });
+
+  it('should handle empty stack', () => {
+    const frames = parseErrorStack('');
+
+    expect(frames).toEqual([]);
+  });
+
+  it('should handle malformed stack gracefully', () => {
+    const frames = parseErrorStack('Not a valid stack trace');
+
+    expect(Array.isArray(frames)).toBe(true);
+  });
+
+  it('should preserve Metro bundle URLs with query params', () => {
+    const stack = `Error: Test error
+  at App (http://localhost:8081/index.bundle?platform=ios&dev=true:1:1)`;
+
+    const frames = parseErrorStack(stack);
+
+    expect(frames[0].file).toContain('platform=ios');
+    expect(frames[0].methodName).toBe('App');
+  });
+
+  it('should handle frames without line/column info', () => {
+    const stack = `Error: Test error
+  at native`;
+
+    const frames = parseErrorStack(stack);
+
+    // Should not crash, may return empty or partial frames
+    expect(Array.isArray(frames)).toBe(true);
+  });
+});