Next.js Setup | Errova Docs

Use @errova/sdk-next for Next.js apps. It wraps the core SDK with Next-aware entry points so you can keep server-only imports out of client bundles while still capturing client render failures when needed.

Bash

npm install @errova/sdk-next

1. Initialize the Server Runtime

In instrumentation.ts, prefer @errova/sdk-next/node for server-only setup (recommended).

TypeScript

import { init } from "@errova/sdk-next/node"

export function register() {
  init({
    dsn: process.env.ERROVA_DSN ?? process.env.NEXT_PUBLIC_ERROVA_DSN ?? "",
    dsnSecret: process.env.ERROVA_DSN_SECRET,
    environment: process.env.NODE_ENV,
    release: process.env.NEXT_PUBLIC_APP_VERSION,
  })
}

2. Initialize the Browser Runtime When Needed

instrumentation.ts is server-side only. If you use a client ErrorBoundary or manual capture inside client components, initialize once from your root layout.

TSX

"use client"

import { useEffect } from "react"

import { init } from "@errova/sdk-next"

let initialized = false

export function ErrovaClientInit() {
  useEffect(() => {
    if (initialized) {
      return
    }

    const dsn = process.env.NEXT_PUBLIC_ERROVA_DSN ?? ""
    if (!dsn) {
      return
    }

    initialized = true
    init({
      dsn,
      environment: process.env.NODE_ENV,
      release: process.env.NEXT_PUBLIC_APP_VERSION,
    })
  }, [])

  return null
}

3. Add Router-Specific Error Capture

App Router route handlers can use the server wrapper directly.

TypeScript

import { withAppRouterErrorBoundary } from "@errova/sdk-next/node"

export const GET = withAppRouterErrorBoundary(async (request) => {
  throw new Error(`Unexpected failure for ${request.url}`)
})

Pages Router API routes and getServerSideProps have dedicated helpers.

TypeScript

import {
  captureServerSidePropsError,
  withPagesRouterErrorBoundary,
} from "@errova/sdk-next/node"

async function handler(req, res) {
  throw new Error("Pages API route failure")
}

export default withPagesRouterErrorBoundary(handler)

export async function getServerSideProps(context) {
  try {
    return { props: {} }
  } catch (error) {
    captureServerSidePropsError(error, {
      route: "/projects/[projectSlug]",
      params: context.params,
      query: context.query,
      resolvedUrl: context.resolvedUrl,
      preview: context.preview,
    })

    return { notFound: true }
  }
}

Production Checklist

Use @errova/sdk-next/node in server-only files such as instrumentation.ts, route handlers, and API routes.
Keep ERROVA_DSN_SECRET server-only when using signed ingest.
Use NEXT_PUBLIC_ERROVA_DSN only for browser capture paths.
Set a stable client and server release value so issues can be compared across deploys. See Releases, Environments, and Grouping.
If events still do not appear, follow No Events Arriving.