Sentry错误监控与性能追踪指南 - Next.js集成配置与结构化日志记录

sentry by brianlovin/claude-config

78 周安装量

304 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/brianlovin/claude-config --skill sentry

JavaScript 框架监控性能优化

🇨🇳中文介绍

Sentry 集成

使用 Sentry 进行错误监控和性能追踪的指南。

异常捕获

在 try/catch 代码块中使用 Sentry.captureException(error)：

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

性能追踪

为有意义的操作创建跨度，例如按钮点击、API 调用和函数调用。

UI 操作

function handleClick() {
  Sentry.startSpan(
    { op: "ui.click", name: "提交表单" },
    (span) => {
      span.setAttribute("formId", formId);
      submitForm();
    }
  );
}

API 调用

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();
    }
  );
}

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

🇺🇸English

Sentry Integration

Guidelines for using Sentry for error monitoring and performance tracing.

Exception Catching

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

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

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

API Calls

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

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

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

With Console Logging

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:

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 });

Weekly Installs

Repository

brianlovin/claude-config

GitHub Stars

304

First Seen

Jan 29, 2026

Security Audits

Gen Agent Trust HubFail SocketPass SnykPass

Installed on

claude-code65

opencode56

gemini-cli53

cursor53

codex53

github-copilot52