Client-side instrumentation

[amannn]

Goals

Allow to register client-only code in instrumentation.ts.

Background

instrumentation.ts is currently available for code that executes in Node.js and Edge. However, as far as I know, there is currently no equivalent that is called for the client side.

Error-tracking libraries like Sentry currently enable client-side instrumentation, by wrapping each client-side entry point and injecting a custom script into the build.

While this works, I'd argue it's somewhat brittle and also requires quite some custom logic to work. Instead, I'd find it very helpful if Next.js would expose a built-in way that covers this.

My particular use case is adapting the error handling capabilities of next-intl to register a global error handler that is automatically called in all environments if registered in instrumentation.ts.

/cc @lforst in case you're interested in this too

Related: #57563

Proposal

export async function register() {
  // ✨ New
  if (process.env.NEXT_RUNTIME === 'client') {
    await import('./instrumentation-client')
  }

  if (process.env.NEXT_RUNTIME === 'nodejs') {
    await import('./instrumentation-node')
  }
 
  if (process.env.NEXT_RUNTIME === 'edge') {
    await import('./instrumentation-edge')
  }
}

[lforst]

Random additional input here: It would be crucial to have something similar to the onRequestError hook for client-side Pages Router errors. Currently, Next.js simply swallows all the rendering errors. With the Sentry SDK, we apply build-time instrumentation to wrap all Pages in the pages router during the build to report errors that happen during the render cycle. This is quite fragile and also not doable with Turbopack.

[mderazon]

Also interested in sending otel traces from client side. Would be nice in Next.js did that as adding tracing to the frontend code is currently complicated:

• https://opentelemetry.io/blog/2022/frontend-overhaul/#opentelemetry-instrumentation
• https://github.com/open-telemetry/opentelemetry-demo/tree/395f38572d4b1352883712cc080d6894f5f9faf8/src/frontend/utils/telemetry

Having end-to-end traces could nice