前端日志监控的一些总结

转载自：https://www.cnblogs.com/brucefq/p/14009844.html

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

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

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标签的方式

三、日志存储
ES技术存储