Next.js Setup

Install the package

npm install @deeptracer/nextjs

pnpm add @deeptracer/nextjs

yarn add @deeptracer/nextjs

bun add @deeptracer/nextjs

Get your API key

Sign up at app.deeptracer.dev
Create a project
Copy your API key (starts with dt_)

Add environment variables

Create or update your .env.local file:

.env.local

DEEPTRACER_KEY=dt_your_api_key_here
DEEPTRACER_ENDPOINT=https://ingest.deeptracer.dev

# Client-side (for browser error tracking)
NEXT_PUBLIC_DEEPTRACER_KEY=dt_your_api_key_here
NEXT_PUBLIC_DEEPTRACER_ENDPOINT=https://ingest.deeptracer.dev

Use the same API key for both server and client. DeepTracer uses a single key per project — no public/secret split needed.

Add server-side monitoring

Create instrumentation.ts in your project root (next to package.json):

instrumentation.ts

import { init } from "@deeptracer/nextjs"

export const { register, onRequestError, logger } = init()

That's it. This single file:

Captures all server errors automatically
Traces every request through your app
Gives you a logger you can import anywhere for custom logging

Add client-side monitoring

Update your root layout to wrap your app with DeepTracerProvider:

app/layout.tsx

import { DeepTracerProvider } from "@deeptracer/nextjs/client"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <DeepTracerProvider>
          {children}
        </DeepTracerProvider>
      </body>
    </html>
  )
}

This captures browser errors (crashes, unhandled promise rejections) and sends them to your dashboard.

Add error pages (optional but recommended)

These give your users a nice error page while automatically reporting the error to DeepTracer.

app/error.tsx

"use client"
export { DeepTracerErrorPage as default } from "@deeptracer/react"

app/global-error.tsx

"use client"
export { DeepTracerErrorPage as default } from "@deeptracer/react"

Deploy and verify

Deploy your app (or run npm run dev locally). Then check your DeepTracer dashboard — you should see data appearing within seconds.

Tip: Throw a test error to verify everything works:

// In any server component or API route:
throw new Error("Testing DeepTracer!")

You'll see it appear in your dashboard's Errors tab within seconds.

Optional: Source maps

Source maps let DeepTracer show you the original source code in stack traces instead of minified code.

next.config.ts

import { withDeepTracer } from "@deeptracer/nextjs/config"

export default withDeepTracer({
  // your existing Next.js config
})

Source maps are uploaded automatically during next build when running on Vercel or CI.

What's next?

Log custom events — Add logger.info() and logger.error() calls to your code
Track AI costs — Monitor your OpenAI/Anthropic spend
Set up alerts — Get Slack notifications when something breaks
AI investigations — Let DeepTracer explain your errors

On this page