Back to skills
SkillHub ClubShip Full StackFull StackFrontend

sentry

Sentry error monitoring and performance tracing patterns for Next.js applications.

Packaged view

This page reorganizes the original catalog entry around fit, installability, and workflow context first. The original raw source lives below.

Stars
290
Hot score
99
Updated
March 20, 2026
Overall rating
C3.3
Composite score
3.3
Best-practice grade
B84.0

Install command

npx @skill-hub/cli install brianlovin-claude-config-sentry

Repository

brianlovin/claude-config

Skill path: skills/sentry

Sentry error monitoring and performance tracing patterns for Next.js applications.

Open repository

Best for

Primary workflow: Ship Full Stack.

Technical facets: Full Stack, Frontend.

Target audience: everyone.

License: Unknown.

Original source

Catalog source: SkillHub Club.

Repository owner: brianlovin.

This is still a mirrored public skill entry. Review the repository before installing into production workflows.

What it helps with

  • Install sentry into Claude Code, Codex CLI, Gemini CLI, or OpenCode workflows
  • Review https://github.com/brianlovin/claude-config before adding sentry to shared team environments
  • Use sentry for development workflows

Works across

Claude CodeCodex CLIGemini CLIOpenCode

Favorites: 0.

Sub-skills: 0.

Aggregator: No.

Original source / Raw SKILL.md

---
name: sentry
description: Sentry error monitoring and performance tracing patterns for Next.js applications.
---

# Sentry Integration

Guidelines for using Sentry for error monitoring and performance tracing.

## Exception Catching

Use `Sentry.captureException(error)` in try/catch blocks:

```javascript
try {
  await riskyOperation();
} catch (error) {
  Sentry.captureException(error);
  throw error;
}
```

## Performance Tracing

Create spans for meaningful actions like button clicks, API calls, and function calls.

### UI Actions

```javascript
function handleClick() {
  Sentry.startSpan(
    { op: "ui.click", name: "Submit Form" },
    (span) => {
      span.setAttribute("formId", formId);
      submitForm();
    }
  );
}
```

### API Calls

```javascript
async function fetchData(id) {
  return Sentry.startSpan(
    { op: "http.client", name: `GET /api/items/${id}` },
    async () => {
      const response = await fetch(`/api/items/${id}`);
      return response.json();
    }
  );
}
```

## Configuration (Next.js)

Sentry initialization files:
- `sentry.client.config.ts` - Client-side
- `sentry.server.config.ts` - Server-side
- `sentry.edge.config.ts` - Edge runtime

Import with `import * as Sentry from "@sentry/nextjs"` - no need to initialize in other files.

### Basic Setup

```javascript
import * as Sentry from "@sentry/nextjs";

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  enableLogs: true,
});
```

### With Console Logging

```javascript
Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  integrations: [
    Sentry.consoleLoggingIntegration({ levels: ["log", "warn", "error"] }),
  ],
});
```

## Structured Logging

Use `logger.fmt` for template literals with variables:

```javascript
const { logger } = Sentry;

logger.trace("Starting connection", { database: "users" });
logger.debug(logger.fmt`Cache miss for: ${userId}`);
logger.info("Updated profile", { profileId: 345 });
logger.warn("Rate limit reached", { endpoint: "/api/data" });
logger.error("Payment failed", { orderId: "order_123" });
logger.fatal("Connection pool exhausted", { activeConnections: 100 });
```
sentry | SkillHub