前端异常错误原因分类
- 逻辑错误
- 业务逻辑判断条件错误
- 事件绑定顺序错误
- 调用栈时序错误
- 错误的操作js对象
- 数据类型错误
- 将null视作对象读取property
- 将undefined视作数组遍历
- 将字符串形式的数字直接用于加运算
- 函数参数未传
- 语法句法错误
- 网络错误
- 网络请求慢
- 服务端未返回数据但仍200,前端正常进行数据遍历
- 提交数据时网络中断
- 服务端500错误时前端未做任何错误处理
- 系统错误
- 内存不足
- 磁盘塞满
- 不支持API
- 不兼容
异常捕获
前端捕获异常分为全部捕获和单点捕获
- 全部捕获:通过全局的接口,将捕获代码集中写在一个地方,可以利用的接口有
- window.addEventListener('error')/window.addEventListener('unhandledrejection')/document.addEventListener('click')等
- 框架级别的全局监听,如axios中使用interceptor进行拦截,vue中也有错误采集接口
- 通过对全局函数进行封装,实现在调用函数时自动捕获异常
- 对实例方法重写
- 单点捕获:在业务代码中对单个代码块进行包裹,或在逻辑流程中打点,实现针对性的异常捕获
- try...catch
- 专门写一个函数来收集异常信息,在异常发生时,调用该函数