ErrorBoundary causing missing debug_meta from being sent alongside errors

[ash-plunkett-alliance]

Environment

Production dependencies:

"@sentry/browser": "^8.34.0",
"@sentry/react": "^8.34.0",
"@sentry/tracing": "^7.114.0",

Dev dependencies:

"@sentry/cli": "^2.37.0",
"@sentry/webpack-plugin": "^2.22.5",

Using Sentry as SaaS (sentry.io).

Steps to Reproduce

Use Sentry's ErrorBoundary, eg:

// ErrorBoundary.js
export default function ErrorBoundary({ children }) {
    // Simple usage, no dialog/modal or fallback
    return (
        <Sentry.ErrorBoundary>
            {children}
        </Sentry.ErrorBoundary>
    );
}

ErrorBoundary.propTypes = {
    children: PropTypes.node.isRequired,
};

// MyEntryPointComponent.js
export default function MyEntryPointComponent() {
    return (
        <ErrorBoundary>
            <OtherComponent ... />
        </ErrorBoundary>
    );
}

Expected Result

Sourcemap magic is worked and the stack trace shown for the error in Sentry is unminified.

Actual Result

Sourcemap magic isn't workable as there is no debug_meta posted alongside the error.

Looking at the network requests being sent from the browser to Sentry when an error happens (inside of <OtherComponent />), it's successfully caught by Sentry, but there is no debug_meta information at all. This means that Sentry can't link everything together as expected.

Some notes:

• Yes, I am certain that the deployed files do have Sentry's debug information injected.
• Yes, I am certain that the sourcemaps themselves do upload to Sentry correctly.
• Yes, the IDs in the deployed code does line up with the expected IDs in Sentry.
• No, I am not using RewritePlugins integration.
• No, I do not have anything additional catching the error/doing anything before it's received by Sentry (including no beforeSend).

Every other method of error catching & reporting works as expected as far as I can tell, eg to lay them all out in one example that should be easy enough to be reproducible:

function MyComponent() {
    // this will throw an error, if not using an ErrorBoundary around this component then it does have `debug_meta` posted
    // as soon as there is an ErrorBoundary wrapped around this though, then when this code throws its usual error, there is no `debug_meta`
    const foo = undefined;
    foo.bar = 'baz';

    // if you comment out the above erroneous code, then we move on to all the working examples, all of which have `debug_meta`
    // (regardless of if there's a wrapping ErrorBoundary or not)

    // async callbacks also work as expected, regardless of there being a wrapping ErrorBoundary or not
    // if there's an error in the callback which consumes the websocket message, that error is logged as expected
    const onMessage = (...) => {
        // just some garbage to throw an error
        const foo = undefined;
        foo.bar = 'baz';
    };
    useWebsocketConnection(..., onMessage);

    // and some easy-to-trigger onclick's testing other scenarios:
    return (
        <>
            <a
                href="#"
                onClick={() => {
                    console.foo('aaa');
                }}
            >
                Unhandled error, undefined property
            </a>

            <a
                href="#"
                onClick={() => {
                    Sentry.captureEvent({
                        message: 'Manually captured Sentry event',
                        level: 'debug',
                        extra: {
                            foo: 'bar',
                            alice: 'cooper',
                        },
                    });
                }}
            >
                Custom Sentry event
            </a>

            <a
                href="#"
                onClick={() => {
                    throw new Error('manual error thrown');
                }}
            >
                Manual uncaught error thrown
            </a>

            <a
                href="#"
                onClick={() => {
                    const foo = undefined;
                    foo.bar = 'baz';
                }}
            >
                Deliberate error
            </a>
        </>
    );
}

Let me know if you need any more information. I'd be happy to email/privately share links to specific events, data being posted from the browser -> sentry.io, etc.

[lforst]

Thanks for writing in!

• What makes you think it is the error boundary that is causing this?
• I would remove the sentry tracing dependency. It is deprecated. Additionally we do not allow having multiple versions of different @sentry/* SDK deps installed.
• Why do you have the plugin and the CLI installed?
• What are you doing to upload sourcemaps?
• Feel free to post or email me a link to the event in question?