Nuxt 用の公式 Sentry SDK (ベータ)

この SDK はベータ版です。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 の 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 を使用できるようにするには、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.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"
  }
}

@sentry/nuxt