js localdate上一个月_如何解决前端线上问题

原本，这是一篇宣传文章，斟酌了很久，但是文笔真的有限，最后写成了介绍，请大家多担待，部分图片来源于网络，如有侵权请告知，立即删除。

如果你是一位前端工程师，那你一定不止一次去解决一些顽固的线上问题，你也曾想方设法复现用户的bug，结果可能都不太理想。 怎样定位前端线上问题，一直以来，都是很头疼的问题，因为它发生于用户的一系列操作之后。错误的原因可能源于机型，网络环境，复杂的操作行为等等，在我们想要去解决的时候很难复现出来，自然也就无法解决。

身为一名前端工程师，我每天都要面临很多线上的问题，一时间让我焦头烂额。公司其他的监控系统也有，但是每次解决问题都需要辗转于各种监控系统之间，亦是疲惫不堪。所以，一怒之下，我便为自己（前端工程师）量身定做了这样一款监控系统，欢迎点击了解。

PV/UV维度分析：

1. pv/uv维度分析：主要包括了用户量、新用户量、IP数量、7天留存变化

2. 使用体验维度：单个用户访问页面频次、卸载重装APP频次

3. 健康状况维度：主要包括Js报错趋势、自定义异常发生趋势、静态资源加载报错趋势、接口请求报错报错趋势。

4. 健康评分：我给每个错误的加了不同的权重，通过报错率给每个应用打分。

Js报错维度分析：

1. Javascript错误的分类与聚合：主要包括每天Js报错量汇总、每天自定义异常量汇总、每天错误总量、不同平台（ios、android、PC）发生数量、影响人数

2. Javascript错误详情解析：主要包括每小时的报错趋势、每分钟的报错趋势（精准定位发生时间）、压缩代码定位、sourceMap解析源码定位。

用户细查维度：

这个功能可以让你查看单个用户的具体行为，你可以清楚地知道，某个用户，在某个时间，访问了某个页面，点击了某个按钮，发送了某个请求，从而产生了某个错误，一目了然。同时我们还对这个用户的各种外部环境做了分析，让你追踪用户问题易如反掌。

1. 查询用户具体的行为记录： 主要包括一个月内每天的访问记录、用户浏览、点击、请求、报错、超时等等，你可以清晰的知道用户在页面上的行为，从而复现用户的bug
2. 设备分析：主要包括设备、系统、IP、地理位置、等等
3. 网络环境评估：通过对资源加载的的耗时分析，评估出用户当时的网络状况，用来做分析对比。

Debug模式：

根据userId，你可以随时随地连接线上用户（包括开发环境、测试环境、以及生产环境），我们会记录用户的所有行为，本地缓存信息（localStorage、sessionStorage、cookie）、控制台打印信息。 同时我们还会录下用户的整个操作过程，支持回放。

我也曾经在谷歌调试模式、safari调试模式、安卓调试模式、charles代理模式、Postman模式等各种调试模式下疲于奔命，所以我决定开发这个Debug模式功能，让我从这些夺命连环模式中解脱出来。

当然，还有其他很多功能，我就不一一介绍了，那么这样一款监控系统的运行流程是什么样的呢？ 请看大图：

整套监控系统的流程就是这么简单的。这时候已经有很多小伙伴给我们抛出了许多疑问了。

1. 你们监控这么多东西，会不会影响页面的性能啊？

答：这套监控系统我们已经使用很久了，目前没有遇到性能上的问题。当然，也有极个别的小伙伴反馈说，拖慢了系统。所以我们增加了设置功能，你可以去除掉大部分的监控功能。

2. 你们居然用node做日志服务，并发量高了能扛得住吗？

答：node处理并发有着天然的优势，目前，如果是单点部署，可以支持10万+的日活量，如果使用多点部署，效果更佳哦。 我们正在积极开发能够支持百万以上日活量的版本，敬请期待吧 ，么么哒 ^ _ ^

3. 你们用mysql数据库来存数据库，不怕卡死吗？

答：我们的数据库，采用了每日分表的模式，目前千万级别的日志量是没有问题的哦，请放心吧。

我们知道，做好任何一件事都不会那么容易，我们也知道，http://webfunny.cn还有很多需要改进和提升的地方，感谢大家的鼓励支持和建议，我们会不断努力，把它做到更好。最后，如果你喜欢我们的作品，请动动手指帮我们分享和转发一下吧，谢谢。

本文章由 www.webfunny.cn 前端监控系统 提供。 只需要简单几步就可以搭建一套属于自己的前端监控系统，快来试试吧 ^ _ ^。