Conflict between Error boundary and capture console integration

[rodolfoBee]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/react

SDK Version

7.61.0

Framework Version

No response

Link to Sentry event

No response

SDK Setup

No response

Steps to Reproduce

When Sentry error boundary and capture console are both enable in the SDK and an error happens in the wrapped component, the capture console integration will capture the error before the Error boundary.

As a result the event in Sentry is missing the component stack (added by Sentry error boundary) and all actions performed in beforeCapture (in this case, adding a tag).

Repro as provided my affected user:
sentry-errorboundary-consoleintegration.zip

1. Add DSN to app.js
2. Run npm install
3. Run npm build
4. Run server -s build
5. Open localhost:3000

Expected Result

Capture console does not affect the error boundary configuration and the resulting event in sentry has the information added by the error boundary.

Removing the capture console integration "solves" the issue.

Actual Result

The event is captured by the integration, without additional information. And the event captures by the error boundary is dropped:

Not capturing exception because it's already been captured.

[AbhiPrasad]

To fix this, we'll be adding an API to the CaptureConsole integration that allows you to filter errors to be captured. This means you can filter out the react errors and make sure they only get captured by the error boundary.

[AbhiPrasad]

Looking at facebook/react#15069, react unconditionally logs the error to the console.

https://github.com/facebook/react/blob/493f72b0a7111b601c16b8ad8bc2649d82c184a0/packages/react-reconciler/src/ReactFiberErrorLogger.js#L85

the issue here though is that this error object can be varied, so it might be unfeasible to add a beforeCapture that works for all scenarios here.

I ended up closing #8698 as a result.

To atleast get react error boundary errors to come in, you can define a custom beforeCapture on the error boundary that will delete error.__sentry_captured__ if it has been set.

Everytime we capture an error, we set __sentry_captured__ on it. To make sure the error boundary captures this call even after it's been logged to console

sentry-javascript/packages/utils/src/misc.ts

Lines 190 to 205 in f833ab2

	export function checkOrSetAlreadyCaught(exception: unknown): boolean {
	// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
	if (exception && (exception as any).__sentry_captured__) {
	return true;
	}
	try {
	// set it this way rather than by assignment so that it's not ennumerable and therefore isn't recorded by the
	// `ExtraErrorData` integration
	addNonEnumerableProperty(exception as { [key: string]: unknown }, '__sentry_captured__', true);
	} catch (err) {
	// `exception` is a primitive, so we can't mark it seen
	}
	return false;
	}

An approach that is worth investigating though is to look at showErrorDialog

https://github.com/facebook/react/blob/493f72b0a7111b601c16b8ad8bc2649d82c184a0/packages/react-reconciler/src/ReactFiberErrorLogger.js#L23-L29

[mydea]

I'd say the actual outcome of this is that basically the CaptureConsole integration does not work with level error with react 🤔 maybe we should disallow/disable the error level when in the react SDK (or something like this), or at least warn that this will lead to unexpected results?

[AbhiPrasad]

Yup maybe a note in the docs is good here

[AbhiPrasad]

Opened getsentry/sentry-docs#7592 for docs.

[AbhiPrasad]

Since we've updated the docs, going to close this issue. I don't think we can make a code change to make this better due to the limitations of react as a framework.