Error tracking, route monitoring, and session replay for Next.js App Router and Pages Router.
Next.js Integration
Automatic error tracking for Next.js applications. Captures unhandled errors, promise rejections, and route changes on the client side. On the server, captures App Router request errors and rendering failures.
npm install @codmir/sdkQuick Start
Client-Side (instrumentation-client.ts)
import * as Codmir from '@codmir/sdk/nextjs';
Codmir.init({
dsn: process.env.NEXT_PUBLIC_CODMIR_DSN,
environment: process.env.NODE_ENV,
release: process.env.NEXT_PUBLIC_APP_VERSION,
// Session replay
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0,
});Server-Side (instrumentation.ts)
import * as Codmir from '@codmir/sdk/nextjs';
export function register() {
Codmir.init({
dsn: process.env.CODMIR_DSN,
environment: process.env.NODE_ENV,
});
}
export const onRequestError = Codmir.captureRouterError;Configuration
import { init } from '@codmir/sdk/nextjs';
init({
dsn: process.env.NEXT_PUBLIC_CODMIR_DSN,
// Error capture (both default to true)
captureUnhandledErrors: true,
captureUnhandledRejections: true,
// Navigation tracking (default: true)
trackRouteChanges: true,
// Session replay (default: false)
enableReplay: false,
});Config Reference
| Option | Type | Default | Description |
|---|---|---|---|
captureUnhandledErrors | boolean | true | Capture window.onerror events |
captureUnhandledRejections | boolean | true | Capture unhandled promise rejections |
trackRouteChanges | boolean | true | Record route changes as breadcrumbs |
enableReplay | boolean | false | Enable session replay recording |
Server-Side Error Capture
App Router Errors
Use captureRouterError as the onRequestError export in instrumentation.ts to capture server-side errors with full route context.
// instrumentation.ts
import { captureRouterError } from '@codmir/sdk/nextjs';
export const onRequestError = captureRouterError;Request Errors
For custom error handling in API routes or middleware:
import { captureRequestError } from '@codmir/sdk/nextjs';
export async function GET(request: Request) {
try {
const data = await fetchData();
return Response.json(data);
} catch (error) {
captureRequestError(error, {
routerKind: 'App Router',
routePath: '/api/data',
routeType: 'route',
}, request);
return Response.json({ error: 'Internal error' }, { status: 500 });
}
}Client-Side Features
Route Change Tracking
When trackRouteChanges is enabled, the SDK tracks navigation via pushState, replaceState, and popstate events. Each navigation appears as a breadcrumb in error reports.
Manual Capture
import {
captureException,
captureMessage,
setUser,
setTag,
addBreadcrumb,
} from '@codmir/sdk/nextjs';
// Set user context (persists across events)
setUser({ id: user.id, email: user.email });
// Add breadcrumbs for debugging
addBreadcrumb({
category: 'user.action',
message: 'Clicked checkout button',
});
// Capture with extra context
captureException(error, {
extra: { orderId: '12345' },
tags: { feature: 'checkout' },
});Error Boundary
Wrap page trees with an error boundary to capture React rendering errors:
'use client';
import { captureException } from '@codmir/sdk/nextjs';
export default function GlobalError({
error,
reset,
}: {
error: Error;
reset: () => void;
}) {
captureException(error);
return (
<html>
<body>
<h2>Something went wrong</h2>
<button onClick={reset}>Try again</button>
</body>
</html>
);
}TypeScript Support
import type {
NextjsConfig,
RequestError,
ErrorContext,
OverseerConfig,
UserContext,
Breadcrumb,
SeverityLevel,
} from '@codmir/sdk/nextjs';