Sentry captureException return wrong/not matched event_id with what logged on server

[KhaledLela]

• 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

Package + Version

• @sentry/browser": "^4.6.4"
• @sentry/core": "4.6.4"
• @sentry/types": "4.5.3"
• @sentry/utils": "4.6.4"

Version:

4.6.4

Description

• We was using Raven.js client and it was working, But when we decided to upgrade to new Sentry official SDK for angular2 @sentry/browser, We noticed strange behavior after Sentry log error by captureException return event_id & Sentry.lastEventId() neither matched nor exists with event_id that logged on Sentry 9.0.0, This happened when pass error to captureException, But i works with captureException and when pass new Error(msg), What i expect is when captureMessage error with stackTrace make Sentry client behave wrong when generate event_id.

- After Sentry captureException 
Sentry.init({
    dsn: 'our_dsn',
    whitelistUrls: [some_pattern],
});

handleError(error) {
    const event_id = Sentry.captureException(error);  // wrong/not matched event_id
    console.log(event_id); // 2a4f76154e1446f8baa4cf5e38ed2d7f
    console.log(Sentry.lastEventId()); // 2a4f76154e1446f8baa4cf5e38ed2d7f
 // But expected & what is logged in server is `96474888a8154c409c0dcbea29d792ad`

 // Raven.captureException(error);   // Np correct & matched event_id
 // Sentry.captureException(new Error(error.stack));   // Np correct & matched event_id, but missing frames, extra info on server..
 // Sentry.captureMessage(error.message);   // Np correct & matched event_id
}

[HazAT]

Sorry for the late reply but I am not able to reproduce this.
Here is an example: https://codesandbox.io/s/jpm71lq17w
If I copy the eventId I can find it in the account.

[kamilogorek]

Closing due to the issue getting out-dated. Feel free to ping me to reopen it if it's still relevant.

[liyechen]

@kamilogorek I still get the same problem .
When I use const eventId = Sentry.captureMessage(sentryMessage) to get the return eventId of captureMessage, I find that this eventId is different from the sentry server.

And I check the compliled js file, I find that

BaseClient.prototype.captureEvent = function (event, hint, scope) {
        var _this = this;
        var eventId = hint && hint.event_id;
        this._processing = true;
        this._processEvent(event, hint, scope)
            .then(function (finalEvent) {
            // We need to check for finalEvent in case beforeSend returned null
            eventId = finalEvent && finalEvent.event_id;
            _this._processing = false;
        })
            .catch(function (reason) {
            utils_1.logger.error(reason);
            _this._processing = false;
        });
        return eventId;
    };

_processEvent maybe a promise, but this function return eventId directly.
AND check this out:

Hub.prototype.captureEvent = function (event, hint) {
        var eventId = (this._lastEventId = utils_1.uuid4());
        this._invokeClient('capnureEvent', event, tslib_1.__assign({}, hint, { event_id: eventId }));
        return eventId;
    };

same .

[kamilogorek]

@liyechen can you provide some repro case showcasing this issue?

[liyechen]

@kamilogorek
Sorry I don't know what you mean repro case. I posted the compiled js up there so I think the problem is kind of clear.
I mean I got the same issue that the eventId returned from captureMessage is different from the server's eventId.
And I think it's because that there are some issues in the BaseClient and Hub, check their function called captureEvent and you can find the issue.
In the BaseClient.captureEvent, eventId sometimes will be changed in the function _processEvent, it looks like a promise function, but eventId is returned directly after it, so eventId is returned before the _processEvent changed it. I think this is why this issue happens.

[XanderEmu]

Hi.
I just wanted to confirm the issue. While everything works properly for regular exceptions, unhandled rejections are being post-processed: the finalEvent variable is being created based on the original event. The original event's id is being assigned to _lastEventId and returned, but the finalEvent is actually being sent to Sentry.

In my case I use the default configuration but I'm also catching global error and unhandledRejection events to display the error to the user, with ID that is supposed to be used when contacting the tech support. Like this:

        window.addEventListener('error', event => {
            console.error(event.error);
            const errorId = Sentry.lastEventId(); // This works fine :)
            this.props.dispatch(openErrorModal({errorId, isCritical: true}));
        });

        window.addEventListener('unhandledrejection', event => {
            console.error(event);
            const errorId = Sentry.lastEventId(); // THIS RETURNS THE INCORRECT ID :(
            this.props.dispatch(openErrorModal({errorId, isCritical: true}));
        }, true);

[L6Echo]

I have the same issue with Sentry.captureEvent()

While Sentry.captureMessage( ... ) returns the correct event Id, Sentry.captureEvent( ... ) returns a different event Id.

[kamilogorek]

Fixed in https://github.com/getsentry/sentry-javascript/releases/tag/5.11.2

[aliaz0]

I have the same issue in @sentry/react version 7.3.0, as @L6Echo commented.

[smeubank]

hi @aliaz0 do you have some more specific information examples when you run into this issue? So we might try to reproduce and see if the root cause

[aliaz0]

Hi @smeubank
I create a simple app using create-react-app and install @sentry/react 7.5.0, then wrap my App component with an ErrorHandler.
In my ErrorHandler component, I capture the error and log Sentry.lastEventId. But the logged id is different from the id that returned from API.

Sentry.init({  dsn: 'https://a69b.....'})

ReactDOM.render(
  <Sentry.ErrorBoundary fallback={<div>An error has occurred</div>}>
    <React.StrictMode>
      <ErrorHandler>
        <App />
      </ErrorHandler>
    </React.StrictMode>
  </Sentry.ErrorBoundary>,
  document.getElementById('root')
);

And the ErrorHandler component:

  class ErrorHandler extends React.Component {
    constructor (props) {
      super(props)
      this.state = {
        hasError: false,
        error: null,
        errorInfo: null,
      }
    }
  
    componentDidCatch (error, errorInfo) {
      Sentry.captureException(error)
      this.setState({
        hasError: true,
        error,
        errorInfo,
      })
    }
  
    render () {
      if (!this.state.hasError) {
        return this.props.children
      }
  
      console.log('event id: ' + Sentry.lastEventId())
  
      return (
        <div> {'Event ID: ' + Sentry.lastEventId()} </div>
      )
    }
  }

The logged event id:

The returned id from API:

Event id in sentry:

[lforst]

@aliaz0 please see #4534

This has to do with react running in dev mode and rethrowing errors caught in error boundaries. If you run your app in production mode, you should only get one event.

[Eigilak]

I'm currently experiencing this error in production, and not in development.
As @cameronmcefee I got the wrong event id in the ErrorBoundary however, the response from sentry https://......sentry.io/api/:id/envelope?sentry_key=:key returns the correct event key.

[lforst]

@Eigilak interesting. Thanks for reporting! If you could provide a reproduction example we can try and fix this.

[Eigilak]

Config:

 Sentry.init({
  release: `${branchName}@${currentVersion}`,
  dsn: :dsn_key,
  integrations: [
    new BrowserTracing(),
    new CaptureConsoleIntegration({
      levels: ["error"],
    }),
  ],
  tracesSampleRate: process.env.NODE_ENV !== "production" ? 1.0 : 0.2,
  enabled: process.env.NODE_ENV === "production",
  debug: false,
  beforeBreadcrumb(breadCrumb, hint) {
    if (hint?.level === "warn") {
      return null;
    }
    return breadCrumb;
  },
  ignoreErrors: ["ResizeObserver loop limit exceeded"],
}); 

(is placed as the parent component of the "create-react-app"
Our provider:

    <Sentry.ErrorBoundary fallback={CrashPage}>{props.children}</Sentry.ErrorBoundary>

A snippet of our fallback component

 <Stack mb={3} mt={-2}>
            <m.div variants={varBounce().in}>
              <Typography sx={{ color: "text.secondary" }}>
                {t("sentry.report")}:{" "}
                <strong style={{ textDecoration: "underline" }}>{eventId}</strong>
              </Typography>
            </m.div>
          </Stack>

Is there anything else you need? :)

[lforst]

@Eigilak sadly this is not enough to reproduce the issue. :/ We've attempted to reproduce this ourselves before and failed. Can you provide a minimal example we could clone?

Also, just because we haven't tried it with react 18 yet. Do you happen to use it?

[thnk2wn]

Noticing the same issue with Sentry.captureException() with versions:

    "@sentry/react": "^7.32.1",
    "@sentry/tracing": "^7.32.1",

[lforst]

@thnk2wn can you provide a reproduction example? Thanks!

[edwinKsyos]

We have the same issue with "@sentry/browser": "7.64.0"

If we use Raven.captureException(), we get the correct eventId, but if we use Sentry.captureException() we do not.

[lforst]

@edwinKsyos do you have a reproduction example? Thanks!