Created
July 9, 2020 13:14
-
-
Save carbontwelve/c2c24f72b73d7f3760474c67a9e05a5c to your computer and use it in GitHub Desktop.
Atatus plugin for nuxt.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import * as atatus from 'atatus-spa'; | |
import Vue from 'vue'; | |
/* | |
* classifyRE, classify and formatComponentName are taken from | |
* node_modules/vue-template-compiler/build.js due to them | |
* seemingly being made private methods in Vue2. | |
*/ | |
const classifyRE = /(?:^|[-_])(\w)/g; | |
const classify = function(str) { | |
return str | |
.replace(classifyRE, function(c) { | |
return c.toUpperCase(); | |
}) | |
.replace(/[-_]/g, ''); | |
}; | |
const formatComponentName = function(vm, includeFile) { | |
if (vm.$root === vm) { | |
return '<Root>'; | |
} | |
const options = | |
typeof vm === 'function' && vm.cid != null | |
? vm.options | |
: vm._isVue | |
? vm.$options || vm.constructor.options | |
: vm; | |
let name = options.name || options._componentTag; | |
const file = options.__file; | |
if (!name && file) { | |
const match = file.match(/([^/\\]+)\.vue$/); | |
name = match && match[1]; | |
} | |
return ( | |
(name ? '<' + classify(name) + '>' : '<Anonymous>') + | |
(file && includeFile !== false ? ' at ' + file : '') | |
); | |
}; | |
export default ({ store, $config }, inject) => { | |
const _oldOnError = Vue.config.errorHandler; | |
const apiKey = process.env.ATATUS_KEY; | |
const tags = [$config.appEnv]; | |
if (typeof apiKey === 'undefined') { | |
console.error('Atatus needs apiKey setting in order to function!'); | |
return; | |
} | |
console.log(`✅ Installing Atatus Error Logging, tagged [${tags}]`); | |
atatus | |
.config(apiKey, { | |
tags, | |
version: $config.appVersion.description | |
}) | |
.install(); | |
// Makes atatus available everywhere as this.$atatus | |
inject('atatus', atatus); | |
// Replaces the Vue error handler with one that captures the error and passes it to | |
// Atatus. | |
Vue.config.errorHandler = function VueErrorHandler(error, vm, info) { | |
const vmComponentName = formatComponentName(vm); | |
atatus.notify(error, { | |
extra: { | |
componentName: vmComponentName, | |
propsData: vm.$options.propsData | |
} | |
}); | |
if ($config.appEnv === 'development') { | |
console.warn( | |
`⛔ ${info} error in ${vmComponentName}: "${error.toString()}"`, | |
vm | |
); | |
console.error(error); | |
} | |
if (typeof _oldOnError === 'function') { | |
_oldOnError.call(this, error, vm, info); | |
} | |
}; | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment