场景
平常开发人员都会遇到一种情况，公司测试人员或者运营人员会火急火燎的跑过来告诉你线上的项目出问题了，并且试图复现出BUG是怎么出现的。
如果复现成功，那么开发人员就能很幸运的靠这点线索去排查代码，如果复现失败，那么线上的项目就相当于一个黑盒子，开发人员是两眼摸瞎无从下手。
可用解决方案
鉴于线上项目环境的无法预测,且自行开发js异常监控功能需要一定的时间成本和技术成本,考虑引入第三方监控平台监控线上项目。
引入[]对线上项目进行异常监控和警报,开发人员能够更加快速的锁定线上问题,保证生产环境的安全和稳定。
如何使用fundebug?
我这里将用vue作为例子，相应的各种框架的例子官网上还有很多。
-
首先先到注册一个账号,按照提示逐步完成。
-
将监控脚本嵌入到自己的项目中。
在src中创建文件 vue-fundebug/index.js
import Vue from 'vue'const isDev = process.env.NODE_ENV === 'development' ? true : false//判断当前是否是开发环境const scriptPath = "https://js.fundebug.cn/fundebug.0.3.6.min.js"//平台插件脚本地址const apikey = "3213c4f5cfcfa6862e653ac4e2b2be46be3bfe316dee8df15776d2d6de6cafa5a"//api key//加载脚本function loadScript(url, apikey) { var script = document.createElement("script"); script.type = "text/javascript"; script.src = url; script.setAttribute("apikey", apikey);//fundebug key script.setAttribute("silentConsole", isDev); script.setAttribute("releasestage", process.env.NODE_ENV);//告知平台当前环境 script.setAttribute("silent", isDev);//开发环境下将不进行邮件发送 document.body.appendChild(script); return script;}//拼接vue组建错误信息function formatComponentName(vm) { if (vm.$root === vm) return 'root'; var name = vm._isVue ? (vm.$options && vm.$options.name) || (vm.$options && vm.$options._componentTag) : vm.name; return (name ? 'component <' + name + '>' : 'anonymous component') + (vm._isVue && vm.$options && vm.$options.__file ? ' at ' + (vm.$options && vm.$options.__file) : '');}const vueFundebug = { install() { //异步加载插件脚本,防止阻塞页面渲染 loadScript(scriptPath,apikey) .onload = () => { //当vue报错,将触发监听函数 Vue.config.errorHandler = function (err, vm, info) { var componentName = formatComponentName(vm); var propsData = vm.$options && vm.$options.propsData; //将错误信息发送至平台,接下来就会收到警报邮件 fundebug.notifyError(err, { metaData: { appVersion: VERSION, componentName: componentName, propsData: propsData, info: info } }); } } }}export default vueFundebug;复制代码 - 开始加载fundebug.js并监控项目
src/main.js
import Vue from 'vue'import App from './App'import router from './router'import axios from './vue-axios'import vueFundebug from './vue-fundebug'//引入封装fundebug的脚本Vue.config.productionTip = falseVue.use(vueFundebug);//开始加载fundebug并开始监控Vue.use(axios);/* eslint-disable no-new */new Vue({ el: '#app', router, components: { App }, template: ' 报错后如何在平台上查看相应信息
- 收到报警邮件
- 到平台中查看详细信息
用户的操作行为,以及具体错误信息
开发人员额外传送至平台的信息,有web版本号,渲染错误的组件名称,更多信息开发人员都可以自定义
最后
更多用法没有详细讲,如果有用过fundebug的同学欢迎和我相互交流。