需求:客户在使用过程中页面报错时,可以生成错误记录传回服务器,以便改进。
步骤:
- 全局捕获异常,
- 发送到服务端,
- 生成错误日志。
(一).全局捕获异常
如图,vue提供了errorHandle这个方法来处理全局异常,更多详细内容参见官网。
我在页面中写了一个错误的函数,触发了errorHandler,控制台打印如下:
在utils.js中写了如下代码:
//系统错误捕获
const errorHandler = (error,vm,info)=>{
getErr(error,vm,info);
}
Vue.config.errorHandler = errorHandler;
Vue.prototype.$throw = (error,vm,info)=> errorHandler(error,vm,info);
然后在另一个公用的js(commonService.js)中:
/**
* 捕获异常
*/
const getErr = async(err,_this,info) => {
_this.$store.dispatch('getErr',{
err:err.stack,
hook:info
}
}
说明一下,之所以写在两个文件中,是因为项目结构就是这样的。
(二).发送到服务端
接下来就是如何把请求发送到node服务器上了。既然通过dispatch触发,那就统一在store目录下的index.js中处理
// 捕获异常,存在node服务器中
async getErr({
commit },{
err_info }) {
console.log({
err_info})
await axios.post('/api/get