Custom Vue.config.errorHandler

[mjkhonline]

how to add a custom Vue.config.errorHandler next to the sentry module?

[rchl]

Import it directly from @sentry/node - https://docs.sentry.io/platforms/node/guides/express/, if I understand you correctly.

[mjkhonline]

Import it directly from @sentry/node - https://docs.sentry.io/platforms/node/guides/express/, if I understand you correctly.

this Sentry module is a module for nuxt. and modules runs before plugins in the nuxt lifecycle. I would like to add a plugin which add some functionality to the Vue.config.errorHandler. for example:

Vue.config.errorHandler = (err, vm, info) => { console.log(err) }

adding the above lines of codes prevent Sentry module to do its job because I override the Vue.config.errorHandler function. Since Sentry saves the reference to previously declared errorHandler and invokes it after error has been handled by Sentry, I'm looking for a way to declare my errorHandler before the module declares it.

stackoverflow

[rchl]

I suppose one way to do it would be to create your own module that adds a plugin that overrides the error handler.

That module would actually have to run after @nuxtjs/sentry module due to how Nuxt handles the order the plugins are added.

[mjkhonline]

I suppose one way to do it would be to create your own module that adds a plugin that overrides the error handler.

That module would actually have to run after @nuxtjs/sentry module due to how Nuxt handles the order the plugins are added.

unfortunately this does not work.

[rchl]

can you show what have you done exactly?

[mjkhonline]

can you show what have you done exactly?

nuxt.config.js:

modules: [
    '@nuxtjs/sentry',
    '~/modules/errorReporter',
    ['@nuxtjs/i18n', i18nOptions],
    ...
  ]

/modules/errorReporter/index.js:

import path from 'path'

export default function errorReporter() {
  this.addPlugin(path.resolve(__dirname, 'plugin.js'))
}

/modules/errorReporter/plugin.js:

import Vue from 'vue'

export default ({ store, $sentry }) => {
  $sentry.setTag('envType', process.env.envType)

  Vue.config.errorHandler = (err, vm, info) => {
     store.commit('report/logError', err)
    // rest of my code...

  }
}

I have tried different modules order. but in all situations my function overrides and prevents sentry to work.

[rchl]

That will still overwrite the handler that Sentry module sets because it sets its handler from the root scope of the plugin rather than from the exported function. That's because the handler is set on the global Vue instance so it wouldn't make sense to override it for each server-side request (it would also cause memory leak because it stores the old instance also).

Your plugin would have to set the handler from the root scope also like:

import Vue from 'vue'

Vue.config.errorHandler = (err, vm, info) => {
  // rest of my code...

}

export default ({ store, $sentry }) => {
  $sentry.setTag('envType', process.env.envType)
}

But then there is no proper way of accessing the request-specific context, of course.

[rchl]

I hope that answered your question.