前端异常捕获与上报

在一般情况下我们代码报错啥的都会觉得 下图

然后现在来说下经常用的异常

1.try catch

这个是比较常见的异常捕获方式通常都是

使用try catch能够很好的捕获异常并对应进行相应处理，不至于让页面挂掉，但是其存在一些弊端，比如需要在捕获异常的代码上进行包裹，会导致页面臃肿不堪，不适用于整个项目的异常捕获。

try,catch的几个特点：

• 无法捕捉到语法错误，只能捕捉运行时错误；
• 可以拿到出错的信息，堆栈，出错的文件、行号、列号；
• 需要借助工具把所有的function块以及文件块加入try,catch，可以在这个阶段打入更多的静态信息。

2.window.onerror

除了try catch还有window.onerror, onerror提供了全局监听异常的功能：

运行以后：

window.onerror提供了错误的信息，还提供了错误行列号，可以更准确的定位错误代码

window.onerror的几个特点：

• 可以捕捉语法错误，也可以捕捉运行时错误；
• 可以拿到出错的信息，堆栈，出错的文件、行号、列号；
• 只要在当前页面执行的js脚本出错都会捕捉到，例如：浏览器插件的javascript、或者flash抛出的异常等。
• 跨域的资源需要特殊头部支持。

3.sourceMap

部署前端之前，开发者通常会对代码进行打包压缩，这样可以减少代码大小，从而有效提高访问速度。然而，压缩代码的报错信息是很难Debug的，因为它的行号和列号已经失真。这时就需要SourceMap来还原真实的出错位置了。

Source Map是一个JSON文件，其中包含了代码转换前后的位置信息。给定一个转换之后的压缩代码的位置，就可以通过Source Map获取转换之前的代码位置，反过来也一样。

Source Map真正神奇之处在于mappings属性，它记录了位置是如何对应的。JavaScript Source Map 详解里面已经有很好的解释了，就不多说了

如果要在chrome里面使用的话需要一些简单的配置