Back to Details

using-sentry

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Working with Sentry

使用Sentry

Capture exceptions, add context, create performance spans, and use structured logging with Sentry.
使用Sentry捕获异常、添加上下文信息、创建性能追踪跨度并运用结构化日志功能。

Implement Working with Sentry

实现Sentry的使用

Capture exceptions, add context, create performance spans, and use structured logging with Sentry.
See:
使用Sentry捕获异常、添加上下文信息、创建性能追踪跨度并运用结构化日志功能。
参考：

Capturing Exceptions

捕获异常

Manually capture errors that are handled but should be tracked:
typescript
import * as Sentry from "@sentry/nextjs";

try {
  await riskyOperation();
} catch (err) {
  Sentry.captureException(err);
  // Handle the error gracefully...
}
手动捕获已处理但需要追踪的错误：
typescript
import * as Sentry from "@sentry/nextjs";

try {
  await riskyOperation();
} catch (err) {
  Sentry.captureException(err);
  // 优雅地处理错误...
}

Adding Context

添加上下文信息

Attach user and custom context to errors:
typescript
import * as Sentry from "@sentry/nextjs";

// Set user context (persists for session)
Sentry.setUser({
  id: session.user.id,
  email: session.user.email,
});

// Add custom context to exceptions
Sentry.captureException(err, {
  tags: {
    feature: "checkout",
    plan: "pro",
  },
  extra: {
    orderId: "order_123",
    items: cart.items,
  },
});
为错误附加用户信息和自定义上下文：
typescript
import * as Sentry from "@sentry/nextjs";

// 设置用户上下文（在会话中持久化）
Sentry.setUser({
  id: session.user.id,
  email: session.user.email,
});

// 为异常添加自定义上下文
Sentry.captureException(err, {
  tags: {
    feature: "checkout",
    plan: "pro",
  },
  extra: {
    orderId: "order_123",
    items: cart.items,
  },
});

Performance Tracing

性能追踪

Create spans for meaningful operations:
typescript
import * as Sentry from "@sentry/nextjs";

// Wrap async operations
const result = await Sentry.startSpan(
  {
    op: "http.client",
    name: "GET /api/users",
  },
  async () => {
    const response = await fetch("/api/users");
    return response.json();
  },
);

// Wrap sync operations
Sentry.startSpan(
  {
    op: "ui.click",
    name: "Submit Button Click",
  },
  (span) => {
    span.setAttribute("form", "checkout");
    processSubmit();
  },
);
为重要操作创建追踪跨度：
typescript
import * as Sentry from "@sentry/nextjs";

// 包装异步操作
const result = await Sentry.startSpan(
  {
    op: "http.client",
    name: "GET /api/users",
  },
  async () => {
    const response = await fetch("/api/users");
    return response.json();
  },
);

// 包装同步操作
Sentry.startSpan(
  {
    op: "ui.click",
    name: "Submit Button Click",
  },
  (span) => {
    span.setAttribute("form", "checkout");
    processSubmit();
  },
);

Using the Sentry Logger

使用Sentry日志器

Sentry provides structured logging that appears in the Logs tab:
typescript
import * as Sentry from "@sentry/nextjs";

const { logger } = Sentry;

logger.info("Payment processed", { orderId: "123", amount: 99.99 });
logger.warn("Rate limit approaching", { current: 90, max: 100 });
logger.error("Payment failed", { orderId: "123", reason: "declined" });
Sentry提供的结构化日志会显示在日志标签页中：
typescript
import * as Sentry from "@sentry/nextjs";

const { logger } = Sentry;

logger.info("Payment processed", { orderId: "123", amount: 99.99 });
logger.warn("Rate limit approaching", { current: 90, max: 100 });
logger.error("Payment failed", { orderId: "123", reason: "declined" });

Breadcrumbs

面包屑（Breadcrumbs）

Add breadcrumbs to provide context for errors:
typescript
import * as Sentry from "@sentry/nextjs";

// Automatically captured: console logs, fetch requests, UI clicks
// Manual breadcrumbs for custom events:
Sentry.addBreadcrumb({
  category: "auth",
  message: "User signed in",
  level: "info",
});
添加面包屑为错误提供上下文信息：
typescript
import * as Sentry from "@sentry/nextjs";

// 自动捕获：控制台日志、fetch请求、UI点击事件
// 为自定义事件手动添加面包屑：
Sentry.addBreadcrumb({
  category: "auth",
  message: "User signed in",
  level: "info",
});

Clearing User Context

清除用户上下文

Clear user data on sign out:
typescript
import * as Sentry from "@sentry/nextjs";

async function signOut() {
  Sentry.setUser(null);
  await authClient.signOut();
}
在用户登出时清除用户数据：
typescript
import * as Sentry from "@sentry/nextjs";

async function signOut() {
  Sentry.setUser(null);
  await authClient.signOut();
}

References

参考资料