关于前端日志监控的一些总结

最近公司要自己搭建一套前端日志监控系统，主要是为了方便移动端调查问题。

网上查阅了相关资料，个人有些总结如下：

总体的流程大致可分为：前端收集日志、日志上报、日志存储及日志显示界面（是否需要图形化界面可以根据己方的业务需求）。

一、关于前端日志的收集方式：

1、try...catch  这种方式适合捕获可预见的错误，无法捕获异步错误。

2、window.onerror 可以捕获到语法错误、但无法捕获到网络异常的错误。

3、window.addEventListener('error', fun, true) 这种方式虽然可以捕捉到网络请求的异常，但是无法判断 HTTP 的状态是 404 还是其他比如 500 等等，还需要配合服务端日志才进行排查分析才可以。

4、unhandledrejection：可以捕获到promise异常，也是通过window.addEventListener('unhandledrejection', fun, true)方式。

5、可以配合项目使用的前端框架的错误处理方法来收集，比如VUE的异常处理方法errorHandler，可以通过重写vue.prototype.errorHandler方法来达到收集框架的一些异常

二、日志上报方式

1、通过ajax发送数据

2、通过动态创建img标签的方式

三、日志存储

这一块需要后端的配合（本人懂后台，多多谅解，哈哈哈~）

四、日志显示界面

1、日志的显示界面多种多样，详细的就不赘述了。

因为目前还处于准备阶段，暂时写到这里，之后再更新~