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/alerts.md

Send error tracking alerts - Docs

To stay on top of issues, you can set up alerts. These enable you to post to Slack, Discord, Teams, or an HTTP Webhook when an issue is created or reopened.

Issue created or reopened

To alert when an issue is created or reopened, go to error tracking's configuration page and click Alerting. This shows you a list of existing alerts. Clicking New notification brings you to a page to create a new one.

Image: Error tracking alertingImage: Error tracking alerting

Choosing an option brings you to a page to configure the alert. This may require setting up the Slack integration or pasting in a webhook URL. Once done, you can test the alert by clicking Test function and then finalize by clicking Create & enable.

This will then send alerts to your chosen destination when an issue is created or reopened like this:

Issue properties and assignments

You can filter an alert based on the properties of an issue. This is useful for notifying a specific team when they have been auto assigned an issue using auto assignment rules.

Image: Error tracking alert assignee filteringImage: Error tracking alert assignee filtering

Spike alerts

PostHog can also alert you when an existing issue suddenly spikes in volume - for example, after a bad deploy. This works differently from issue-created alerts. Instead of triggering when a new issue is first seen, spike alerts fire when an issue's error rate significantly exceeds its historical baseline.

See the spike detection guide to learn how it works and how to configure it.

Other alerting options

Since error tracking works by capturing $exception events, PostHog features that trigger by events can play a role in alerts too.

Real time destinations

The first way is using real time destinations. This enables you to send events (like $exception) to other tools as soon as they are ingested.

To create a real time destination, go to the data pipelines tab in PostHog, click + New, and then select Destination. Choose your destination and press + Create.

On the destination creation screen, make sure to add an event matcher for the $exception event, filter for the properties you want, and set the trigger options.

Image: Real time destinationImage: Real time destination

Check out our real time destinations docs for more information.

Trend alerts

You can also visualize your $exception events using trends. Once you create a trend insight, click the Alerts button at the top of the insight and then New alert.

Here you can set alerts for event volume value, increase, or decrease.

Image: Insight alertImage: Insight alert

This sends an email notification to the user you choose. Check out our alerts docs for more information.

Can't find your alert?

If you'd like a destination to be added that we don't yet support, let us know in-app.

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