软件在上线后，有时候会有我们没有预测到的问题，通过异常监控，可以提高我们软件的健壮性，更好的服务用户，本文简单介绍异常信息采集的基本方法。
1. 常见前端异常
在软件开发过程中，会出现很多异常情况，在前端开发中，有以下一些常见的异常情况。在发生异常后，我们通过一些JavaScript的方法，来捕获不同的错误，达到监控的目的。
- JS 语法错误、代码异常
- AJAX 请求异常
- 静态资源加载异常
- Promise 异常
- Iframe 异常
- 跨域 Script error
- 崩溃和卡顿
2 捕获异常方案
在JavaScript程序中捕获异常有很多办法，下面我们依次对不同类型的错误，捕获的方法进行分析。通过下面不同的方法，可以捕获到软件系统在运行时所产生的异常，然后通过上报异常，来解决问题。
1） 捕获try/catch的异常
在开发过程中，我们通过try/catch语句对有可能产生问题的地址进行错误捕获，然后获取程序本身运行的异常错误信息。
2） 捕获同步代码的异常
通过window.onerror可以捕获到程序运行时，同步的错误信息。
3） 捕获静态资源的异常
当一些图片资源加载失败后，会触发Event的error事件，我们通过addEventListener来对错误添加监听事件，然后进行错误的捕获。
4） 捕获promise的异常
在promise中，我们可以通过catch来对错误信息进行捕获，但是有一些情况没有写catch，系统会通过unhandledrejection事件来触发Promise Error ,我们通过addEventListener来添加监听，然后进行错误的捕获。
5） 捕获VUE项目的异常
Vue官方为我们提供了一个是错误捕获函数，通过errHandler来捕获相关的错误
3.2异常上报
1）通过程序上报
当我们捕获到异常信息后，我们可以通过预先设计好的接口来上报程序运行中发生的异常信息，然后在后台管理处，查看相关的信息，并根据实际的情况，做相关的处理操作。
2）通过用户反馈上报
我们也可以在页面添加异常上报接口和页面，然后让用户主动反馈异常的信息，进行异常捕获并上报。
4. 总结
前端异常监控，是一套完整的软件运行体系。流程如下。我们在捕获到程序运行中所产生的异常，目的是为了解决本次异常，并在下一次的开发过程中，预防异常的发生。提高软件的健壮性。
业界流行系统：
fundebug: https://www.fundebug.com/
Sentry: https://sentry.io/
5. 实例解析
5.1静态资源异常
我们在上线项目后，有时候图片未正常加载，如图所示，图片未显示。我们通过window.addEventListener(‘error’)添加静态资源错误的监听，就可以捕获到相关发生的位置。然后通过我们设定好的回调函数，把相关的错误信息反馈会管理平台。
5.2网络请求异常
如下图所示，我们在进行异步请求的过程中，如果发生了异常信息，我们没有进行catch，那么可以通过window.addEventListener(‘unhandledrejection’)来监听异步错误信息的内容，然后我们根据需求，把所需要的参数提交后台.
在捕获异常信息后，我们需要先对异常信息进行数据整理，然后把有效的信息发送回反馈平台。我们通过错误事件对象拿到改错误的具体信息，如下所示，对于一个网络请求错误来说，我们通过e.reason对象来获取相关的信息。下面我们对一个完整的网络请求进行有效参数整理。
