Agent skill

error-tracking-integrator

Adds comprehensive error tracking with Sentry, Rollbar, or similar services including error boundaries, context, and breadcrumbs. Use when user requests error monitoring or mentions production debugging.

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/development/error-tracking-integrator-crazydubya-claude-skills

SKILL.md

Error Tracking Integrator

Integrates error tracking services into applications for better production debugging and monitoring.

When to Use

  • User requests error monitoring or tracking
  • Setting up production error logging
  • User mentions "Sentry", "error tracking", "crash reporting", or "production debugging"

Instructions

1. Detect Framework

Identify application framework:

  • React, Vue, Angular (frontend)
  • Express, Fastify (Node.js backend)
  • Django, Flask (Python)
  • Rails (Ruby)

2. Choose Error Tracking Service

Popular services:

  • Sentry: Most popular, comprehensive
  • Rollbar: Good for backend
  • Bugsnag: Multi-platform
  • Airbrake: Ruby-focused
  • LogRocket: Session replay + errors

3. Install and Configure

Sentry (React example):

bash
npm install @sentry/react
javascript
import * as Sentry from "@sentry/react";

Sentry.init({
  dsn: process.env.REACT_APP_SENTRY_DSN,
  environment: process.env.NODE_ENV,
  tracesSampleRate: 1.0,
  integrations: [
    new Sentry.BrowserTracing(),
    new Sentry.Replay()
  ],
});

Sentry (Node.js/Express):

javascript
const Sentry = require("@sentry/node");

Sentry.init({
  dsn: process.env.SENTRY_DSN,
  environment: process.env.NODE_ENV,
  tracesSampleRate: 1.0,
});

// Request handler (first middleware)
app.use(Sentry.Handlers.requestHandler());

// Error handler (after all routes, before error middleware)
app.use(Sentry.Handlers.errorHandler());

4. Add Error Boundaries (React)

javascript
import { ErrorBoundary } from '@sentry/react';

function App() {
  return (
    <ErrorBoundary fallback={<ErrorFallback />}>
      <YourApp />
    </ErrorBoundary>
  );
}

5. Add Context

User context:

javascript
Sentry.setUser({
  id: user.id,
  email: user.email,
  username: user.username
});

Tags:

javascript
Sentry.setTag("page_locale", "en-US");
Sentry.setTag("feature_flag", "new_ui");

Context:

javascript
Sentry.setContext("order", {
  id: order.id,
  total: order.total,
  items: order.items.length
});

6. Breadcrumbs

Track user actions leading to error:

javascript
Sentry.addBreadcrumb({
  category: "auth",
  message: "User logged in",
  level: "info"
});

Sentry.addBreadcrumb({
  category: "ui",
  message: "Button clicked",
  data: { buttonId: "submit-form" }
});

7. Manual Error Capture

javascript
try {
  riskyOperation();
} catch (error) {
  Sentry.captureException(error, {
    tags: { section: "payment" },
    level: "error",
    extra: { orderId: order.id }
  });
}

8. Filter Sensitive Data

Scrub PII:

javascript
Sentry.init({
  beforeSend(event, hint) {
    // Don't send if contains sensitive data
    if (event.request?.data?.password) {
      delete event.request.data.password;
    }
    return event;
  },
  ignoreErrors: [
    // Ignore browser extension errors
    /extensions\//i,
    /^Non-Error promise rejection/,
  ]
});

9. Source Maps (Production)

Enable source maps for readable stack traces:

Webpack:

javascript
// webpack.config.js
module.exports = {
  devtool: 'source-map',
  plugins: [
    new SentryWebpackPlugin({
      org: "your-org",
      project: "your-project",
      authToken: process.env.SENTRY_AUTH_TOKEN,
      include: "./dist",
    }),
  ],
};

10. Alert Configuration

Set up alerts for:

  • New issues
  • Regression (resolved issue occurs again)
  • Spike in error rate
  • Critical errors (payment, auth failures)

11. Performance Monitoring

Add transaction tracking:

javascript
const transaction = Sentry.startTransaction({
  name: "processOrder",
  op: "task"
});

try {
  await processOrder();
} finally {
  transaction.finish();
}

12. Best Practices

  • Environment separation: Different projects for dev/staging/prod
  • Release tracking: Tag errors with release version
  • Sample rates: 100% errors, lower% for performance
  • Team notifications: Slack/email integration
  • Issue assignment: Auto-assign to code owners
  • Error grouping: Custom fingerprinting for better grouping
  • Don't log sensitive data: PII, passwords, tokens

Supporting Files

  • templates/sentry-react.js: React integration template
  • templates/sentry-node.js: Node.js integration template
  • templates/sentry-python.py: Python integration template

Didn't find tool you were looking for?

Be as detailed as possible for better results