nuxt-bugsnag

nuxt-bugsnag
nuxt.jsのためのBugsnagインテグレーション。プロジェクトにbugsnagを簡単に追加できます。ソースマップのアップロードをサポートします。
nuxt-bugsnag
Nuxt2
Nuxt2を使用している場合は、こちらをご覧ください
プレイグラウンド
Stackblitzを開いて試してみる。
セットアップ
nuxt-bugsnag
依存関係をプロジェクトに追加します
npx nuxi@latest module add bugsnag
nuxt-bugsnag
をnuxt.config.js
のmodules
セクションに追加します。
{
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')
開発
- このリポジトリのクローンを作成します
npm install
を使用して依存関係をインストールしますnpm run dev
を使用して開発サーバーを起動します
ライセンス
著作権 (c) Julian Martin julian.martin@russmedia.com