SDK internal errors being raised as events in Sentry.

[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.75.0

Framework Version

No response

Link to Sentry event

No response

SDK Setup

Sentry.init({
   environment: env,
   dsn: "...",
   integrations: [
      new Sentry.BrowserTracing({
         tracePropagationTargets: [...],
      }),
      new Sentry.Replay(),
   ],

   tracesSampleRate: 1.0, 
   replaysSessionSampleRate: 0.001, 
   replaysOnErrorSampleRate: 1.0, 
   allowUrls: [...],
   ignoreErrors: [....],
});

Steps to Reproduce

The SDK is reaching the replay buffer limit (source code) when recording session replays. I was not able to reproduce it on my own account.

This is raising an event sent by the SDK to the project configured in the SDK initialisation:

Error
Event buffer exceeded maximum size of 20000000.

The current workaround for affected users is to filter these events with ignoreErrors:

Sentry.init({
  dsn: "...",
  ignoreErrors: ["Event buffer exceeded maximum size"],
  ...
});

Originally reported here

Expected Result

The SDK should gracefully drop the event exceeding buffer and not raise an exception captured by the unhandled rejection handler.

Actual Result

An event is sent to the Sentry project as in the screenshot (not adding link due to privacy):

[Lms24]

I took a look at the bundled javascript code linked in the Sentry issue (from zendesk).

I'm not sure if this is really it but what we can see in the bundled code is that the minified version of _addEvent is still an async function but the call to replay.eventBuffer.addEvent is no longer awaited. This causes the try/catch block to no longer catch the error:

async function as(t, e, n) {
        if (!t.eventBuffer) return null;
        try {
          n && "buffer" === t.recordingMode && t.eventBuffer.clear(),
            n && (t.eventBuffer.hasCheckout = !0);
          var i = (function (t, e) {
            try {
              if ("function" == typeof e && t.type === xr.Custom) return e(t);
            } catch (t) {
              return (
                ("undefined" != typeof __SENTRY_DEBUG__ && !__SENTRY_DEBUG__) ||
                  _.c.error(
                    "[Replay] An error occured in the `beforeAddRecordingEvent` callback, skipping the event...",
                    t,
                  ),
                null
              );
            }
            return t;
          })(e, t.getOptions().beforeAddRecordingEvent);
          return i ? t.eventBuffer.addEvent(i) : void 0; // <-- no await here
        } catch (e) {
          const n = e && e instanceof $o ? "addEventSizeExceeded" : "addEvent";
          ("undefined" != typeof __SENTRY_DEBUG__ && !__SENTRY_DEBUG__) ||
            _.c.error(e),
            await t.stop({ reason: n });
          const r = U().getClient();
          r && r.recordDroppedEvent("internal_sdk_error", "replay");
        }
      }

any chance that the customer is using some kind of bundling plugin that replaces return await statements with return? Usually that'd be fine but not inside try/catch blocks.

[Lms24]

Fwiw, I also checked our transpilation output and in both CJS and ESM, we're still return awaiting the call.

[jes490]

I think it happens in the EventBufferProxy._switchToCompressionWorker. You can see a call for this._compression.addEvent(event) without try/catch here, so Promise.reject inside EventBufferCompressionWorker.addEvent fires an exception, and because it is a sync function (not async), it doesn't get caught inside catch in the _switchToCompressionWorker.

   async _switchToCompressionWorker() {
    const { events, hasCheckout } = this._fallback;

    const addEventPromises = [];
    for (const event of events) {
      addEventPromises.push(this._compression.addEvent(event));
    }

    this._compression.hasCheckout = hasCheckout;

    // We switch over to the new buffer immediately - any further events will be added
    // after the previously buffered ones
    this._used = this._compression;

    // Wait for original events to be re-added before resolving
    try {
      await Promise.all(addEventPromises);
    } catch (error) {
      (typeof __SENTRY_DEBUG__ === 'undefined' || __SENTRY_DEBUG__) && utils.logger.warn('[Replay] Failed to add events when switching buffers.', error);
    }
  }