Nuxt 官方 Sentry SDK (Beta 版)

此 SDK 处于 Beta 版。API 稳定，但更新可能包含行为上的细微更改。如果您有任何反馈或疑虑，请在 GitHub 上联系我们。此 SDK 适用于 Nuxt。如果您正在使用 Vue，请在此处查看我们的 Vue SDK。

Nuxt 最低支持版本为 3.0.0。

概述

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

局限性

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

手动设置

1. 前提条件和安装

安装 Sentry Nuxt SDK

# Using npm
npm install @sentry/nuxt

# Using yarn
yarn add @sentry/nuxt

2. Nuxt 模块设置

Sentry Nuxt SDK 基于 Nuxt 模块。

将 @sentry/nuxt/module 添加到 nuxt.config.ts 的模块部分

// 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',
  });
}

由于技术原因 (文件必须在 Nuxt 加载之前加载)，在 Sentry 服务器配置文件中使用 useRuntimeConfig 不起作用。为了能够使用 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,
});

上传 Source Maps

要上传 source maps，您必须在 nuxt.config.ts 中启用客户端 source maps。然后，将您的项目设置添加到 nuxt.config.ts 的 sentry.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,
    },
  },
});