Chapter 158 · Omnibus Instrument Error Tracking

Subchapter 158.10

Next.js

references/nextjs.mdMarkdown13 KBView on GitHub

Next.js error tracking installation - Docs

1

Install the package

Next.js · Omnibus Instrument Error Tracking · PostHog/skills · Skills Docs

Add environment variables

Required

Add your PostHog project token and host to your .env.local file and to your hosting provider (e.g. Vercel, Netlify). These values need to start with NEXT_PUBLIC_ to be accessible on the client-side.

.env.local

PostHog AI

NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN=<ph_project_token>
NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com

Initialize PostHog

Required

Choose the integration method based on your Next.js version and router type.

Next.js 15.3+

If you’re using Next.js 15.3+, you can use instrumentation-client.ts for a lightweight, fast integration:

instrumentation-client.ts

PostHog AI

import posthog from 'posthog-js'
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN!, {
    api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
    defaults: '2026-01-30'
})

App router

For the App router, create a providers.tsx file in your app folder. The posthog-js library needs to be initialized on the client-side using the 'use client' directive:

app/providers.tsx

PostHog AI

'use client'
import { usePathname, useSearchParams } from "next/navigation"
import { useEffect } from "react"
import posthog from 'posthog-js'
import { PostHogProvider as PHProvider } from 'posthog-js/react'
export function PostHogProvider({ children }: { children: React

Then import the PostHogProvider component in your app/layout.tsx and wrap your app with it:

app/layout.tsx

PostHog AI

import './globals.css'
import { PostHogProvider } from './providers'
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <PostHogProvider>
          {children}

Pages router

For the Pages router, integrate PostHog at the root of your app in pages/_app.tsx:

pages/_app.tsx

PostHog AI

import { useEffect } from 'react'
import { Router } from 'next/router'
import posthog from 'posthog-js'
import { PostHogProvider } from 'posthog-js/react'
import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps)

Defaults option

The defaults option automatically configures PostHog with recommended settings for new projects. See SDK defaults (opens in a new tab) for details.

Accessing PostHog on the client

Recommended

Next.js 15.3+

Once initialized in instrumentation-client.ts, import posthog from posthog-js anywhere and call the methods you need:

app/checkout/page.tsx

PostHog AI

'use client'
import posthog from 'posthog-js'
export default function CheckoutPage() {
    function handlePurchase() {
        posthog.capture('purchase_completed', { amount: 99 })
    }
    return <button onClick={handlePurchase}>Complete purchase</button>
}

App/Pages router

Use the usePostHog hook to access PostHog in client components:

app/checkout/page.tsx

PostHog AI

'use client'
import { usePostHog } from 'posthog-js/react'
export default function CheckoutPage() {
    const posthog = usePostHog()
    function handlePurchase() {
        posthog.capture('purchase_completed', { amount: 99 })
    }
    return <button onClick={handlePurchase

Capture client-side exceptions

Required

PostHog can automatically capture unhandled exceptions in your Next.js app using the JavaScript Web SDK.

You can enable exception autocapture for the JavaScript Web SDK in the Error tracking section of your project settings (opens in a new tab).

It is also possible to manually capture exceptions using the captureException method:

JavaScript

PostHog AI

posthog.captureException(error, additionalProperties)

Manual capture is very useful if you already use error boundaries to handle errors in your app:

App router

Next.js uses error boundaries (opens in a new tab) to handle uncaught exceptions by rendering a fallback UI instead of the crashing components. To set one up, create a error.tsx file in any of your route directories. This triggers when there is an error rendering your component and should look like this:

error.tsx

PostHog AI

"use client"
import posthog from "posthog-js"
import { useEffect } from "react"
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
})

You can also create a Global Error component (opens in a new tab) in your root layout to capture unhandled exceptions in your root layout.

app/global-error.tsx

PostHog AI

'use client'
import posthog from "posthog-js"
import NextError from "next/error"
import { useEffect } from "react"
export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string

Pages router

For Pages Router, you can use React’s Error Boundaries (opens in a new tab) to catch JavaScript errors anywhere in the component tree. Create a custom error boundary component and report errors to PostHog in the componentDidCatch method:

components/ErrorBoundary.tsx

PostHog AI

componentDidCatch(error, errorInfo) {
  posthog.captureException(error)
}

Then wrap your app or specific components with the error boundary:

pages/_app.tsx

PostHog AI

import type { AppProps } from 'next/app'
import ErrorBoundary from '../components/ErrorBoundary'
export default function App({ Component, pageProps }: AppProps) {
  return (
    <ErrorBoundary>
      <Component {...pageProps} />
    </ErrorBoundary>
  )
}

Installing PostHog SDK for server-side

Required

Next.js enables you to both server-side render pages and add server-side functionality. To integrate PostHog into your Next.js app on the server-side, you can use the Node SDK (opens in a new tab).

First, install the posthog-node library:

PostHog AI

npm

npm install posthog-node --save

yarn

yarn add posthog-node

pnpm

pnpm add posthog-node

bun

bun add posthog-node

For the backend, we can create a lib/posthog-server.js file. In it, initialize PostHog from posthog-node as a singleton with your project token and host from your project settings (opens in a new tab).

This looks like this:

lib/posthog-server.js

PostHog AI

import { PostHog } from 'posthog-node'
let posthogInstance = null
export function getPostHogServer() {
  if (!posthogInstance) {
    posthogInstance = new PostHog(
      process.env.NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN,
      {
        host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
        flushAt: 1,

You can now use the getPostHogServer function to capture exceptions in server-side code.

JavaScript

PostHog AI

const posthog = getPostHogServer()
try {
    throw new Error("This is a test exception for error tracking")
} catch (error) {
    posthog.captureException(error, {
        source: 'test',
        user_id: 'test-user-123',
    })
}

Capturing server-side exceptions

Required

To capture errors that occur in your server-side code, you can set up an instrumentation.ts (opens in a new tab) file at the root of your project. This provides a onRequestError hook that you can use to capture errors.

Importantly, you need to:

Set up a posthog-node client in your server-side code. See our doc on setting up Next.js server-side analytics (opens in a new tab) for more.
Check the request is running in the nodejs runtime to ensure PostHog works. You can call posthog.debug() to get verbose logging.
Get the distinct_id from the cookie to connect the error to a specific user.

This looks like this:

JavaScript

PostHog AI

// instrumentation.js
export function register() {
  // No-op for initialization
}
export const onRequestError = async (err, request, context) => {
  if (process.env.NEXT_RUNTIME

You can find a full example of both this and client-side error tracking in our Next.js error monitoring tutorial (opens in a new tab).

Next.js

Next.js error tracking installation - Docs

Install the package

Next.js

Next.js error tracking installation - Docs

Install the package

npm

yarn

pnpm

Add environment variables

Initialize PostHog

Next.js 15.3+

App router

Pages router

Accessing PostHog on the client

Next.js 15.3+

App/Pages router

Capture client-side exceptions

App router

Pages router

Installing PostHog SDK for server-side

npm

yarn

pnpm

bun

Verify server-side exceptions

Capturing server-side exceptions

Verify error tracking

Upload source maps

Community questions

Was this page useful?