一,错误类型
1,SyntaxError:语法错误
2,Uncaught ReferenceError:引用错误,引用一个不存在的变量时发生的错误。将一个值分配给无法分配的对象,比如对函数的运行结果或者函数赋值。
3,RangeError:范围错误,RangeError是当一个只超出有效范围时发生的错误。主要的有几种情况,第一是数组长度为负数,第二是Number对象的方法参数超出范围,以及函数堆栈超过最大值。
4,TypeError类型错误,变量或参数不是预期类型时发生的错误。比如使用new字符串、布尔值等原始类型和调用对象不存在的方法就会抛出这种错误,因为new命令的参数应该是一个构造函数。
5,URIError,URL错误,主要是相关函数的参数不正确。
6,EvalError eval()函数执行错误,当eval()函数没有被正确执行时,会抛出evalError错误。
二,错误捕获机制
1,监听 window.onerror(运行时错误捕获,不能捕获promise的异常错误信息)
当发生 JavaScript 运行时错误(包括处理程序中引发的语法错误和异常)时,使用接口ErrorEvent 的 error 事件将在 window 被触发,并被 window.onerror() 调用。
2,window.addEventListener("unhandledrejection"),promise没有catch错误
Promise 被 reject 并且没有得到处理的时候,会触发 unhandledrejection 事件。所以可以对此事件进行监听,将错误信息捕获上报。
3,try/catch
4,vue:Vue.config.errorHandler
5,vue中的errorCaptured钩子函数,捕获子组件的错误
5,react:以下两种方法中任意一个被定义时,这个组件就会成为 Error Boundary 组件,可以阻止子组件渲染时报错。
1)static getDerivedStateFromError: 在出错后有机会修改 state 触发最后一次错误 fallback 的渲染。返回{hasError: true}来呈现回退UI
2)componentDidCatch: 用于出错时副作用代码,比如错误上报等。
6,我们利用webpack打包压缩后生成一份对应脚本的map文件就能进行追踪了,在webpack中开启source-map功能
三,错误上报
1,window.onerror方法中,上报服务器
2,如果使用source-map压缩的,使用node中间层解析或者服务器解析