Nuxt Nation 大会即将到来。加入我们,时间为 11 月 12-13 日。

sentry
@sentry/nuxt

Nuxt 官方 Sentry SDK(实验性)

Sentry

Nuxt 官方 Sentry SDK(Beta)

npm versionnpm dmnpm dt

此 SDK 处于 **Beta** 阶段。API 稳定,但更新可能包含行为上的细微变化。如果您有任何反馈或疑虑,请在 GitHub 上联系我们。此 SDK 适用于 Nuxt。如果您使用的是 Vue,请查看我们的 Vue SDK 这里

兼容性

Nuxt 的最低支持版本为 3.0.0

常规

此包是 @sentry/node(用于服务器端)和 @sentry/vue(用于客户端)的包装器,并添加了与 Nuxt 相关的功能。

限制

  • 在开发模式 (nuxt dev) 下,服务器监控不可用。

手动设置

1. 先决条件和安装

  1. 安装 Sentry Nuxt SDK
    # Using npm
    npm install @sentry/nuxt
    
    # Using yarn
    yarn add @sentry/nuxt
    

2. Nuxt 模块设置

Sentry Nuxt SDK 基于 Nuxt 模块

  1. @sentry/nuxt/module 添加到 nuxt.config.ts 的 modules 部分。
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@sentry/nuxt/module'],
});

3. 客户端设置

在项目根目录中添加一个 sentry.client.config.ts 文件。

import { useRuntimeConfig } from '#imports';
import * as Sentry from '@sentry/nuxt';

Sentry.init({
  // If set up, you can use your runtime config here
  dsn: useRuntimeConfig().public.sentry.dsn,
});

4. 服务器端设置

在项目根目录中添加一个 sentry.server.config.ts 文件。

import * as Sentry from '@sentry/nuxt';

// Only run `init` when process.env.SENTRY_DSN is available.
if (process.env.SENTRY_DSN) {
  Sentry.init({
    dsn: 'your-dsn',
  });
}

由于技术原因,在 Sentry 服务器配置文件中使用 useRuntimeConfig 不起作用(该文件必须在 Nuxt 加载之前加载)。为了能够使用 process.env,您必须将 --env-file=.env 添加到您的 node 命令中

node --env-file=.env .output/server/index.mjs

或使用 dotenv 包。

import dotenv from 'dotenv';
import * as Sentry from '@sentry/nuxt';

dotenv.config();

Sentry.init({
  dsn: process.env.SENTRY_DSN,
});

上传源映射

要上传源映射,您必须在 nuxt.config.ts 中启用客户端源映射。然后,将您的项目设置添加到 nuxt.config.tssentry.sourceMapsUploadOptions 中。

// nuxt.config.ts
export default defineNuxtConfig({
  sourcemap: { client: true },

  modules: ['@sentry/nuxt/module'],
  sentry: {
    sourceMapsUploadOptions: {
      org: 'your-org-slug',
      project: 'your-project-slug',
      authToken: process.env.SENTRY_AUTH_TOKEN,
    },
  },
});

故障排除

添加 sentry.server.config.ts 时,您可能会遇到类似这样的错误:“Failed to register ESM hook import-in-the-middle/hook.mjs”。您可以为 @vercel/nft 添加覆盖(npm/pnpm)或解析(yarn)来解决此问题。这会将 hook.mjs 文件添加到您的构建输出中 (Nitro 问题在此处)。

对于 npm

"overrides": {
  "@vercel/nft": "^0.27.4"
}

对于 yarn

"resolutions": {
  "@vercel/nft": "^0.27.4"
}

或对于 pnpm

"pnpm": {
  "overrides": {
    "@vercel/nft": "^0.27.4"
  }
}