使用vue+node搭建前端异常监控系统（二）-框架如何收集

Webpack工程化

现在是前端工程化的时代,工程化导出的代码一般都是被压缩混淆后的。

比如：

setTimeout(() => {
 xxx(1223)
}, 1000)

出错的代码指向被压缩后的JS文件，而JS文件长下图这个样子。

如果想将错误和原有的代码关联起来就需要sourcemap文件的帮忙了。

sourceMap是什么

简单说，sourceMap就是一个文件，里面储存着位置信息。

仔细点说，这个文件里保存的，是转换后代码的位置，和对应的转换前的位置。

那么如何利用sourceMap对还原异常代码发生的位置这个问题我们到异常分析这个章节再讲。

Vue

创建工程

利用vue-cli工具直接创建一个项目。

npm install -g @vue/cli

# 创建一个项目
vue create vue-sample

cd vue-sample
npm i
// 启动应用
npm run serve

为了测试的需要我们暂时关闭eslint 这里面还是建议大家全程打开eslint

在vue.config.js进行配置

 // 关闭eslint规则
 devServer: {
 overlay: {
 warnings: true,
 errors: true
 }
 },
 lintOnSave:false
}

我们故意在src/components/HelloWorld.vue

<script>
export default {
 name: "HelloWorld",
 props: {
 msg: String
 },
 mounted() {
 // 制造一个错误
 abc()
 }
};
</script>
```html

然后在src/main.js中添加错误事件监听

```js
window.addEventListener('error', args => {
 console.log('error', error)
})

这个时候错误会在控制台中被打印出来,但是错误事件并没有监听到。

handleError

为了对Vue发生的异常进行统一的上报，需要利用vue提供的handleError句柄。一旦Vue发生异常都会调用这个方法。

我们在src/main.js

Vue.config.errorHandler = function (err, vm, info) {
 console.log('errorHandle:', err)
}

运行结果结果：

React

npx create-react-app react-sample
cd react-sample
yarn start

我们l用useEffect hooks 制造一个错误

import React ,{useEffect} from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
 useEffect(() => { 
 // 发生异常
 error()
 }); 

 return (
 <div className="App">
 // ...略...
 </div>
 );
}

export default App;

并且在src/index.js中增加错误事件监听逻辑

window.addEventListener('error', args => {
 console.log('error', error)
})

但是从运行结果看虽然输出了错误日志但是还是服务捕获。

ErrorBoundary标签

错误边界仅可以捕获其子组件的错误。错误边界无法捕获其自身的错误。如果一个错误边界无法渲染错误信息，则错误会向上冒泡至最接近的错误边界。这也类似于 JavaScript 中 catch {} 的工作机制。

创建ErrorBoundary组件

import React from 'react'; 
export default class ErrorBoundary extends React.Component {
 constructor(props) {
 super(props);
 }

 componentDidCatch(error, info) {
 // 发生异常时打印错误
 console.log('componentDidCatch',error)
 }

 render() {
 return this.props.children;
 }
 }

在src/index.js中包裹App标签

import ErrorBoundary from './ErrorBoundary'

ReactDOM.render(
 <ErrorBoundary>
 <App />
 </ErrorBoundary>
 , document.getElementById('root'));

最终运行的结果

往期推荐
使用vue+node搭建前端异常监控系统（一）-原理剖析

如果觉得本篇文章对您用帮助的话，麻烦动动君的小手点个赞哟~
小编将持续为程序圈的你带来技术热文，一起进步吧~