Next.js
Next.js 是一个灵活的 React 框架，它提供了构建块来创建快速的、全栈Web应用程序。学习如何将其与 Sentry 集成。
特性：
- 自动 错误跟踪，支持 JavaScript 和 TypeScript 的源映射
- 自动 追踪，适用于客户端和服务器端
- 支持 Vercel 边缘运行时中的 中间件 和 边缘路由 的错误和性能监控。由于运行时的复杂性，某些错误功能（如堆栈跟踪）可能不如预期。需要
sentry.edge.config.js，更多信息请参阅此处 - 事件通过设备数据 丰富
- 为传出 HTTP 请求（使用 XHR 和 Fetch）以及控制台日志创建 面包屑
- 版本健康 用于跟踪无崩溃用户和会话
Sentry SDK 在 next dev --turbo 模式下不完全支持 Turbopack，因为 Turbopack 尚未提供运行 Sentry 所需的所有功能。
目前，当您使用 Turbopack 运行开发服务器时，Sentry Next.js SDK 将不会在浏览器中加载。 配置 SDK 时请注意这一点。
请注意，这仅影响开发服务器。 在生产构建时，即使您本地使用 Turbopack 开发，Sentry SDK 也会正常运行。
要支持 Turbopack 下浏览器中的 SDK，请关注 Next.js 仓库中的客户端 instrumentation 功能请求。
Sentry 通过在应用程序运行时使用 SDK 来捕获数据。
我们建议通过我们的安装向导来安装 SDK：
npx @sentry/wizard@latest -i nextjs
安装向导将提示您登录到 Sentry。然后它会自动为您完成以下步骤：
- 为每个运行时（Node.js、浏览器、边缘）创建带有默认
Sentry.init()调用的配置文件 - 向您的项目添加一个 Next.js 仪器钩子 (
instrumentation.ts) - 创建或更新您的 Next.js 配置文件，包含默认的 Sentry 配置
- 创建
.sentryclirc文件，用于上传源映射（此文件会自动添加到.gitignore） - 向您的应用程序添加一个示例页面以验证您的 Sentry 设置
在向导设置完成后，SDK 将自动捕获未处理的错误并监控性能。 您也可以手动捕获错误。
要了解如何将您的应用程序连接到 Sentry 并在 Vercel 上部署，请参阅Vercel 集成。
如果通过向导进行设置无法正常工作，您也可以手动设置 SDK。
要完成配置，请在 Sentry.init() 调用中添加 选项。 在这里，您还可以设置上下文数据——例如，关于用户的数据、标签，甚至是任意数据——这些数据将被添加到发送到 Sentry 的每个事件中。
此代码片段包含一个有意的错误，因此您可以立即测试设置是否正常工作。
添加一个在点击时会抛出错误的前端组件按钮：
pages/index.js<button
type="button"
onClick={() => {
throw new Error("Sentry Frontend Error");
}}
>
Throw error
</button>;
并在 API 路由中抛出一个错误：
pages/api/error.jsexport default (req, res) => {
throw new Error("API throw error test");
res.status(200).json({ name: "John Doe" });
};
通过浏览器开发者工具触发的错误是沙盒化的，因此它们不会触发错误监控。在验证 Sentry SDK 安装时请记住这一点。
嵌套的 React 服务器组件
在 Next.js 版本 15 之前，嵌套的 React 服务器组件中抛出的错误不会被框架暴露，导致 SDK 无法捕获这些错误。
Next.js 15 引入了 instrumentation.ts 中的 onRequestError 钩子，允许捕获和报告这些错误。
请参阅捕获嵌套的 React 服务器组件中的错误以获取详细的设置说明。
了解更多关于手动捕获错误或消息的信息，请参阅我们的使用文档。
要查看和解决记录的错误，请登录 sentry.io 并选择您的项目。单击错误标题将打开一个页面，您可以在其中查看详细信息并将其标记为已解决。