Instrument Next.js App Directory error.js files

[lforst]

Problem Statement

We are currently not instrumenting Next.js 13 error boundaries in any way.

Solution Brainstorm

First, we need to check if Next.js error boundaries prevent errors from bubbling up to the global error handler, if so, we should provide a (n automatic) wrapper that captures caught errors.

If it doesn't prevent the errors from bubbling up we most likely do not care because our global handlers will capture them.

[rapidfixer]

Any updates on this? I suppose errors and not being bubbled to the document, cause the whole idea is to contain them within the boundaries. However, is there any waay to manually report error from client-side, using sentry/nextjs SDK?
Method .captureException works only in server-side code.

[lforst]

@rapidfixer Sentry.captureException() also works on the client side.

[studentIvan]

For us Sentry.captureException does nothing from the server side...

Client-side works perfect

Tried both with custom server.ts and not.

Tried import "../sentry.server.config"; into the server.ts and into the app/layout.tsx and see the logs

Sentry Logger [log]: Initializing SDK...
Sentry Logger [log]: Integration installed: InboundFilters
Sentry Logger [log]: Integration installed: FunctionToString
Sentry Logger [log]: Integration installed: Console
Sentry Logger [log]: Integration installed: Http
Sentry Logger [log]: Integration installed: Undici
Sentry Logger [log]: Integration installed: OnUncaughtException
Sentry Logger [log]: Integration installed: OnUnhandledRejection
Sentry Logger [log]: Integration installed: ContextLines
Sentry Logger [log]: Integration installed: LocalVariables
Sentry Logger [log]: Integration installed: Context
Sentry Logger [log]: Integration installed: Modules
Sentry Logger [log]: Integration installed: RequestData
Sentry Logger [log]: Integration installed: LinkedErrors
Sentry Logger [log]: Integration installed: RewriteFrames
Sentry Logger [log]: SDK successfully initialized

Still nothing in Sentry though

[lforst]

@studentIvan can you please open a new issue with proper reproduction steps and your setup? Thanks!

Please also include what you mean by custom server.ts. Thanks!

[lforst]

Update: I have tried experimenting with auto-wrapping error components and got it working (#9726) however I soon realized this doesn't make sense UX-wise. If Next.js users set up error.js files, they will catch errors - it wouldn't make sense if these errors are then reported to Sentry. I believe users are aware that they will need to manually report these errors to Sentry, especially since Next.js specifically mentions error reporting tools in its docs for these components.

Additionally we follow the same pattern of not auto instrumenting these sort of error boundaries in other SDKs (Sveltekit, Remix, even React error boundaries are not automatically instrumented).

We added docs for what users can do to report errors caught by error.js files: getsentry/sentry-docs#8634