bugsnag
nuxt-bugsnag

nuxt.js 用の Bugsnag 統合。Bugsnag をプロジェクトに簡単に追加できます。ソースマップのアップロードをサポートしています。
17.8K ダウンロード50 スターv8.6.0
JulianMarJulianMar

nuxt-bugsnag

npm versionnpm downloadsCodecovLicense

📖 リリースノート

プレイグラウンド

Stackblitz を開いて試してみてください。

セットアップ

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

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

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

ソースマップ

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

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

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

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

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

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

{
  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ライセンス

Copyright (c) Julian Martin [email protected]