Error Tracking Angular — Agent Skill by PostHog

From the author

PostHog error tracking for Angular

— 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 Angular applications. It covers the installation of the necessary SDK, initialization patterns for different Angular versions, and best practices for capturing exceptions. The guide emphasizes maintaining performance by running tracking outside the Angular zone, using singleton services for initialization, and ensuring proper source map uploads for readable stack traces.

What it does

Guides the installation of the PostHog JavaScript library in Angular projects.
Provides patterns for initializing PostHog as a singleton service to ensure consistent tracking.
Outlines methods for enabling exception autocapture by overriding the default Angular ErrorHandler.
Explains how to manually capture errors at specific boundaries using captureException.
Details the importance of uploading source maps for effective debugging.
Offers instructions for configuring alerts to notify teams of new or spiking issues.

When to use it

When you need to monitor runtime errors in an Angular application.
When you want to centralize error reporting and issue management in PostHog.
When you need to set up automated alerts for application crashes or performance spikes.
When you are migrating or setting up a new Angular project and require robust error observability.

Advantages

Reduces performance overhead by initializing tracking outside the Angular zone.
Promotes clean architecture by using singleton services and environment-based configuration.
Improves debugging efficiency by linking minified errors to original source code via source maps.
Enables proactive issue resolution through customizable alerting channels like Slack or webhooks.

Usage examples

“How do I initialize PostHog in an Angular 17+ application?”: The agent provides a code example for creating a PosthogService as a singleton root service and injecting it into the app.component.ts.
“How can I get notified when a new error occurs in my app?”: The agent explains how to configure alerts in the PostHog error tracking dashboard to send notifications to Slack, Discord, or via webhooks.

Install

Download the skill as a ZIP:
https://mp-staging.autogineer.com/agent-skills/posthog/error-tracking-angular/download

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

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

Documentation by PostHog

PostHog error tracking for Angular

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

Reference files

references/angular.md - Angular 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

Use inject() instead of constructor injection. PostHog service should be injected via inject() in components/services that need it.
Create a dedicated PosthogService as a singleton root service that wraps the PostHog SDK.
Always use standalone components over NgModules.
Configure PostHog credentials in src/environments/environment.ts files, as Angular reads environment variables from these configuration files

Files

ATTRIBUTION.mdAdded by AutoGineer966 B
LICENSELicence file added by AutoGineer1.0 KiB
SKILL.md1.8 KiB
references/alerts.md4.1 KiB
references/angular.md8.2 KiB
references/assigning-issues.md5.5 KiB
references/fingerprints.md3.4 KiB
references/monitoring.md8.6 KiB
references/upload-source-maps.md2.7 KiB

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.

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 more
Apache-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 more
MITLow 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 more
MITLow 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 more
MITGitHub 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 more
MITGitHub 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 more
MITGitHub stars of the source repository42.3k