如何在 nuxt.js 应用程序中使用 BugSnag？答案

【问题标题】：How to use BugSnag inside of a nuxt.js app?如何在 nuxt.js 应用程序中使用 BugSnag？
【发布时间】：2019-09-28 22:28:24
【问题描述】：

BugSnag 提供了一个非常有用且最初免费的产品，用于跟踪您的 vue 应用程序中的错误。问题是没有在 nuxt 应用程序中使用它的文档。插件将是在应用程序中使用它的最佳位置。

试图解决这个问题让我死了一段时间，但我能够在this post 上从 cmets 的 Patryk Padus 那里找到帮助。

【问题讨论】：

标签： vue.js nuxt.js bugsnag

【解决方案1】：

如果您在 2021 年 1 月阅读本文并使用 Nuxt v2.x.x 及更高版本，则上述答案可能不适合您。

这就是我所做的：

import Vue from 'vue'
import bugsnag from '@bugsnag/js'
import BugsnagVue from '@bugsnag/plugin-vue'

const bugsnagClient = bugsnag.start({
  apiKey: process.env.BUGSNAG_KEY,
  plugins: [new BugsnagVue()], // this is important
})

Vue.use(bugsnagClient) // // this is also important

export default (ctx, inject) => {
  inject('bugsnag', bugsnagClient)
}

提示：安装@nuxt/dotenv 模块，以便能够在您的插件中使用process.env。

参考资料：

Bugsnag Vue installation reference

【讨论】：

【解决方案2】：

对于任何试图实现这一点的人，请执行以下操作：

1.将以下代码放在位于应用程序根目录 /plugins 文件夹中的插件中：

#/plugins/bugsnag.js
import Vue from 'vue'
import bugsnag from '@bugsnag/js'
import bugsnagVue from '@bugsnag/plugin-vue'

const bugsnagClient = bugsnag({
  apiKey: 'YOUR-KEY',
  notifyReleaseStages: [ 'production', 'staging' ]
})

bugsnagClient.use(bugsnagVue, Vue);

export default (ctx, inject) => {
  inject('bugsnag', bugsnagClient)
}

2.在 nuxt.config 中将以下内容添加到您的插件部分：

plugins: [
  '@/plugins/bugsnag.js',
],

3.在你的 vue 布局内部使用 $bugsnag 对象引用 bugsnag 对象：

this.$bugsnag.notify(new Error('Nuxt Test error'))

【讨论】：