Skip to main content
skill CX Codex

adding-error-tracking — Claude Code skill: Sentry setup

This skill wires Sentry into a web app: error tracking, performance traces and source maps. Useful when you want crash reporting without hand-rolling the config.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add spencerpauly/awesome-cursor-skills --skill adding-error-tracking -a claude-code
Open on GitHub

What adding-error-tracking does

The skill kicks in when you ask for error tracking, crash reporting or performance tracing. It reads package.json, config files and the directory layout to figure out the stack: Next.js, React, Node.js or Python. Then it installs the matching SDK — npx @sentry/wizard@latest -i nextjs for Next.js, npm install @sentry/react for React on Vite, npm install @sentry/node for Node.js, pip install sentry-sdk for Python.

Initialization comes next. In Next.js the wizard writes sentry.client.config.ts, sentry.server.config.ts and sentry.edge.config.ts, and the skill checks the DSN is present in each. React gets its init in main.tsx with browserTracingIntegration() and a tracesSampleRate; Node.js wants the init at the very top of the entry file, before any other imports. Environment variables follow: NEXT_PUBLIC_SENTRY_DSN, SENTRY_AUTH_TOKEN, SENTRY_ORG, SENTRY_PROJECT.

For production builds the skill configures source map upload through the webpack or vite plugin; in Next.js that is withSentryConfig in next.config.js. You need a DSN and a SENTRY_AUTH_TOKEN before any of this works — without them events never reach the dashboard. Keep the token out of git, and put sentry.properties and .sentryclirc in .gitignore. The skill advises dropping tracesSampleRate to 0.1 in production to keep costs down.

What it helps with

  • hook Sentry into a Next.js app and confirm the DSN lands in every config
  • wrap the app in Sentry.ErrorBoundary with a fallback UI
  • upload source maps for a production build
  • add env vars for the DSN and the auth token
  • verify the setup with a temporary button that throws

Example prompts for the agent

  • add Sentry to this project
  • set up error tracking and source maps for production
  • wire crash reporting into my React app

How to install adding-error-tracking

1Skills CLI (Vercel)

npx skills add spencerpauly/awesome-cursor-skills --skill adding-error-tracking -a claude-code

2Manually: put the files in place

~/.claude/skills/adding-error-tracking/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/adding-error-tracking/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about adding-error-tracking

How do I install adding-error-tracking in Claude?

Run npx skills add spencerpauly/awesome-cursor-skills --skill adding-error-tracking -a claude-code. The skill lands at ~/.claude/skills/adding-error-tracking/SKILL.md.

What does adding-error-tracking do?

It detects your stack, installs the Sentry SDK, initializes it, adds an error boundary and configures source map upload. It finishes by suggesting a test error to confirm events arrive.

What do I need before running the skill?

A project DSN plus a SENTRY_AUTH_TOKEN, along with SENTRY_ORG and SENTRY_PROJECT values. The token must not be committed.

Source text

SKILL.md · CC0-1.0
---
name: adding-error-tracking
description: Add Sentry error tracking, performance monitoring, and source maps to a web application.
---

# Add Error Tracking (Sentry)

Use this skill when the user asks to add error tracking, crash reporting, exception monitoring, or performance tracing.

## Steps

1. **Detect the framework** — check `package.json`, config files, and directory structure to determine the stack (Next.js, React, Node.js, Python/Django/Flask, etc.).

2. **Install the SDK**

   - Next.js: `npx @sentry/wizard@latest -i nextjs`
   - React (Vite): `npm install @sentry/react`
   - Node.js: `npm install @sentry/node`
   - Python: `pip install sentry-sdk`

3. **Initialize Sentry**

   - For Next.js, the wizard creates `sentry.client.config.ts`, `sentry.server.config.ts`, and `sentry.edge.config.ts`. Verify they exist and contain the DSN.

   - For React (Vite), init in `main.tsx`:

     ```tsx
     import * as Sentry from "@sentry/react";

     Sentry.init({
       dsn: import.meta.env.VITE_SENTRY_DSN,
       integrations: [Sentry.browserTracingIntegration()],
       tracesSampleRate: 1.0,
     });
     ```

   - For Node.js, init at the very top of the entry file before any other imports.

4. **Add environment variables**

   ```
   NEXT_PUBLIC_SENTRY_DSN=https://[email protected]/...
   SENTRY_AUTH_TOKEN=sntrys_...
   SENTRY_ORG=your-org
   SENTRY_PROJECT=your-project
   ```

5. **Add error boundary** — wrap the app (or critical subtrees) with `Sentry.ErrorBoundary` and a fallback UI.

6. **Source maps** — for production builds, configure the Sentry webpack/vite plugin to upload source maps. For Next.js, this is handled by `withSentryConfig` in `next.config.js`.

7. **Test the integration** — add a temporary button that throws an error to verify events appear in the Sentry dashboard.

## Notes

- Set `tracesSampleRate` to a lower value (e.g. `0.1`) in production to control costs.
- Add `sentry.properties` and `.sentryclirc` to `.gitignore`.
- Never commit `SENTRY_AUTH_TOKEN`.

© spencerpauly · CC0-1.0 · spencerpauly/awesome-cursor-skills

Similar skills

Everything for DevOps and infrastructure →

From the same set59

adding-docker This skill writes a Dockerfile, docker-compose setup and .dockerignore for your app. Useful when you want a container without hand-writing the configs. CX Codex +1 398installs fixing-broken-links This skill scans project files for dead URLs and broken local paths, verifies responses with curl, and repairs or removes missing links. CX Codex +1 393installs converting-css-modules-to-tailwind Moves one component off CSS Modules and onto Tailwind utility classes, then removes the module file and its import. CX Codex +1 392installs generating-images This skill generates and edits images through the OpenAI Image API on gpt-image-2. Handy when you need an OG banner, an icon or a mockup without leaving the agent chat. CX Codex +1 388installs tailing-build-output Monitors build output in real time, catches errors as they stream, and patches source files before Webpack, Turbo, or Docker finishes. CX Codex +1 384installs comparing-branches-visually Checks out two branches in separate worktrees, runs both dev servers on different ports, screenshots the same pages and reports before/after. CX Codex +1 383installs incident-response Systematic playbook for handling production outages: triage severity levels, execute quick mitigations, coordinate updates, and generate blameless postmortems. CX Codex +1 378installs adding-auth A skill that walks the agent through adding authentication to a web app with NextAuth.js: OAuth providers, sessions and protected routes. CX Codex +1 379installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor