sentry

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Sentry Integration

Sentry集成

Guidelines for using Sentry for error monitoring and performance tracing.

在Next.js应用中使用Sentry进行错误监控和性能追踪的指南。

Exception Catching

异常捕获

Use

Sentry.captureException(error)

in try/catch blocks:

javascript

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

在try/catch块中使用

Sentry.captureException(error)

：

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.

为有意义的操作（如按钮点击、API调用和函数调用）创建span。

UI Actions

UI操作

javascript

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

javascript

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

API Calls

API调用

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

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)

配置（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.

Sentry初始化文件：

```
sentry.client.config.ts
```
- 客户端
```
sentry.server.config.ts
```
- 服务端
```
sentry.edge.config.ts
```
- 边缘运行时

使用

import * as Sentry from "@sentry/nextjs"

导入，无需在其他文件中初始化。

Basic Setup

基础配置

javascript

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

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

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"] }),
  ],
});

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

使用

logger.fmt

处理带变量的模板字符串：

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