Sentry-javascript: Integration Vue and @sentry/browser

[mmcardle]

• [x] Review the documentation: https://docs.sentry.io/
• [x] Search for existing issues: https://github.com/getsentry/sentry-javascript/issues
• [x] Use the latest release: https://github.com/getsentry/sentry-javascript/releases

Package + Version

• [x] @sentry/browser
• [ ] @sentry/node
• [ ] raven-js
• [ ] raven-node _(raven for node)_
• [ ] other:

Version:

4.1.1

Description

Try to integration Vue and @sentry/browser. All messages received on sentry.io are [undefined] [undefined]
Have tried with and without the Vue integrations.
Any advice on where to look? or where to collect more debug?

├─ @sentry/[email protected]
├─ @sentry/[email protected]
├─ @sentry/[email protected]
├─ @sentry/[email protected]
├─ @sentry/[email protected]
├─ @sentry/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]

```
import App from './App'
import Vue from 'vue'
import * as Sentry from '@sentry/browser'

Sentry.init({
dsn: process.env.SENTRY_DSN,
integrations: [new Sentry.Integrations.Vue({ Vue })],
ignoreErrors: [
'ReportingObserver [deprecation]'
],
ignoreUrls: [
/extensions\//i,
/^chrome:\/\//i,
/^chrome-extensions:\/\//i
],
beforeSend: (event) => {
// Check if it is an exception -> Show report dialog
event.exception && Sentry.showReportDialog()
return event
}
})

new Vue({
el: '#app',
store,
router,
components: { App },
template: '',
})

[HazAT]

Can you try to call init after you initialized your Vue app?
Or not passing it at all, but still calling init after new Vue with just new Sentry.Integrations.Vue()?!

[mmcardle]

Thanks for the response
Same behaviour when moving to the created hook

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>',
  created: function () {
    if (process.env.SENTRY_DSN) {
      Sentry.init({
        dsn: process.env.SENTRY_DSN,
        integrations: [new Sentry.Integrations.Vue()],
        ignoreErrors: [
          'ReportingObserver [deprecation]'
        ],
        ignoreUrls: [
          /extensions\//i,
          /^chrome:\/\//i,
          /^chrome-extensions:\/\//i
        ],
        beforeSend: (event) => {
          // Check if it is an exception -> Show report dialog
          event.exception && Sentry.showReportDialog()
          return event
        }
      })
    }
  }
})

[mmcardle]

Moving back to raven.js

import Raven from 'raven-js'
import RavenVue from 'raven-js/plugins/vue'
if (process.env.SENTRY_DSN) {
  Raven.config(process.env.SENTRY_DSN).addPlugin(RavenVue, Vue).install()
}
new Vue(....

gives more detail on sentry.io

[HazAT]

I will take a look what's going on, thanks for trying it out.

[HazAT]

So I just tried it out here:
https://codesandbox.io/s/03mx928290

It works as expected, I do not get [undefined].
Open the console, and check for the event output.

[mmcardle]

Thanks, i will start working through the differences between your example and my setup

[mmcardle]

@HazAT thanks for your help

It looks like the issue was with unhandled promise rejections (vue-resource in this case)

This is what i came up with to get a reasonable message, treating vue-resource rejections as a special case

beforeSend: (event) => {
  if (event.exception && event.exception.mechanism &&
    event.exception.mechanism.type === 'onunhandledrejection') {
    return null
  }
  return event
}

And added a window event listener

window.addEventListener('unhandledrejection', (err) => {
  var reason = err.reason
  if (err instanceof Error) {
    Sentry.captureException(reason)
  } else if (reason.constructor.name === 'Response') {
    var error = new Error(
      reason.statusText + ' ' + reason.status + ' @ ' + reason.url
    )
    error.name = 'ResponseError'
    Sentry.withScope(scope => {
      scope.setTag('url', reason.url)
      scope.setTag('status', reason.status)
      Sentry.captureException(error)
    })
  } else {
    var unhandledError = new Error(err)
    unhandledError.name = 'UnhandledRejection'
    Sentry.captureException(unhandledError)
  }
})

[kamilogorek]

@mmcardle you can also achieve this without overriding global handlers

Sentry.init({
  beforeSend(event, hint) {
    // do your stuff here...
    // hint.originalException is `err` that you'd get in your original `unhandledrejection`
  }
})

or

Sentry.configureScope((scope) => {
  scope.addEventProcessor((event, hint) => {
    // do your stuff here...
  })
})

[adrlen]

Just had this issue with 4.0.6

[kamilogorek]

Unfortunately rejecting a promise with Request object instead of standard PromiseRejection is not a common scenario and we cannot predict it.

[kamilogorek]

The initially reported issue is resolved I guess, so let me close it. Feel free to ping me if this still needs to be reopened. Cheers!