К основному содержанию
скилл CX Codex

adding-error-tracking — скилл для Claude Code: Sentry в проект

Скилл подключает Sentry к веб-приложению: ловит ошибки, считает трейсы и загружает source maps. Пригодится, когда нужен crash reporting без ручной настройки.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add spencerpauly/awesome-cursor-skills --skill adding-error-tracking -a claude-code
Открыть на GitHub

Что делает adding-error-tracking

Скилл включается, когда вы просите добавить отслеживание ошибок, отчёты о падениях или трассировку производительности. Сначала он смотрит package.json, конфиги и структуру каталогов, чтобы понять стек: Next.js, React, Node.js, Python. Дальше ставит нужный 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.

После установки скилл инициализирует Sentry. В Next.js мастер создаёт sentry.client.config.ts, sentry.server.config.ts и sentry.edge.config.ts — их надо проверить, что DSN на месте. В React инициализация идёт в main.tsx с browserTracingIntegration() и tracesSampleRate, в Node.js — в самом верху входного файла, до остальных импортов. Затем добавляются переменные окружения: NEXT_PUBLIC_SENTRY_DSN, SENTRY_AUTH_TOKEN, SENTRY_ORG, SENTRY_PROJECT.

Для продакшена скилл настраивает загрузку source maps через плагин webpack или vite, а в Next.js это делает withSentryConfig в next.config.js. Заранее нужен DSN и токен SENTRY_AUTH_TOKEN — без них события не уйдут в дашборд. Токен не коммитьте, а sentry.properties и .sentryclirc добавьте в .gitignore. В продакшене скилл советует снизить tracesSampleRate до 0.1, чтобы не раздувать расходы.

Какие задачи решает

  • подключить Sentry к Next.js и проверить, что DSN прописан во всех конфигах
  • обернуть приложение в Sentry.ErrorBoundary с запасным UI
  • настроить загрузку source maps для продакшен-сборки
  • добавить переменные окружения для DSN и токена авторизации
  • проверить интеграцию временной кнопкой, которая бросает ошибку

Примеры запросов агенту

  • добавь Sentry в этот проект
  • настрой error tracking и source maps для продакшена
  • подключи crash reporting к React-приложению

Как установить adding-error-tracking

1Через Skills CLI (Vercel)

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

2Вручную: положить файлы

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

Папка скилла целиком; для одного проекта — .claude/skills/adding-error-tracking/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о adding-error-tracking

Как установить adding-error-tracking в Claude?

Выполните npx skills add spencerpauly/awesome-cursor-skills --skill adding-error-tracking -a claude-code. Скилл окажется в ~/.claude/skills/adding-error-tracking/SKILL.md.

Что делает adding-error-tracking?

Определяет стек проекта, ставит SDK Sentry, инициализирует его, добавляет error boundary и настраивает загрузку source maps. В конце предлагает проверить интеграцию тестовой ошибкой.

Что нужно подготовить до запуска скилла?

DSN проекта и токен SENTRY_AUTH_TOKEN, а также значения SENTRY_ORG и SENTRY_PROJECT. Токен нельзя коммитить в репозиторий.

Исходный текст

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

Похожие скиллы

Всё по теме «DevOps и инфраструктура» →
sentry-nextjs-sdk getsentry Скилл сканирует проект на Next.js и помогает настроить мониторинг Sentry для браузера, Node.js и Edge Runtime. Пригодится при подключении трейсинга, сессий или сборе ошибок с роутов и Server Actions. CX Codex +1 3 600установок sentry sanjeed5 Правило задаёт, как инициализировать Sentry в проекте: где ставить SDK, какие переменные окружения использовать, как не сломать чужой код. ★ 3 579звёзд репо sentry-fix-stack-traces getsentry Разбирает нечитаемые кадры в Sentry: находит нужный артефакт, загружает его и проверяет результат на новом событии. CX Codex +1 1 500установок integration-error-observability Samuel Berthe Скилл помогает спроектировать показ ошибок внешним разработчикам: логи запросов с повтором, сквозные correlation ID и правила оповещений партнёров. CX Codex +1 7 700установок observability официальный Vercel Labs Скилл настраивает сбор логов и метрик для приложений на Vercel. Помогает внедрить structured logging и подключить OpenTelemetry при сбоях. CX Codex GP ChatGPT 7установок triaging-error-issues PostHog Собирает короткий список ошибок PostHog, на которые стоит смотреть: новые, всплески и те, что задели много пользователей. Пригодится на утреннем или дежурном разборе. CX Codex +1 329установок

Из того же набора59

adding-docker Скилл добавляет в проект Dockerfile, docker-compose и .dockerignore. Пригодится, когда надо упаковать приложение в контейнер без ручной возни с конфигами. CX Codex +1 398установок fixing-broken-links Скилл находит в файлах проекта битые внешние URL и локальные пути, проверяет их ответы через curl и заменяет на актуальные адреса. CX Codex +1 393установок converting-css-modules-to-tailwind Переводит компонент с CSS Modules на утилитарные классы Tailwind: разбирает styles.xxx, чистит импорты и удаляет файл модуля. CX Codex +1 392установок generating-images Скилл генерирует и правит изображения через OpenAI Image API на модели gpt-image-2. Пригодится, когда нужен OG-баннер, иконка или мокап прямо из чата с агентом. CX Codex +1 388установок tailing-build-output Следит за выводом сборки проекта в реальном времени, выявляет ошибки компиляции и правит код прямо в процессе работы Webpack, Turbo или Docker. CX Codex +1 384установок comparing-branches-visually Разворачивает две ветки в отдельных worktree, поднимает оба дев-сервера на разных портах и делает скриншоты одних и тех же страниц для сравнения. CX Codex +1 383установок incident-response Пошаговый регламент разбора аварий на проде: от классификации сбоя и отката коммита до публичных оповещений и отчёта без поиска виноватых. CX Codex +1 378установок adding-auth Скилл проводит агента по шагам добавления аутентификации в веб-приложение на NextAuth.js: провайдеры OAuth, сессии и защищённые маршруты. CX Codex +1 379установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой