前端JS错误捕获--sourceMap

前言

在我们的项目开发中，随着项目的不断完善，线上bug的捕获、调试和处理是越来越重要，那如何来解决这个问题呢？

传统方案

1、增加多个console.log来打印报错信息
2、弹alert提示用户
或者是升级一步，捕获用户的报错，上传错误日志
通常情况下在try-catch里捕获错误信息，或者window.onerror里捕获。

可以了解window.onerror捕获异常的同学，可以学习一下
前端window.onerror异常监控
用window.onerror捕获并上报Js错误的方法

但是这样做： 产生的问题，由于现在工程化的项目，一般都要对项目的js、css、html等资源进行压缩，比如说使用webpack来进行打包，这个时候，我们之间报错的信息是压缩前代码的，而这些报错信息对于我们来说，几乎没用，我们无法通过报错信息找到对应的原始文件。

那我们如何来解决呢？

sourceMap

对于这个我就不详细介绍了:(不太清楚的同学可以看看下面的文章)
javaScript Source Map 详解
debug 工具 —— source-map

对于使用webpack打包的同学来说，我们只需要将发布环境的打包命令做一下修改即可：

sourceMap: 'source-map',  // 这里可以根据实际需求来设置

这样一来我们打包后就会生成我们的业务文件和.map文件

如果我们将这里生成的.map文件一同发布到服务端，打开网页后，打开开发者工具，切换到sourse

如图：2所示的地方，就是我们打包后的文件根据sourceMap解析后的文件，与我们本地项目开发的文件目录时一一对应的，这样如果线上报错，我们也能够通过这个进行调试.

测试对比：

我们直接在文件里加入一个报错：

throw new Error("报错啦！");

没有加sourcemap的报错：

这个时候我们点击报错信息，跳转到main.js中，是一堆压缩的代码，我们直观上是看起来比较头疼的。

加上sourceMap后的报错信息：

这个时候，我们点击进入，发现，进入的文件跟我们本地是对应的，这里我们能够快速的定位bug的产生位置，非常的方便高效。

这样做不是说就万无一失了，存在安全的问题，具体解决方案可以参考如下地址：