使用第三方平台监控线上项目代码错误-CSDN博客

场景

平常开发人员都会遇到一种情况，公司测试人员或者运营人员会火急火燎的跑过来告诉你线上的项目出问题了，并且试图复现出BUG是怎么出现的。

如果复现成功，那么开发人员就能很幸运的靠这点线索去排查代码，如果复现失败，那么线上的项目就相当于一个黑盒子，开发人员是两眼摸瞎无从下手。

可用解决方案

鉴于线上项目环境的无法预测,且自行开发js异常监控功能需要一定的时间成本和技术成本,考虑引入第三方监控平台监控线上项目。

引入[fundebug]对线上项目进行异常监控和警报,开发人员能够更加快速的锁定线上问题,保证生产环境的安全和稳定。

如何使用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 = false

Vue.use(vueFundebug);//开始加载fundebug并开始监控
Vue.use(axios);
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

复制代码