Send symbolicated stack traces in Next.js dev mode

[lforst]

Problem Statement

The Next.js SDK doesn't automatically upload source maps for Next.js development builds. This is intentional because we would retrigger source map uploads for every file change the user makes, which could lead to slowdowns and release spam in Sentry.

Unfortunately, this means that any errors or captured exceptions in dev mode do not have symbolicated stack traces and look very angry:

This is very bad because it is the first thing users see when they look at their first event in Sentry. They might ask themselves: "What the heck? Why is this page screaming at me and what on earth is a source map."

Solution Brainstorm

Next.js has a dev overlay that shows symbolicated stack traces when an error happens. This overlay pings the Next.js dev server with the thrown error which then symbolicates the error for the overlay.

We can leverage this endpoint on the dev server to symbolicate any errors that would be reported to Sentry. The symbolicated frames can be attached to the error via context lines.