Scope passed on `captureException` is not consistent on sentry dashboard

• Review the documentation: https://docs.sentry.io/
• Search for existing issues: https://github.com/getsentry/sentry-javascript/issues
• Use the latest release: https://github.com/getsentry/sentry-javascript/releases
• Provide a link to the affected event from your Sentry account

Package + Version

• @sentry/browser
• @sentry/node
• raven-js
• raven-node (raven for node)
• other: @sentry/nextjs

Version:

^6.13.3

Description

I am capturing some errors and I try to add the scope like so:

function captureError({ severity = Severity.Error, error, failScope, extras }: CaptureErrorArgs) {
  withScope(function (scope) {
    scope.setTag('fail-scope', failScope);
    scope.setLevel(severity);
    extras && scope.setExtras(extras);
    captureException(error);
  });
}

Problem is that the errors on sentry dashboard have the scope sometimes and sometimes they dont.

I have tried all the different ways to pass the scope in the capture exception but none seems to work. Any help?

[onurtemizkan]

Hi @paschalidi,

Errors caught by <ErrorBoundary /> are captured by Sentry SDK, and by design, an Error instance can only be captured once by Sentry to avoid duplication, as there are multiple levels of error handling inside SDK (details).

So, the Error instance passed to onError handler can’t be recaptured, as it’s already captured beforehand. Currently, there’s no way to skip SDK side capture for ErrorBoundary. captureMessage will work instead, because it’s not subject to duplicate error checks.

However, you can use beforeCapture handle to set tags / extras and such to errors, just before Sentry captures them.

The example below should modify the scope before the original captureException call on the SDK side, without creating a duplicate event.

class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = { counter: 0 };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState(({ counter }) => ({
            counter: counter + 1,
        }));
    }

    render() {
        if (this.state.counter === 1) {
            // Simulate a JS error
            throw new Error("Hello");
        }

        return <button onClick={this.handleClick}>ErrorBoundary Error!</button>;
    }
}

export default Sentry.withErrorBoundary(Main, {
    fallback: function ErrorFallback() {
        return <div>Error</div>;
    },
    beforeCapture: function (scope) {
      return prepareScope(scope, 'foo', 'fatal', {bar: 'baz'});
    }
});

export function prepareScope(scope, failScope, severity, extras) {
    scope.setTag("fail-scope", failScope);
    scope.setLevel(severity);
    if (extras) {
        scope.setExtras(extras);
    }
    return scope;
}

[paschalidi]

Hey @onurtemizkan thanks for explaining 😃