老大对我目前手上的项目引入了阿里云ARMS前端监控，但是我自己对ARMS SDK的API以及如何注入到Vue中不是很懂，因此这篇博客诞生了。
/** * 阿里前端监控 * 配置文档 https://www.npmjs.com/package/alife-logger */ import BrowerLogger from 'alife-logger'; const logger = (() => { if (process.env.NODE_ENV === 'production') { try { return BrowerLogger.singleton({ pid: '241asf2342141@dfaf1', // 这是项目ID，新建一个应用站点后自动生成，在单个应用站点内部的`设置->应用设置`查看 imgUrl: 'https://arms-retcode.aliyuncs.com/r.png?', // 日志上传地址，源码中默认值就是这个地址 enableSPA: true, // 是否监听页面的 hashchange 事件并重新上报 PV，适用于单页面应用场景 sendResource: true, // 是否上报资源数据 }); } catch (e) { // eslint-disable-next-line no-console console.error('init logger fail', e); } } else { return { error() {}, }; } })(); export default logger;
enableSPA: true和hashchange事件是什么意思呢？
开启单页应用的PV上报。
就拿vue来说，通过vue-router进行页面切换时，每个url都会带一个#，例如从http://foo.com/#/bar跳转到http://bar.com/#/baz。
严格意义上说，这不算是一次page change，但是由于我们是单页应用，所以也算是一次page change，因此我们需要一个事件去监听#后面的内容的变化，这个事件就是hashchange，每次#后面的内容变化，都会算做一次PV。
关于hashchange的更多细节，可以到一些低调的浏览器事件查看，或者到[hashchange](
https://developer.mozilla.org...。
如何注入到vue项目中呢？
main.js
import arms from '@/arms'; Vue.config.errorHandler = (err, vm, info) => { arms.error(err, { filename: `${vm.$vnode.tag}, ${info}`}); };
Vue.config是什么？
Vue.config是一个对象，包含vue的一些全局配置，可以在启动应用之前修改属性。
它包含slient,optionMergeStrategies,devtools,errorHandler,warnHandler,ignoreElements,keyCodes,performance,productionTip等配置项。
这次主要的任务是学习Vue.config.errorHandler，附带着把Vue.config.productionTip = false也了解下。
Vue.config.errorHandler
在组件渲染函数或者watchers期间，分配一个处理器给uncaught error。
Vue.config.errorHandler = function (err, vm, info) { // err 错误信息 // vm Vue实例 // info Vue-specific error信息 }
关键词：捕获错误 捕获uncaught error 前端错误追踪 避免前端页面崩溃
- 2.2.0版本开始，钩子会捕获组件生命周期的错误。
- 2.4.0+,可以捕获Vue custom event handler中的错误，最典型的自定义事件就是
vm.$on('eventName', handler)。
Vue.config.errorHandler源码：
function globalHandleError (err, vm, info) { if (config.errorHandler) { try { return config.errorHandler.call(null, err, vm, info) // 有定义就返回自定义的运行后的Vue的config.errorHandler。可以用于将错误上报给第三方前端错误追踪服务，例如阿里云ARMS，Sentry，Bugsnag等等 } catch (e) { logError(e, null, 'config.errorHandler'); // 运行错误的话抛出异常 } } logError(err, vm, info); // 当errorHandler为undefined时，被捕获的错误会通过console.error输出避免崩溃，其实也就是默认会捕获uncaught error并且输出，避免崩溃。 }
logError源码:
function logError (err, vm, info) { { warn(("Error in " + info + ": \"" + (err.toString()) + "\""), vm); } /* istanbul ignore else */ if ((inBrowser || inWeex) && typeof console !== 'undefined') { console.error(err); } else { throw err } }
errorHandler内部函数为什么是arms.error(err, { filename: `${vm.$vnode.tag}, ${info}`});?
https://www.npmjs.com/package... 给出了错误信息上报接口的文档。
__bl.error(error, pos)
error为JS的Error对象，filename是pos的一个key，filename后面的模板字符串是为了唯一定位错误信息文件。
vm.$vnode.tag是什么？
http://foo.com/#/friend 的vm.$vnode.tag为vue-component-136-record。
http://foo.com/#/autoreply 的vm.$node.tag为vue-component-138-autoreply。
源码在vnode.js。
Vue.config.errorHandler中的info可能是哪些值？
vue/src/core/util/error.js 源码会暴露一个handlerError函数，通过搜索'handlerEroor'关键词，找到可能输出的值。
handleError(err, vm, `@render`); // src/platforms/weex/runtime/recycle-list/render-component-template.js handleError(e, vm, `render`); // src/core/instance/render.js handleError(e, vm, `event handler for "${event}"`); // src/core/instance/events.js handleError(e, vnode.context, `directive ${dir.name} ${hook} hook`); // src/core/vdom/modules/directives.js handleError(e, vm, `getter for watcher "${this.expression}"`); // src/core/observer/watcher.js handleError(e, ctx, 'nextTick'); // src/core/util/next-tick.js handleError(e, vm, `${hook} hook`); // src/core/instance/lifecycle.js handleError(e, vm, `data()`); // src/core/instance/state.js handleError(e, ctx, 'nextTick'); // packages/weex-vue-framework/factory.js，dist目录下的文件基本都有此方法 handleError(e, vm, (hook + " hook"));// packages/vue-server-renderer/build.js，basic.js
filename: `${vm.$vnode.tag}, ${info}` 对应ARMS前端监控平台的什么位置？
在访问明细表格的File字段，可以找到filename对应的信息，例如File: vue-component-109-chatFriend, nextTick。
