AutoGineer
Generated banner for Error Tracking Web
Generated logo for Error Tracking Web

Error Tracking Web

PostHogOfficialCreated by PostHog

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

From the author

PostHog error tracking for Web (JavaScript)
— the description by PostHog

AutoGineer summary

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

This skill provides guidance on implementing PostHog error tracking within JavaScript web applications. It covers SDK initialization, manual exception capture, and best practices for managing error data, including the use of source maps for readable stack traces and proper user identification to avoid PII leakage. The skill also outlines how to configure alerts and automate issue assignment to streamline debugging workflows.

What it does

  • Initializes the PostHog JavaScript SDK for browser-based error tracking.
  • Enables automatic exception capture for monitoring application crashes and errors.
  • Provides methods for manual error capture at specific application boundaries.
  • Supports source map uploads to de-minify stack traces for easier debugging.
  • Configures automated issue assignment rules based on exception properties.
  • Sets up alert notifications for new, reopened, or spiking error issues.

When to use it

  • When you need to monitor runtime errors in a JavaScript web application.
  • When you want to automate the triage and assignment of software issues to team members.
  • When you need to receive real-time alerts for critical application errors or error spikes.
  • When you need to correlate frontend errors with user sessions and feature flags.

Advantages

  • Centralizes error monitoring and user behavior data in one platform.
  • Reduces manual triage time through automated assignment rules.
  • Improves debugging efficiency by resolving minified stack traces via source maps.
  • Helps maintain data privacy by distinguishing between event properties and user identification.

Usage examples

“How do I initialize PostHog for error tracking in my React app?”
The agent provides the posthog.init() code snippet, ensuring it is called before other methods and configured with environment variables for keys and host URLs.
“How can I alert my team when a specific error spikes?”
The agent guides you to the error tracking configuration page to set up spike alerts based on historical baselines or event volume.

Install

  1. Download the skill as a ZIP:

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

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

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

Documentation by PostHog

PostHog error tracking for Web (JavaScript)

This skill helps you add PostHog error tracking to Web (JavaScript) applications.

Reference files

  • references/web.md - Web 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

  • Remember that source code is available in the node_modules directory

  • Check package.json for type checking or build scripts to validate changes

  • posthog-js is the JavaScript SDK package name

  • posthog.init() MUST be called before any other PostHog methods (capture, identify, etc.)

  • posthog-js is browser-only — do NOT import it in Node.js or server-side contexts (use posthog-node instead)

  • Autocapture is ON by default with posthog-js (tracks clicks, form submissions, pageviews). Do NOT disable autocapture unless the user explicitly requests it.

  • NEVER send PII in posthog.capture() event properties — no emails, full names, phone numbers, physical addresses, IP addresses, or user-generated content

  • PII belongs in posthog.identify() person properties (email, name, role), NOT in capture() event properties

  • Call posthog.identify(userId, { email, name, role }) on login AND on page refresh if the user is already logged in

  • Call posthog.reset() on logout to unlink future events from the current user

  • For SPAs without a framework router, capture pageviews with posthog.capture($pageview) or use the capture_pageview history_change option in init for History API routing

Files

references/web.md

Web error tracking installation - Docs

  1. 1

    Choose an installation method

    Required

    You can either add the JavaScript snippet directly to your HTML or install the JavaScript SDK via your package manager.

    HTML snippet

    Add this snippet to your website within the <head> tag. This can also be used in services like Google Tag Manager:

    HTML

    PostHog AI

    <script>
    !function(t,e){var o,n,p,r;e.__SV||(window.posthog && window.posthog.__loaded)||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init os ds Ie us vs ss ls capture calculateEventProperties register register_once register_for_session unregister unregister_for_session ws getFeatureFlag getFeatureFlagPayload getFeatureFlagResult isFeatureEnabled reloadFeatureFlags updateFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSurveysLoaded onSessionId getSurveys getActiveMatchingSurveys renderSurvey displaySurvey cancelPendingSurvey canRenderSurvey canRenderSurveyAsync identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException startExceptionAutocapture stopExceptionAutocapture loadToolbar get_property getSessionProperty bs ps createPersonProfile setInternalOrTestUser ys es $s opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing get_explicit_consent_status is_capturing clear_opt_in_out_capturing cs debug M gs getPageViewId captureTraceFeedback captureTraceMetric Qr".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
    posthog.init('<ph_project_token>', {
        api_host: 'https://us.i.posthog.com',
        defaults: '2026-01-30',
    })
</script>

    JavaScript SDK

    Install the PostHog JavaScript library using your package manager. Then, import and initialize the PostHog library with your project token and host:

    PostHog AI

    npm
    npm install posthog-js
    yarn
    yarn add posthog-js
    pnpm
    pnpm add posthog-js

    JavaScript

    PostHog AI

    import posthog from 'posthog-js'
posthog.init('<ph_project_token>', {
    api_host: 'https://us.i.posthog.com',
    defaults: '2026-01-30'
})

  2. 2

    Send events

    Recommended

    Once installed, PostHog will automatically start capturing events. You can also manually send events to test your integration:

    Click around and view a couple pages to generate some events. PostHog automatically captures pageviews, clicks, and other interactions for you.

    If you'd like, you can also manually capture custom events:

    JavaScript

    PostHog AI

    posthog.capture('my_custom_event', { property: 'value' })

  3. 3

    Set up exception autocapture

    Recommended

    You can enable exception autocapture for the JavaScript Web SDK in the Error tracking section of your project settings.

    When enabled, this automatically captures $exception events when errors are thrown by wrapping the window.onerror and window.onunhandledrejection listeners.

  4. 4

    Manually capture exceptions

    Optional

    It is also possible to manually capture exceptions using the captureException method:

    JavaScript

    PostHog AI

    posthog.captureException(error, additionalProperties)

    This is helpful if you've built your own error handling logic or want to capture exceptions that are handled by your application code.

  5. Verify error tracking

    Recommended

    Confirm events are being sent to PostHog

    Before proceeding, let's make sure exception events are being captured and sent to PostHog. You should see events appear in the activity feed.

    Image: Activity feed with eventsImage: Activity feed with events

    Check for exceptions in PostHog

  6. 5

    Upload source maps

    Required

    Great, you're capturing exceptions! If you serve minified bundles, the next step is to upload source maps to generate accurate stack traces.

    Let's continue to the next section.

    Upload source maps

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.

Needs: Needs Node.js

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/web · 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-web.zip