Error Capture

Manual error capture

try {
  await chargeCard(user, amount)
} catch (error) {
  logger.captureError(error, {
    severity: "critical",
    userId: user.id,
    context: { amount, currency: "usd" },
  })
}

Errors are sent immediately -- they bypass the log batcher for faster delivery.

Options

Option	Type	Default	Description
`severity`	`"low" \| "medium" \| "high" \| "critical"`	`"medium"`	How urgent this error is.
`userId`	`string`	From `setUser()`	Override the user ID for this error.
`context`	`Record<string, unknown>`	--	Extra data attached to the error report.
`breadcrumbs`	`Breadcrumb[]`	Auto-collected	Override the breadcrumb trail.

Breadcrumbs

The SDK keeps a rolling trail of breadcrumbs -- recent activity leading up to an error. When captureError() is called, the trail is included automatically.

Breadcrumbs are recorded for every log, span start, and error. You can also add them manually:

logger.addBreadcrumb({ type: "http", message: "POST /api/checkout" })
logger.addBreadcrumb({ type: "db", message: "INSERT INTO orders" })
logger.addBreadcrumb({ type: "user", message: "User clicked 'Pay'" })

Type	When to use
`http`	Outgoing HTTP requests
`db`	Database queries
`function`	Function calls, background jobs
`user`	User interactions (clicks, navigation)
`error`	Caught errors that didn't crash the app
`log`	Added automatically for every log call

The maxBreadcrumbs config (default: 20) controls how many are kept. Oldest entries are dropped first.

Automatic error capture

Next.js: `onRequestError`

The init() function from @deeptracer/nextjs returns an onRequestError handler that catches all server-side errors (Server Components, Route Handlers, Middleware):

// instrumentation.ts
import { init } from "@deeptracer/nextjs"
export const { register, onRequestError } = init()

Next.js: `DeepTracerErrorPage`

Drop-in component for error.tsx and global-error.tsx:

// app/error.tsx
"use client"
export { DeepTracerErrorPage as default } from "@deeptracer/nextjs/client"

// app/global-error.tsx
"use client"
export { DeepTracerErrorPage as default } from "@deeptracer/nextjs/client"

One line per file. Errors are reported automatically and a default "Something went wrong" UI is rendered with a retry button.

React: `DeepTracerErrorBoundary`

Wrap any component tree to catch rendering errors:

import { DeepTracerErrorBoundary } from "@deeptracer/react"

function App() {
  return (
    <DeepTracerErrorBoundary
      fallback={({ error, resetErrorBoundary }) => (
        <div>
          <p>Error: {error.message}</p>
          <button onClick={resetErrorBoundary}>Retry</button>
        </div>
      )}
    >
      <MyComponent />
    </DeepTracerErrorBoundary>
  )
}

Global errors: `captureGlobalErrors`

Automatically enabled in @deeptracer/nextjs. For standalone Node.js or browser apps:

import { captureGlobalErrors } from "@deeptracer/node"
captureGlobalErrors(logger) // uncaughtException + unhandledRejection

import { captureGlobalErrors } from "@deeptracer/browser"
captureGlobalErrors(logger) // window.onerror + unhandledrejection

Custom error pages with `useDeepTracerErrorReporter`

If you want your own error UI but still want automatic reporting:

// app/error.tsx
"use client"
import { useDeepTracerErrorReporter } from "@deeptracer/nextjs/client"

export default function ErrorPage({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useDeepTracerErrorReporter(error)

  return (
    <div>
      <h2>Oops!</h2>
      <p>{error.message}</p>
      <button onClick={reset}>Try again</button>
    </div>
  )
}

On this page