AutoGineer
Generated banner for Error Tracking React
Generated logo for Error Tracking React

Error Tracking React

PostHogOfficialCreated by PostHog

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

From the author

PostHog error tracking for React
— the description by PostHog

AutoGineer summary

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

This skill provides a structured approach to implementing PostHog error tracking within React applications. It emphasizes non-intrusive integration, recommending the use of environment variables for configuration and leveraging SDK autocapture features. The guide covers essential practices such as uploading source maps for readable stack traces, using manual capture for specific error boundaries, and configuring automated alerting and issue assignment workflows within the PostHog platform.

What it does

  • Guides the installation and setup of PostHog error tracking in React projects.
  • Provides best practices for using environment variables and SDK initialization.
  • Explains how to upload source maps to resolve minified stack traces.
  • Details how to implement manual error capture at specific application boundaries.
  • Outlines methods for setting up automated alerts for new or spiking issues.
  • Describes how to configure automatic issue assignment rules for team workflows.

When to use it

  • When you need to monitor runtime errors in a React application.
  • When you want to centralize error reporting and triage within PostHog.
  • When you need to alert specific team members about application exceptions.
  • When you need to debug production issues using unminified stack traces.

Advantages

  • Non-destructive integration that complements existing error handling.
  • Supports automated issue assignment based on exception properties.
  • Enables proactive monitoring through spike detection alerts.
  • Facilitates team collaboration by allowing issue assignment to roles or users.

Usage examples

“How do I set up PostHog error tracking in my React app?”
The agent will guide you through initializing the PostHog SDK, enabling exception autocapture, and ensuring your environment variables are correctly configured.
“How can I alert my team when a specific error spikes?”
The agent will explain how to configure spike alerts in the PostHog error tracking settings to notify your team when error rates exceed historical baselines.

Install

  1. Download the skill as a ZIP:

    https://autogineer.com/agent-skills/posthog/error-tracking-react/download

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

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

Documentation by PostHog

PostHog error tracking for React

This skill helps you add PostHog error tracking to React applications.

Reference files

  • references/react.md - React 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 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/react · 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 or PostHog.

Download ZIP

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