Skip to content

Fix: Symbolicate error.cause on debug builds #3920

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jul 5, 2024
Merged

Fix: Symbolicate error.cause on debug builds #3920

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0e9fbad
add cause support on debug
lucas-zimerman Jun 28, 2024
24e59f7
changelog
lucas-zimerman Jun 28, 2024
ee7ea42
requested changes + more tests
lucas-zimerman Jul 4, 2024
9cb8f50
Merge branch 'main' into fix/nested-exception
lucas-zimerman Jul 4, 2024
1be666e
fix lint
lucas-zimerman Jul 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@

### Fixes

- errors with cause are now correctly serialized on debug build ([#3920](https://github.com/getsentry/sentry-react-native/pull/3920))
- `sentry-expo-upload-sourcemaps` no longer requires Sentry url when uploading sourcemaps to `sentry.io` ([#3915](https://github.com/getsentry/sentry-react-native/pull/3915))

### Dependencies
Expand Down
47 changes: 36 additions & 11 deletions src/js/integrations/debugsymbolicator.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { convertIntegrationFnToClass } from '@sentry/core';
import type {
Event,
EventHint,
Exception,
Integration,
IntegrationClass,
IntegrationFnResult,
Expand All @@ -12,6 +13,7 @@ import { addContextToFrame, logger } from '@sentry/utils';
import { getFramesToPop, isErrorLike } from '../utils/error';
import type * as ReactNative from '../vendor/react-native';
import { fetchSourceContext, getDevServer, parseErrorStack, symbolicateStackTrace } from './debugsymbolicatorutils';
import { eventOriginIntegration } from './eventorigin';

const INTEGRATION_NAME = 'DebugSymbolicator';

Expand All @@ -28,6 +30,11 @@ export type ReactNativeError = Error & {
componentStack?: string;
};

type ErrorLike = {
stack: string
};


/** Tries to symbolicate the JS stack trace on the device. */
export const debugSymbolicatorIntegration = (): IntegrationFnResult => {
return {
Expand All @@ -51,13 +58,18 @@ export const DebugSymbolicator = convertIntegrationFnToClass(
) as IntegrationClass<Integration>;

async function processEvent(event: Event, hint: EventHint): Promise<Event> {
if (event.exception && isErrorLike(hint.originalException)) {
if (event.exception?.values && isErrorLike(hint.originalException)) {
// originalException is ErrorLike object
const symbolicatedFrames = await symbolicate(
hint.originalException.stack,
getFramesToPop(hint.originalException as Error),
);
symbolicatedFrames && replaceExceptionFramesInEvent(event, symbolicatedFrames);
const errorGroup = getExceptionGroup(hint.originalException)
for (const [index, error] of errorGroup.entries()) {
const symbolicatedFrames = await symbolicate(
error.stack,
getFramesToPop(error as Error),
);

symbolicatedFrames && replaceExceptionFramesInException(event.exception.values[index], symbolicatedFrames);
}

} else if (hint.syntheticException && isErrorLike(hint.syntheticException)) {
// syntheticException is Error object
const symbolicatedFrames = await symbolicate(
Expand All @@ -66,7 +78,7 @@ async function processEvent(event: Event, hint: EventHint): Promise<Event> {
);

if (event.exception) {
symbolicatedFrames && replaceExceptionFramesInEvent(event, symbolicatedFrames);
symbolicatedFrames && event.exception.values && replaceExceptionFramesInException(event.exception.values[0], symbolicatedFrames);
} else if (event.threads) {
// RN JS doesn't have threads
symbolicatedFrames && replaceThreadFramesInEvent(event, symbolicatedFrames);
Expand Down Expand Up @@ -149,10 +161,10 @@ async function convertReactNativeFramesToSentryFrames(frames: ReactNative.StackF
* @param event Event
* @param frames StackFrame[]
*/
function replaceExceptionFramesInEvent(event: Event, frames: SentryStackFrame[]): void {
if (event.exception && event.exception.values && event.exception.values[0] && event.exception.values[0].stacktrace) {
event.exception.values[0].stacktrace.frames = frames.reverse();
}
function replaceExceptionFramesInException(exception: Exception, frames: SentryStackFrame[]): void {
if (exception.stacktrace) {
exception.stacktrace.frames = frames.reverse();
};
}

/**
Expand Down Expand Up @@ -200,3 +212,16 @@ async function addSourceContext(frame: SentryStackFrame): Promise<void> {
const lines = sourceContext.split('\n');
addContextToFrame(lines, frame);
}

/**
* Return a list containing the original exception and also the cause if found.
*
* @param originalException The original exception.
*/
function getExceptionGroup(originalException: ErrorLike): ErrorLike[] {
const errorGroup: ErrorLike[] = [originalException];
const cause = (originalException as { cause?: unknown }).cause;
Copy link
Contributor

@krystofwoldrich krystofwoldrich Jul 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have to walk the tree of causes. It can have more than one layer.

erorr3
error2.cause = error3
error.cause = error2

isErrorLike(cause) && errorGroup.push(cause);

return errorGroup;
}
171 changes: 171 additions & 0 deletions test/integrations/debugsymbolicator.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,12 @@ describe('Debug Symbolicator Integration', () => {
at baz (native)
`;

const mockRawStack2 = `Error2: This is mocked error stack trace
at foo2 (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:3:3)
at bar2 (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:4:4)
at baz2 (native)
`;

const mockSentryParsedFrames: Array<StackFrame> = [
{
function: '[native] baz',
Expand All @@ -54,6 +60,24 @@ describe('Debug Symbolicator Integration', () => {
},
];

const mockSentryParsedFrames2: Array<StackFrame> = [
{
function: '[native] baz2',
},
{
function: 'bar2',
filename: 'http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:4:4',
lineno: 4,
colno: 4,
},
{
function: 'foo2',
filename: 'http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:3:3',
lineno: 3,
colno: 3,
},
];

beforeEach(() => {
(parseErrorStack as jest.Mock).mockReturnValue(<Array<ReactNative.StackFrame>>[
{
Expand Down Expand Up @@ -334,5 +358,152 @@ describe('Debug Symbolicator Integration', () => {
},
});
});

it('should symbolicate multiple error with cause ', async () => {
(parseErrorStack as jest.Mock).mockReturnValueOnce(<Array<ReactNative.StackFrame>>[
{
file: 'http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false',
lineNumber: 1,
column: 1,
methodName: 'foo',
},
{
file: 'http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false',
lineNumber: 2,
column: 2,
methodName: 'bar',
},
]).mockReturnValueOnce(<Array<ReactNative.StackFrame>>[
{
file: 'http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false',
lineNumber: 3,
column: 3,
methodName: 'foo2',
},
{
file: 'http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false',
lineNumber: 4,
column: 4,
methodName: 'bar2',
},
]);
(symbolicateStackTrace as jest.Mock).mockReturnValueOnce(
Promise.resolve(<ReactNative.SymbolicatedStackTrace>{
stack: [
{
file: '/User/project/foo.js',
lineNumber: 1,
column: 1,
methodName: 'foo',
},
{
file: '/User/project/node_modules/bar/bar.js',
lineNumber: 2,
column: 2,
methodName: 'bar',
},
],
}),
).mockReturnValueOnce(
Promise.resolve(<ReactNative.SymbolicatedStackTrace>{
stack: [
{
file: '/User/project/foo2.js',
lineNumber: 3,
column: 3,
methodName: 'foo2',
},
{
file: '/User/project/node_modules/bar/bar2.js',
lineNumber: 4,
column: 4,
methodName: 'bar2',
},
],
}),
);

const symbolicatedEvent = await processEvent(
{
exception: {
values: [
{
type: 'Error',
value: 'Error: test',
stacktrace: {
frames: mockSentryParsedFrames,
},
},
{
type: 'Error2',
value: 'Error2: test',
stacktrace: {
frames: mockSentryParsedFrames2,
},
},
],
},
},
{
originalException: {
stack: mockRawStack,
cause: {
stack: mockRawStack2,
}
},
},
);

expect(symbolicatedEvent).toStrictEqual(<Event>{
exception: {
values: [
{
type: 'Error',
value: 'Error: test',
stacktrace: {
frames: [
{
function: 'bar',
filename: '/User/project/node_modules/bar/bar.js',
lineno: 2,
colno: 2,
in_app: false,
},
{
function: 'foo',
filename: '/User/project/foo.js',
lineno: 1,
colno: 1,
in_app: true,
},
],
},
},
{
type: 'Error2',
value: 'Error2: test',
stacktrace: {
frames: [
{
function: 'bar2',
filename: '/User/project/node_modules/bar/bar2.js',
lineno: 4,
colno: 4,
in_app: false,
},
{
function: 'foo2',
filename: '/User/project/foo2.js',
lineno: 3,
colno: 3,
in_app: true,
},
],
},
},
],
},
});
});
});
});