关于 using-sentry
面向使用 Sentry 的开发者,提供错误捕获、上下文补充、性能追踪和结构化日志的实践指导。内容包含可用于 Next.js 的 SDK 示例,也涵盖面包屑与用户上下文管理。
主要功能
- 01手动捕获异常
- 02附加用户与自定义上下文
- 03为操作创建性能 Span
- 04记录结构化日志
- 05添加错误面包屑
- 06登出时清除用户上下文
适用场景
- 01追踪已处理但仍需记录的错误
- 02为错误事件补充用户信息
- 03测量异步操作的性能
- 04记录支付等业务事件
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ andrelandgraf/ fullstackrecipes --skill using-sentry安装后在 Claude Code 中输入/using-sentry确认已加载。
详细介绍
使用 Sentry
使用 Sentry 捕获异常、添加上下文、创建性能 Span,并进行结构化日志记录。
使用 Sentry
使用 Sentry 捕获异常、添加上下文、创建性能 Span,并进行结构化日志记录。
参见:
- 资源:Fullstack Recipes 中的
using-sentry - URL:https://fullstackrecipes.com/recipes/using-sentry
捕获异常
手动捕获已处理但仍需跟踪的错误:
import * as Sentry from "@sentry/nextjs";
try {
await riskyOperation();
} catch (err) {
Sentry.captureException(err);
// Handle the error gracefully...
}
添加上下文
为错误附加用户上下文和自定义上下文:
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,
},
});
性能跟踪
为有意义的操作创建 Span:
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();
},
);
使用 Sentry Logger
Sentry 提供结构化日志记录,这些日志会显示在 Logs 标签页中:
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" });
面包屑
添加面包屑,为错误提供上下文:
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",
});
清除用户上下文
退出登录时清除用户数据:
import * as Sentry from "@sentry/nextjs";
async function signOut() {
Sentry.setUser(null);
await authClient.signOut();
}
参考资料
评论
支持 Markdown