AutoGineer
Generated banner for Error Tracking Nextjs
Generated logo for Error Tracking Nextjs

Error Tracking Nextjs

PostHogOfficialCreated by PostHog

  • Skill
  • Tool integration
  • Data and AI
  • MIT
  • No issues found
Download ZIP

From the author

PostHog error tracking for Next.js
— the description by PostHog

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides guidance and best practices for implementing PostHog error tracking within Next.js projects. It covers initialization, source map configuration, and manual error boundary handling to ensure effective monitoring of application exceptions. The skill emphasizes maintaining existing error handling structures while leveraging PostHog's autocapture and alerting capabilities to streamline debugging and issue resolution.

What it does

  • Provides setup instructions for PostHog error tracking in Next.js applications.
  • Explains how to configure source maps for readable stack traces.
  • Outlines best practices for using manual capture at error boundaries.
  • Details how to configure automated alerts for new or spiking issues.
  • Describes methods for assigning issues to team members or roles.
  • Offers guidelines for environment variable management and SDK initialization.

When to use it

  • When you need to implement robust error monitoring in a Next.js application.
  • When you want to automate alerts for application exceptions via Slack, Discord, or webhooks.
  • When you need to assign specific error types to team members for triage.
  • When you are troubleshooting minified stack traces and need to upload source maps.

Advantages

  • Enables centralized monitoring of application exceptions.
  • Supports automated issue assignment based on custom rules.
  • Provides clear guidance on integrating with Next.js-specific patterns.
  • Helps reduce mean time to resolution through better visibility and alerting.

Usage examples

“How do I set up PostHog error tracking in a Next.js 15 project?”
The agent will guide you to initialize PostHog in instrumentation-client.ts and ensure environment variables are configured correctly.
“How can I get notified when a specific error spikes in my app?”
The agent will explain how to configure spike alerts in the PostHog error tracking settings to monitor error rate baselines.

Install

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/posthog/error-tracking-nextjs/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip error-tracking-nextjs.zip -d .agents/skills

Documentation by PostHog

PostHog error tracking for Next.js

This skill helps you add PostHog error tracking to Next.js applications.

Reference files

  • references/nextjs.md - Next.js error tracking installation - docs

  • references/fingerprints.md - Fingerprints - docs

  • references/alerts.md - Send error tracking alerts - docs

  • references/monitoring.md - Monitor and search issues - docs

  • references/assigning-issues.md - Assign issues to teammates - docs

  • references/upload-source-maps.md - Upload source maps - docs

Consult the documentation for API details and framework-specific patterns.

Key principles

  • Environment variables: Always use environment variables for PostHog keys and host URLs. Never hardcode them.

  • Minimal changes: Add error tracking alongside existing error handling. Don't replace or restructure existing error handling code.

  • Autocapture first: Enable exception autocapture in the SDK initialization before adding manual captures.

  • Source maps: Upload source maps so stack traces resolve to original source code, not minified bundles.

  • Manual capture for boundaries: Use captureException() at error boundaries and catch blocks for errors that don't propagate to the global handler.

Framework guidelines

  • For Next.js 15.3+, initialize PostHog in instrumentation-client.ts for the simplest setup

  • For feature flags, use useFeatureFlagEnabled() or useFeatureFlagPayload() hooks - they handle loading states and external sync automatically

  • Add analytics capture in event handlers where user actions occur, NOT in useEffect reacting to state changes

  • Do NOT use useEffect for data transformation - calculate derived values during render instead

  • Do NOT use useEffect to respond to user events - put that logic in the event handler itself

  • Do NOT use useEffect to chain state updates - calculate all related updates together in the event handler

  • Do NOT use useEffect to notify parent components - call the parent callback alongside setState in the event handler

  • To reset component state when a prop changes, pass the prop as the component's key instead of using useEffect

  • useEffect is ONLY for synchronizing with external systems (non-React widgets, browser APIs, network subscriptions)

Files

references/fingerprints.md

Fingerprints - Docs

Every captured exception is assigned a fingerprint. This fingerprint is used to group similar exceptions into issues. This page covers how fingerprints are generated, how they're used, and how you can override them when capturing exceptions.

Fingerprint and issue grouping

Every exception has a fingerprint, whether generated or defined by the user. Each fingerprint links to exactly one issue. Exceptions that share the same fingerprint define an issue.

Multiple different fingerprints can point to the same issue (a many-to-one relationship) if you merge issues.

How are fingerprints generated?

Fingerprints are built iteratively using components of the exception event. The flowchart below shows how fingerprints are generated.

flowchart LR A[Add exception type to fingerprint] --> B{Stack trace<br/>available?} B -->|No| C[Add error message to fingerprint] C --> D[Final fingerprint] B -->|Yes| E{In-app frames<br/>exist?} E -->|No| F[Add first frame to fingerprint] E -->|Yes| G[Add in-app frame to fingerprint<br/>Priority: resolved > unresolved] F --> D G --> D

The flowchart in text

Fingerprints are generated by considering the following in combination:

  1. The exception type

  2. If there's no resolved stack trace, add the error message to the fingerprint

  3. If there are stack traces but no in-app frames (frames from your code, not a dependency), use the first frame of the stack trace

  4. If there are stack traces, in-app frames, and source maps available, use the resolved in-app stack frames

  5. If there are stack traces, in-app frames, and source maps not available, use the first in-app stack frame

In some languages, like Python, one error can trigger another, creating a chain of linked exceptions. PostHog records the entire chain in the event and generates a single fingerprint for it.

Ensuring accurate fingerprints

Resolved stack traces are critical for accurate fingerprinting. Without accurate stack traces, PostHog cannot group exceptions consistently. If you have not uploaded source maps, follow the source map guide to do so.

This also means that if the exception type or message changes from one version to the next, the fingerprint will change.

When are generated fingerprints used?

Fingerprints are used to group similar exceptions into issues automatically. Automatic issue grouping is only done when:

You can find details about how issue grouping works in the issues and exceptions guide.

Customizing fingerprints

Fingerprints can be manually set during exception capture. This is a very useful way to group exceptions that are not related to each other. You can find examples of how to do this in the custom issue grouping section.

You can also learn more about grouping issues using rules in the grouping issues guide.

Community questions

Ask a question

Was this page useful?

HelpfulCould be better

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
PostHog
Publisher
PostHog (Official)
Source
PostHog/skills · skills/posthog/error-tracking/skills/nextjs · commit a5d30e7
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced
Also distributed in
PostHog/skills

AutoGineer is not affiliated with or endorsed by PostHog.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download error-tracking-nextjs.zip