nuxt-bugsnag

Bugsnag 與 nuxt.js 的整合。它使您可以輕鬆地將 Bugsnag 新增到您的專案中。支援上傳源對映。

17.8K 下載•50 星•v8.6.0

JulianMar

nuxt-bugsnag

📖 釋出說明

演示

開啟 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://:3000'
  }
}

一箇中等大小的 Nuxt 應用程式的輸出可能會變得非常大。因此，我們添加了一個選項來停用這種情況下的日誌。

{
  bugsnag: {
    publishRelease: true,
    disableLog: true,
    baseUrl: 'https://: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,
      }
    }
  }
}

自定義效能監控

有關傳送自定義 Span，請參閱此文件。模組中有一個小助手可以傳送自定義 Span。

這隻能在客戶端使用，絕不應在伺服器端呼叫。模組中包含一個模擬，因此您無需擔心，但應牢記這一點。

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

開發

克隆此倉庫
使用 npm install 安裝依賴項
使用 npm run dev 啟動開發伺服器

許可證

麻省理工學院許可證