如何在nuxt.js应用程序内部使用BugSnag?

时间:2019-05-11 04:57:06

标签: vue.js nuxt.js bugsnag

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

试图解决这个问题使我丧命了一段时间,但是我能够从this post的评论中找到Patryk Padus的帮助。

2 个答案:

答案 0 :(得分:2)

如果您在 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

答案 1 :(得分:0)

对于尝试实现此目标的任何人,请执行以下操作:

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'))