bugsnag / bugsnag-vue

[DEPRECATED] This package now lives within the monorepo for our Universal JS notifier "@bugsnag/js" • https://github.com/bugsnag/bugsnag-js

Deprecation notice

We upgraded our Vue support in the latest all-in-one javascript notifier package. Check out the blog post for more info.

All projects should upgrade to our universal JS notifier: @bugsnag/js and use the new version of the Vue plugin: @bugsnag/plugin-vue. See the upgrade guide for details on how to upgrade.

This package is now deprecated, but will continue to exist on the npm registry and work with Bugsnag's API for the foreseeable future. However, it will no longer receive updates unless they are critical.

Please upgrade at your earliest convenience.

---

Bugsnag: Vue

A bugsnag-js plugin for Vue.js.

This package enables you to integrate Bugsnag's error reporting with a Vue.js application at a detailed level. It creates and configures a Vue ErrorHandler which will capture and report unhandled errors in your app.

Reported errors will contain useful debugging info from Vue's internals, such as the component name, props and any other context that Vue can provide.

Installation

You can opt to install the package from npm, using the instructions below. Alternatively you can load the plugin from our CDN via a <script/> tag.

CDN

<script src="//d2wy8f7a9ursnm.cloudfront.net/v4/bugsnag.min.js"></script>
<script src="//d2wy8f7a9ursnm.cloudfront.net/bugsnag-plugins/v1/bugsnag-vue.min.js"></script>

npm

npm i --save bugsnag-js bugsnag-vue
# or
yarn add bugsnag-js bugsnag-vue

Usage

Depending on how your application is structured, usage differs slightly:

Inline script tag

The script tag creates a global function called bugsnag__vue which needs to be passed a reference to the Vue object. Ensure that Vue is loaded/available before calling this function.

<script>
  window.bugsnagClient = bugsnag('API_KEY')
  // after Vue has been loaded…
  bugsnagClient.use(bugsnag__vue(Vue))
</script>

See the examples for more info.

Bundled

If you installed the package from npm, usage will look more like the following snippet. Again, ensure you have a reference to Vue before you create the plugin.

const Vue = require('vue')
const bugsnag = require('bugsnag-js')
const bugsnagVue = require('bugsnag-vue')

const bugsnagClient = bugsnag('API_KEY')
bugsnagClient.use(bugsnagVue(Vue))

Support

• Check out the documentation
• Search open and closed issues for similar problems
• Report a bug or request a feature

License

The Bugsnag JS library and official plugins are free software released under the MIT License. See LICENSE.txt for details.

bugsnag-vue's Issues

about `window.Vue`

Read your src, you usewindow.Vue as a basis for deciding whether to use vue.js，
But...my project usual not mount Vue on window.
I hope you can write this into ReadMe as tips.

ReferenceError: bugsnagClient is not defined - how to access the bugsnagClient

Hi,

I have a problem with reporting a handled error. I initialize the Bugsnag in the following way:

import bugsnag from 'bugsnag-js'
const bugsnagClient = bugsnag('key-here')
import Vue from 'vue'
import bugsnagVue from'bugsnag-vue'
bugsnagClient.use(bugsnagVue(Vue))

This seems to work fine. Now I want to report a handled error in a Vuex store:

    async fetchAccountValue({commit}) {
        try {
            const {data} = await axios.get('/api/v1/user/account-value')

            commit(types.FETCH_ACCOUNT_VALUE_SUCCESS, {result: data.data})
        } catch (error) {
            commit(types.FETCH_ACCOUNT_VALUE_FAILURE)

            bugsnagClient.notify(error)
        }
    }

If the request fails I get the following console error: ReferenceError: bugsnagClient is not defined

How can I access the bugsnagClient in another js file. Normally I would import it but it would require the api key again I assume? I could also make the object global by adding it to the window object but I'd rather not.

Filtering out confidential props value

Expected behavior

bugsnag-vue should provide a way to filter the Vue props values.

Observed behavior

There's no option to filter component props or documentation provided on Vue integration guide.

Some props such as credit card information are confidential and should not appear on Bugsnag Dashboard.

Recommended use for handled errors?

I'm currently doing the following in my main.js in order to use bugsnagClient.notify in other files, like my index.js's router. I was wondering how you would recommend using it? Putting something about this in the readme would be helpful because I'm sure most people don't want to initialize the client in multiple places.

import Vue from 'vue'
import bugsnag from 'bugsnag-js'
import bugsnagVue from 'bugsnag-vue'

if (process.env.NODE_ENV === 'production') {
  const bugsnagClient = bugsnag('api_key')
  bugsnagClient.use(bugsnagVue(Vue))
  window.bugsnagClient = bugsnagClient
}

Unable to upload source map

hi there.
I have some problems, can you help me?

Unknown plugin "transform-es3-member-expression-literals"

Expected behavior

build should work without errors

Observed behavior

ERROR in ./node_modules/bugsnag-vue/dist/bugsnag-vue.js
Module build failed: ReferenceError: Unknown plugin "transform-es3-member-expression-literals" specified in "/Users/novo/_testing/five/node_modules/bugsnag-vue/.babelrc" at 0, attempted to resolve relative to "/Users/novo/_testing/five/node_modules/bugsnag-vue"

Update
even after installing the plugin, errors still show up which i believe they will keep coming up until all the plugins are installed, i suspect it might be related to having the env preset

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env', 'stage-3']
                    }
                }
            }
        ]
    }
})

in the laravel webpack.mix.js file, for now the cdn works while adding the bugsnagClient logic inside the app.js

window.Vue = require('vue')
window.bugsnagClient = bugsnag('xxx')
bugsnagClient.use(bugsnag__vue(Vue))

Steps to reproduce

• yarn add bugsnag-js bugsnag-vue

window.Vue = require('vue')
const bugsnag = require('bugsnag-js')
const bugsnagVue = require('bugsnag-vue')
const bugsnagClient = bugsnag('xxx')
bugsnagClient.use(bugsnagVue(Vue))

Version

• "bugsnag-js": "^4.4.0",
• "bugsnag-vue": "^1.0.1",