Nuxt Nation カンファレンスが開催されます。11月12日〜13日にご参加ください。

bugsnag
nuxt-bugsnag

nuxt.jsのためのBugsnagインテグレーション。プロジェクトにbugsnagを簡単に追加できます。ソースマップのアップロードをサポートします。

nuxt-bugsnag

npm versionnpm downloadsCodecovLicense

📖 リリースノート

Nuxt2

Nuxt2を使用している場合は、こちらをご覧ください

プレイグラウンド

Stackblitzを開いて試してみる

セットアップ

  1. nuxt-bugsnag 依存関係をプロジェクトに追加します
npx nuxi@latest module add bugsnag
  1. nuxt-bugsnagnuxt.config.jsmodules セクションに追加します。
{
  modules: [
    'nuxt-bugsnag'
  ]
}

すべてのbugsnag オプション を設定オブジェクトに渡すことができます

{
  bugsnag: {
    config: {
      apiKey: 'your key',
      enabledReleaseStages: ['staging', 'production'],
    }
  }
}

ソースマップ

publishRelease オプションを追加することで、ソースマップをアップロードできます。baseUrlも設定することが重要です。これにより、bugsnagはエラーをソースマップにマッピングできます

{
  bugsnag: {
    publishRelease: true,
    baseUrl: 'https://127.0.0.1:3000'
  }
}

中規模のNuxtアプリの出力はかなり大きくなる可能性があります。そのため、この場合のログを無効にするオプションを追加しました。

{
  bugsnag: {
    publishRelease: true,
    disableLog: true,
    baseUrl: 'https://127.0.0.1:3000'
  }
}

異なるプロジェクトルートの設定

Nuxtアプリが / 以外のフォルダで実行されている場合は、projectRoot をこのディレクトリに設定して、BugSnagがソースマップと一致するようにすることができます。

{
  bugsnag: {
    publishRelease: true,
    projectRoot: '/someFolder/'
  }
}

設定例

これらのオプションを設定することをお勧めします

{
  modules: [
    'nuxt-bugsnag',
  ],

  bugsnag: {
    publishRelease: true,
    config: {
      apiKey: 'YOUR_API_KEY',
      enabledReleaseStages: ['staging', 'production'],
      releaseStage: process.env.NODE_ENV,
      appVersion: 'YOUR_VERSION',
    }
  }
}

カスタムエラーの報告

最も簡単な方法は次のとおりです。

this.$bugsnag.notify(new Error('Some Error'))

コンポジションアプローチが好きな場合は、次のようにすることができます

useBugsnag().notify('Some Error')

パフォーマンス

7.4.0以降でのみ利用可能です

bugsnagパフォーマンス機能の最も簡単な設定は次のとおりです

{
  bugsnag: {
    apiKey: 'YOUR API KEY',
    performance: true
  }
}

カスタムオプションの場合は、次の設定を使用し、こちらからすべての設定を取得できます

{
  bugsnag: {
    apiKey
    config: {
      performanceConfig: {
        autoInstrumentFullPageLoads: true,
      }
    }
  }
}

カスタムパフォーマンスモニタリング

カスタムスパンの送信については、このドキュメントを参照してください。カスタムスパンを送信するための小さなヘルパーがモジュールにあります。

これはクライアント側でのみ使用でき、サーバー側では呼び出さないでください。モックが含まれているため、心配する必要はありませんが、覚えておく必要があります。

useBugsnagPerformance().startSpan('my-span')

開発

  1. このリポジトリのクローンを作成します
  2. npm installを使用して依存関係をインストールします
  3. npm run devを使用して開発サーバーを起動します

ライセンス

MITライセンス

著作権 (c) Julian Martin julian.martin@russmedia.com