Subchapter 76.17

Next.js

references/nextjs.mdMarkdown13 KBView on GitHub

AI agents: this is one page from PostHog’s docs. Full index of Markdown docs for LLMs: https://posthog.com/llms.txt (opens in a new tab)

Next.js Error Tracking installation

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

1

Install the package

Required

Install the PostHog JavaScript library using your package manager:

npm
```
npm install posthog-js
```
yarn
```
yarn add posthog-js
```
pnpm
```
pnpm add posthog-js
```
bun
```
bun add posthog-js
```
2

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
```
NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN=<ph_project_token>
NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
```
3

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
```
import posthog from 'posthog-js'

posthog.init(process.env.
```
4

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
```
'use client'

import posthog from 'posthog-js'
```
5

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.captureException(error, additionalProperties)
```
Manual capture is very useful if you already use error boundaries to handle errors in your app:

App router
6

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:

npm
```
npm
```
Verify server-side exceptions

Recommended

You should also see events and exceptions in PostHog coming from your server-side code in the activity feed.

Check for server events in PostHog (opens in a new tab)
7

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:
1. 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.
2. Check the request is running in the nodejs runtime to ensure PostHog works. You can call posthog.debug() to get verbose logging.
3. Get the distinct_id from the cookie to connect the error to a specific user.
This looks like this:

JavaScript
Verify error tracking

Recommended

Confirm events are being sent to PostHog

Before proceeding, let’s make sure exception events are being captured and sent to PostHog. You should see events appear in the activity feed.

Check for exceptions in PostHog (opens in a new tab)
8

Upload source maps

Required

Great, you’re capturing exceptions! If you serve minified bundles, the next step is to upload source maps to generate accurate stack traces.

Let’s continue to the next section.

Upload source maps (opens in a new tab)

'use client'

import { usePathname, useSearchParams } from "next/navigation"
import { useEffect } from "react"

import posthog from 'posthog-js'
import { PostHogProvider as PHProvider } from '@posthog/react'

export function PostHogProvider({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN as string, {
      api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
      defaults: '2026-05-30'
    })
  }, [])

  return (
    <PHProvider client={posthog}>
      {children}
    </PHProvider>
  )
}

import './globals.css'
import { PostHogProvider } from './providers'

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

import { useEffect } from 'react'
import { Router } from 'next/router'
import posthog from 'posthog-js'
import { PostHogProvider } from '@posthog/react'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {

  useEffect(() => {
    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN as string, {
      api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
      defaults: '2026-05-30',
      loaded: (posthog) => {
        if (process.env.NODE_ENV === 'development') posthog.debug()
      }
    })
  }, [])

  return (
    <PostHogProvider client={posthog}>
      <Component {...pageProps} />
    </PostHogProvider>
  )
}

'use client'

import { usePostHog } from '@posthog/react'

export default function CheckoutPage() {
    const posthog = usePostHog()

    function handlePurchase() {
        posthog.capture('purchase_completed', { amount: 99 })
    }

    return <button onClick={handlePurchase}>Complete purchase</button>
}

"use client"
import posthog from "posthog-js"
import { useEffect } from "react"

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    posthog.captureException(error)
  }, [error])
  return (
    ...
  )
}

'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 }
  reset: () => void
}) {
  useEffect(() => {
    posthog.captureException(error)
  }, [error])
  return (
    // global-error must include html and body tags
    <html>
      <body>
        {/* `NextError` is the default Next.js error page component */}
        <NextError statusCode={0} />
      </body>
    </html>
  )
}

import type { AppProps } from 'next/app'
import ErrorBoundary from '../components/ErrorBoundary'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <ErrorBoundary>
      <Component {...pageProps} />
    </ErrorBoundary>
  )
}

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,
        flushInterval: 0,
      }
    )
  }
  return posthogInstance
}

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',
    })
}

// instrumentation.js
export function register() {
  // No-op for initialization
}
export const onRequestError = async (err, request, context) => {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    const { getPostHogServer } = require('./lib/posthog-server')
    const posthog = getPostHogServer()
    let distinctId = null
    if (request.headers.cookie) {
      // Normalize multiple cookie arrays to string
      const cookieString = Array.isArray(request.headers.cookie)
        ? request.headers.cookie.join('; ')
        : request.headers.cookie
      const postHogCookieMatch = cookieString.match(/ph_phc_.*?_posthog=([^;]+)/)
      if (postHogCookieMatch && postHogCookieMatch[1]) {
        try {
          const decodedCookie = decodeURIComponent(postHogCookieMatch[1])
          const postHogData = JSON.parse(decodedCookie)
          distinctId = postHogData.distinct_id
        } catch (e) {
          console.error('Error parsing PostHog cookie:', e)
        }
      }
    }
    await posthog.captureException(err, distinctId || undefined)
  }
}

Next.js

Next.js Error Tracking installation

Next.js

Next.js Error Tracking installation

Install the package

npm

yarn

pnpm

bun

Add environment variables

Initialize PostHog

Next.js 15.3+

Accessing PostHog on the client

Next.js 15.3+

Capture client-side exceptions

App router

Installing PostHog SDK for server-side

npm

Verify server-side exceptions

Capturing server-side exceptions

Verify error tracking

Upload source maps

Still have questions?

Was this page useful?

App router

Pages router

App/Pages router

Pages router

yarn

pnpm

bun