计算机网络技术网站开发,做条形图的网站,东莞网络科技有限公司简介,怎么做像京东一样的网站前言一直以来我们都是用Sentry做项目监控#xff0c;不过前段时间我们的Sentry坏掉了#xff08;我搞坏的#xff09;但监控又是很有必要的#xff0c;在sentry修好之前#xff0c;我想先寻找一个临时的替代方案#xff0c;同时发现网上关于ExceptionLess的资料少得可怜不过前段时间我们的Sentry坏掉了我搞坏的但监控又是很有必要的在sentry修好之前我想先寻找一个临时的替代方案同时发现网上关于ExceptionLess的资料少得可怜ExceptionLess官方的文档也不是很完善翻了好久文档和源码于是有了本文……关于ExceptionLess写.NetCore的同学应该不会陌生这个是.Net平台的一款监控工具跟Sentry差不多不过我们觉得界面比sentry清爽信息也比较清晰一目了然所以我们的.NetCore服务监控全都用ExceptionLess来做。然后ExceptionLess也是支持前端的因此我打算先暂时用ExceptionLess来做我们的前端项目监控。准备工作在ExceptionLess中创建一个项目这个懂的都懂不重复了~ExceptionLess提供了好几种模式有Node.js、也有浏览器应用这里我选的是浏览器应用。官方还有关于Vue的例子不过是vue3.x版本的因为我们目前还在用vue2.x所以只能自己基于浏览器应用的SDK封装一个来用~安装ExceptionLess客户端使用yarn安装客户端yarn add exceptionless我使用的版本是^1.6.4集成ExceptionLess在src/utils下创建一个新的js文件exceptionless.jsimport {ExceptionlessClient} from exceptionless/dist/exceptionless;const exLessClient ExceptionlessClient.default;
exLessClient.config.apiKey ;
exLessClient.config.serverUrl const install Vue {if (install.installed)returninstall.installed trueObject.defineProperties(Vue.prototype, {$exLess: {get() {return exLessClient}}})
}export default install这样实现了把ExceptionLess封装为一个Vue模块然后编辑main.js准备注册模块import Exceptionless from ./utils/exceptionless
// Exceptionless模块
Vue.use(Exceptionless)这样在需要提交日志的地方就可以直接使用this.$exLess.submitLog(测试信息)
this.$exLess.submitException(error)集成到全局异常处理如果所有异常要自己手动捕获提交的话就太麻烦了而且会有漏网之鱼我参考了网上的资料搞了个vue全局异常处理把没有手动捕获的异常收集起来然后一并提交到ExceptionLess平台。直接上代码src/utils/errorHandler.jsimport {ExceptionlessClient} from exceptionless/dist/exceptionless;const exLessClient ExceptionlessClient.default;function isPromise(ret) {return (ret typeof ret.then function typeof ret.catch function)
}const errorHandler (error, vm, info) {console.error(抛出全局异常, vm, vm, info, info)console.error(error)exLessClient.submitException(error)
}function registerActionHandle(actions) {Object.keys(actions).forEach(key {let fn actions[key]actions[key] function (...args) {let ret fn.apply(this, args)if (isPromise(ret)) {return ret.catch(errorHandler)} else { // 默认错误处理return ret}}})
}const registerVuex (instance) {if (instance.$options[store]) {let actions instance.$options[store][_actions] || {}if (actions) {let tempActions {}Object.keys(actions).forEach(key {tempActions[key] actions[key][0]})registerActionHandle(tempActions)}}
}
const registerVue (instance) {if (instance.$options.methods) {let actions instance.$options.methods || {}if (actions) {registerActionHandle(actions)}}
}let GlobalError {install: (Vue, options) {/*** 全局异常处理* param {*} error* param {*} vm*/Vue.config.errorHandler errorHandlerVue.mixin({beforeCreate() {registerVue(this)registerVuex(this)}})Vue.prototype.$throw errorHandler}
}export default GlobalError在main.js中注册import ErrorHandler from ./utils/errorHandler// 全局异步处理模块
Vue.use(ErrorHandler)搞定~参考资料【实践总结】优雅的处理vue项目异常https://juejin.cn/post/6844903860121632782Vue3 对比 Vue2.x 差异性、注意点、整体梳理与React hook比又如何https://juejin.cn/post/6892295955844956167#heading-21
