Catching chunk load errors with sentry in Next.JS

[ostenbom]

We had a problem recently where a chunk was stored badly in our CDN, leading to clients getting Uncaught SyntaxError: Unexpected end of input.

I'm looking for a way to catch these kinds of errors and send them to sentry.

Here's a reproduction repo: https://github.com/ostenbom/reproduce-sentry-next-chunk-error

Essentially the playwright test reproduces a js chunk load error:

await page.route(
      (url: URL) => {
        return url.pathname.includes('/_next/static/chunks/webpack');
      },
      (route) => {
        return route.fulfill({
          status: 200,
          // chopped off chunk
          body: `!function() {
    "use strict";
    var e, t, c, a, f, n, d`,
        });
      },
    );

Here, the error comes into the console but is not sent to Sentry.

• The Sentry SDK doesn't seem to be loaded when some chunks are missing
• Adding a next js script tag doesn't work since they won't load unless the framework does
• Adding a "regular" script tag doesn't work, next escapes the js code

Any thoughts on being able to catch "catastrophic" errors like these?

[AbhiPrasad]

You might have an inbound filter enabled for chunk load errors.

What do you have enabled in sentry.io/settings/projects/YOUR_SENTRY_PROJECT/filters/data-filters/ under Filter out ChunkLoadError(s)?

This is enabled by default for new projects.

Otherwise if the problem is that the SDK is not loaded in time, this seems like something we need to improve. Mind opening a feature request? https://github.com/getsentry/sentry-javascript/issues/new?template=feature.yml