在前端开发工作中，除了项目开发保质保量上线以外，项目的数据监控也应该配套起来，确保线上的正常运转。如上报 pv 监控项目是否正常运转；测速上报反应项目质量；脚本错误监控作为监控中重要一环，当页面发生报错的时候，通过上报错误信息，能及时发现存在问题，修复优化、减少损失。
本文基于在手 Q 家校群前端脚本错误量优化的方案，致力于打造极致的脚本错误优化。
作为首篇，主要讲解基础的脚本错误监控和上报方式，以及常会遇到的 Script error. 的产生原因和处理方法。
监控上报
脚本错误主要有两类：语法错误、运行时错误。
监控的方式主要有两种：try-catch、window.onerror。
监控方式
示例 · try-catch
|
1 2 3 4 5 6 7 |
try { test // <- throw error } catch(e){ console.log('运行时错误信息 ↙'); console.log(e); } |
通过给代码块进行 try-catch 包装，当代码块出错时 catch 将能捕获到错误信息，页面也将继续执行。
当发生语法错误或异步错误时，则无法正常捕捉。
示例 · try-catch (语法报错)
|
1 2 3 4 5 6 7 |
try { function empty() // <- throw error 语法错误 } catch(e){ console.log('语法错误信息 ↙'); console.log(e); } |
无法捕捉错误
示例 · try-catch (异步错误)
|
1 2 3 4 5 6 7 8 9 |
try { setTimeout(function() { test // <- throw error 异步错误 },0) } catch(e){ console.log('异步错误信息 ↙'); console.log(e); } |
无法捕捉错误
语法错误无法在 try-catch 中进行捕抓、而异步报错则可以通过为异步函数块再包装一层 try-catch，增加标识信息来配合定位，可以用工具来进行处理，这里不展开。
示例 · window.onerror
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/** * @param {String} msg 错误信息 |