This example is a very small App Router site that shows the Exceptionless integration shape we want for a Next.js app: simple setup, rich metadata, and clear client/server error coverage.
instrumentation-client.jsfor browser startup and navigation logginginstrumentation.jsfor server startup andonRequestErrorapp/error.jsxfor route-level client render failuresapp/global-error.jsxfor root-level client render failuresapp/api/demo/route.jsfor explicit server-side logging from a route handler
- Manual client logs with structured data
- Handled client exceptions submitted from a
try/catch - Unhandled client promise rejections captured by the browser global handler
- A client transition crash that lands in
app/error.jsx - A server route log enriched with request headers, IP, path, query string, and JSON body
- An unhandled route handler error captured by
onRequestError - A server component render error captured by
onRequestError
This sticks to the native Next.js file boundaries instead of inventing another framework layer:
instrumentation-client.jsis where client-side monitoring starts before the app becomes interactive.instrumentation.jsandonRequestErrorare where uncaught server render, route handler, server action, and proxy errors are captured.app/error.jsxandapp/global-error.jsxstay responsible for client render failures inside the App Router.- Route handlers submit logs directly with
Exceptionless.createLog(...), the environment module memoizesExceptionless.startup(...), and the server flushes withExceptionless.processQueue()when needed.
- The server helper flushes the Exceptionless queue explicitly. That matters for short-lived serverless runtimes where a background timer may not get enough time to send queued events.
- The route handler uses
after()so normal server logs flush after the response is sent. - The example imports
@exceptionless/browserand@exceptionless/nodedirectly and uses the default Next.js bundler behavior, which is Turbopack on Next 16. - Because this is a workspace example, you still need the root
npm run buildstep before starting it locally so the SDK packages have freshdist/output. - If we later package this for production ergonomics, the clean split is likely a very thin
@exceptionless/nextjshelper for framework hooks plus an optional@exceptionless/verceladd-on for@vercel/otel, deployment metadata, and queue-flush helpers.
Set the env vars you want the example to use:
NEXT_PUBLIC_EXCEPTIONLESS_API_KEYNEXT_PUBLIC_EXCEPTIONLESS_SERVER_URLEXCEPTIONLESS_API_KEYEXCEPTIONLESS_SERVER_URL
npm installnpm run buildcd example/nextjsnpm run dev