5

BugSnag provides a very useful and initially free product for tracking errors in your vue app. The problem is that there is no documentation for using this in a nuxt app. A plugin would be the best place to utilize it in the app.

Trying to resolve this was killing me for a while but I was able to find help from Patryk Padus from the comments on this post.

akaHeimdall
  • 949
  • 3
  • 10
  • 29

2 Answers2

5

For anyone trying to make this happen, do the following:

1.Place the following code inside of a plugin located in the /plugins folder of your application root:

#/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.Inside of the nuxt.config add the following to your plugins section:

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

3.Inside of your vue layout reference the bugsnag object using the $bugsnag object:

this.$bugsnag.notify(new Error('Nuxt Test error'))
akaHeimdall
  • 949
  • 3
  • 10
  • 29
2

If you're reading this in January 2021 and using Nuxt v2.x.x and above, the above answer might not work for you.

Here's what I did instead:

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

Tip: Install the @nuxt/dotenv module to be able to use process.env in your plugin.

References:

Bugsnag Vue installation reference

dimeji
  • 31
  • 2