Error Tracking React
PostHogOfficialCreated by PostHog
- Skill
- Tool integration
- Data and AI
- MIT
- No issues found
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
Download the skill as a ZIP:
https://mp-staging.autogineer.com/agent-skills/posthog/error-tracking-react/downloadUnzip 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 - docsreferences/fingerprints.md- Fingerprints - docsreferences/alerts.md- Send error tracking alerts - docsreferences/monitoring.md- Monitor and search issues - docsreferences/assigning-issues.md- Assign issues to teammates - docsreferences/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
- ATTRIBUTION.mdAdded by AutoGineer960 B
- LICENSELicence file added by AutoGineer1.0 KiB
- SKILL.md2.2 KiB
- references/alerts.md4.1 KiB
- references/assigning-issues.md5.5 KiB
- references/fingerprints.md3.4 KiB
- references/monitoring.md8.6 KiB
- references/react.md5.4 KiB
- references/upload-source-maps.md2.7 KiB
references/assigning-issues.md
Assign issues to teammates - Docs
Error tracking enables you to assign issues to specific PostHog roles or teammates. This helps your team find relevant issues through filtering. You can also set up team-specific alerting to notify them when assigned issues are created or reopened.
Assign issues
You can manually assign issues as you triage them in the UI. This can be done both in the issue list and issue detail pages.
Image: Error tracking assignment UIImage: Error tracking assignment UI
In your error tracking issue list, click the unassigned selector under each issue to assign it to a role or user.
On the detail page of each issue, click the Assignee selector to assign it to a role or user.
Want to assign issues to a team rather than an individual teammate? You can create a role in your project settings.
Image: Error tracking role assigneesImage: Error tracking role assignees
Automatic issue assignment
You can set up automatic issue assignment through a set of rules. This can be configured in the error tracking settings using auto assignment rules.
Image: Error tracking auto assignment rulesImage: Error tracking auto assignment rules
Assignment conditions are evaluated against the properties of the exception event that created the issue. Because assignment rules are evaluated during ingestion, the stack trace (if present) will be unminified, which enables filtering on exception properties such as function name and source file.
Issues can be automatically assigned to a role or user by configuring a set of filters. These filters can be configured to match any or all of the criteria.
You can configure automatic assignment to filter on any event property in PostHog. When there are multiple values for a property, the filters return true if it matches any of the values. For example, if you have multiple exception_functions values, the filters returns true if it matches any of the functions.
Here are some common properties you can filter on:
| Property | Event property | Description |
|---|---|---|
| Exception type | $exception_types | The type of exception(s) that occurred |
| Exception message | $exception_values | The message(s) detected on the error |
| Exception function | $exception_functions | The function(s) where the exception occurred |
| Exception source | $exception_sources | The source file(s) where the exception occurred |
| Exception was handled | $exception_handled | Whether the exception was handled by the application |
| Device type | $device_type | The type of device that the error occurred on |
| Browser | $browser | The browser that the error occurred in |
| Current URL | $current_url | The URL that the error occurred on |
| Feature flag | $feature_flag | The feature flag that the error occurred on |
You can also set custom properties on the error tracking event to filter on. For example, setting a custom params_received property to provide more context or debug information.
Order of issue assignment rules
Issue assignment filters are evaluated in the order they are configured. They can also be reordered once created. The first filter that matches is used to assign the issue. This means you should configure the most specific filters first, and then the more general filters later.
Disabled assignment rules
Assignment rules can become disabled if an error occurs during ingestion. When a rule is disabled, a banner displays the original error message. To re-enable the rule, edit it to fix the problem and save your changes. If the issue persists, reach out to support.
Alerting based on assignment
A common use case for automatic issue assignment is to alert assignees of new issues. Once the issues are automatically assigned, you can set up alerts to notify the assignee. See the alerts guide for more information.
Create external issues
You can also create issues in external tracking systems like GitHub Issues, Linear, GitLab, or Jira.
First, set up an integration with your tracking system. Then, from an issue's details page, under External references, click Create issue.
Image: Error tracking create issue in external tracking systemImage: Error tracking create issue in external tracking system
The new issue will have a partial stack trace and a link to the issue in PostHog.
If you use another issue tracking system and would like to request it, 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.
Related skills
Claude API
AnthropicOfficial
Comprehensive reference for integrating Anthropic's Claude API, SDKs, and Managed Agents into your applications.
Data and AIClaude CodeClaude appsOpenAI Codex+14 moreApache-2.0Medium riskHas scriptsGitHub stars of the source repository188.6k
Transformers
K-Dense· Community
Integrate Hugging Face Transformers for model loading, inference, and fine-tuning across NLP, vision, and audio tasks.
Data and AIClaude CodeClaude appsOpenAI Codex+14 moreMITLow riskGitHub stars of the source repository56.4k
Open Notebook
K-Dense· Community
Integrate with the self-hosted Open Notebook platform to automate research ingestion, context-aware chat, and AI-driven analysis.
Data and AIClaude CodeClaude appsOpenAI Codex+14 moreMITLow riskHas scriptsGitHub stars of the source repository56.4k
Vision Sft
Seth Hobson· Community
A structured workflow for supervised fine-tuning of vision-language models, focusing on adapter configuration and silent failure prevention.
Data and AIClaude CodeClaude appsOpenAI Codex+14 moreMITGitHub stars of the source repository42.3k
LLM Evaluation
Seth Hobson· Community
A comprehensive framework for evaluating LLM application performance using automated metrics, human feedback, and LLM-as-a-judge techniques.
Data and AIClaude CodeClaude appsOpenAI Codex+14 moreMITGitHub stars of the source repository42.3k
Lora Qlora Recipes
Seth Hobson· Community
Provides configuration recipes and best-practice hyperparameters for LoRA and QLoRA supervised fine-tuning.
Data and AIClaude CodeClaude appsOpenAI Codex+14 moreMITGitHub stars of the source repository42.3k
Download ZIP
The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download error-tracking-react.zip