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 加載之前加載)，useRuntimeConfig 在 Sentry 伺服器設定檔中不起作用。為了能夠使用 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 map，您必須在 nuxt.config.ts 中啟用用戶端 source map。然後，將您的專案設定新增至 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,
    },
  },
});