sentry
@sentry/nuxt

用于 Nuxt 的官方 Sentry SDK(实验性)

Sentry

用于 Nuxt 的官方 Sentry SDK

npm versionnpm dmnpm dt

此 SDK 适用于 Nuxt。如果您使用的是 Vue,请参阅我们的 Vue SDK

兼容性

支持的 Nuxt 最低版本是 3.7.0(建议使用 3.14.0+)。

概览

此包是针对服务器端的 @sentry/node 和客户端的 @sentry/vue 的包装,并增加了与 Nuxt 相关的功能。

手动设置

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

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

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.ts 中的 sentry

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

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

故障排除

如果您在错误跟踪或集成方面遇到任何问题,请参阅官方 Sentry Nuxt SDK 文档。如果文档未提供必要信息,请考虑在 GitHub 上提出问题。