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 的模組部分。
// 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 上提出問題。