大家好，这是杨成冈。
当涉及到监视系统时，大多数学生首先想到后端监视。后端。前端更多是UI显示的角色。它主要关注页面设计的方式。似乎没有任何监控，因此没有监视的概念。
因此，每个人都同意，只要后端稳定且可控，应用程序稳定且可控制。但是实际情况吗？
近年来，前端的发展变得越来越快。得益于JavaScript的持续发展和浏览器功能的持续增强，前端可以做越来越多的事情，相应的前端应用程序的复杂性越来越高。我们无法遇到的问题现在，我们已经想出了所有的大脑。
例如，小姐是前端程序员。有一天，用户在页面和一个按钮上进食。xiaoming立即找到按钮，稍微，eh？通常。
该怎么办？我相信世界上的前端程序员对奇怪的问题是相同的。XIAOMING告诉用户：也许这是一个浏览器缓存问题。您不能刷新它，还是尝试登录它？用户根据小姐的建议进行操作，它确实有效！因此，他向xiaoming.xiaoming.xiaoming发出了一系列的“感谢”。。
两天后，另一个用户反馈同样的问题。居民牺牲了上述通用的DAFA解决方案，但仍然有效。但是问题真的解决了吗？不！但是，小米已经尝试了很多次，无法再现异常。可能有很多原因，例如：
但是，在正常情况下没有问题。小米的许多测试是正常的。在某些特定情况下，将会发生这个问题，但是我们不能判断也不能捕获它。
这种类型的虫子像矿山一样潜伏在我们的系统中，也许何时会爆炸。最令人尴尬的是，即使它爆炸了，我们很难找到它，这使我们的“雷声”困难。
一个阳光明媚的下午，小敏坐在厕所里，思考生活。舒适地闪烁着我的脑海，小明想：然后，您可以在背景中的某个地方看到此数据。您立即发现错误的原因吗？”
小敏拍拍他的大腿，是的！为什么我不早点想到？在这种情况下，只要发生例外，我们就可以自动捕获异常数据。如果我们再次遇到在线错误，我们可以在没有用户反馈的情况下找到它，我们可以立即找到错误的原因。
我相信许多前端的前任也因上述问题而困扰，然后像小米一样，他们慢慢地有了这个想法：“在报告后续调查的错误时保存异常数据。”逐渐发展成为当今的前端监视。
当然，今天的前端监视不仅是监视异常数据。任何有利于产品分析的数据都可以添加到监视中。因此，我认为前端监视是指在使用用户使用系统使用过程中生成的关键数据（存储在数据库中，并且可以找到）并在将来进行分析。这样的整个实现称为前端监视系统。
上面的示例用于得出前端监视的背景。大致讨论了它如何跟踪在线错误问题。每个人都应该对前端监视的重要性有初步的了解。现在我们关注该项目，然后详细探讨它可以解决的问题。
首先是异常错误的问题。就像示例中的场景一样，在线上是异常的。有时我们很难复制。即使没有用户反馈，我们也不知道存在这个问题，因此我们传达了一种不稳定的感觉的感觉。产品。
当然，除了异常的前端外，我们还可以捕获界面的例外。遇到问题时，产品，测试，用户，首先找到前端。无论是前端问题，前端都是第一个，然后花时间定位错误。有时领导者的脾气不好。当您出现时，您可以先责骂您的脸，并且您不敢在谦虚的微观末端说话，因为您可以在任何问题后都清楚。结果，调查后存在界面问题。准确。
但是，如果有前端监视，我们可以立即获取错误信息，页面，地址，参数等。可以冷静地说出哪个聚会是问题的。如果您遇到泛滥的行为，您可以在前端勇敢地说不。毕竟，我手头有证据。
跟踪异常是前端监视的最实际的场所，但不仅如此，性能监控也是非常关键的部分。
当前的前端工程量非常大。如果代码的质量不高或项目体系结构设计是不合理的，那么遇到性能问题很容易。执行问题，例如第一个屏幕加载时间，页面是否被卡住，白色屏幕，资源重复的请求等。，可以通过数据收集，例如计算渲染时间，请求接口数量，请求总资源等，监视页面，并在时间传播问题中及时发现。
那么，除了“解决问题”之外，前端监视的价值是什么？
实际上，前端监控可以帮助程序员不断优化和改进应用程序，并对产品和操作学生具有相同的不可或缺效果。特别是，通过“埋藏的点监控”来收集用户行为数据，您可以对在线产品的使用，例如整体PV/UV，访问某个功能的访问次数，访问周期，点击率等。这些数据可以帮助产品和操作了解实际情况，并且然后改善产品功能。
这些行为数据的收集可以非常准确地描述为某人的函数或实际使用。当然，收集的数据量远大于异常数据。在比较中，只有在异常监测时才收集数据行为数据是，只要用户使用我们的产品并与产品进行交互，理论上必须收集这些数据。
当然，监视是多方面的，并且收集了哪些数据取决于情况。简而言之，如果您想知道产品的任何情况，则可以使用设计收集规则，然后收集数据来实现它。这方面非常灵活，不仅限于每个人都知道的指标。
前端监控到现在的开发将不可避免地具有成熟的第三方平台。目前，中国最常用的三个：
首先，付费的两个哨兵和Fundebug平台，您的数据越多，成本越高，相当于数据保管平台。尽管可以将WebFunny私有化，但它的函数已固定，并且代码无法固定，并且代码无法进行。改变。这是其缺点：不够灵活，无法自定义该功能。
因此，尽管市场上已经有成熟的监视系统，但许多团队仍选择开发自己。第二个是强大的灵活性，可以自定义功能。例如，当您触发异常时，您可以访问自己的指甲或公司微信消息。您的监视系统非常灵活。
我们在上面说，自定义收集规则。我认为这是最重要的原因。不同规则收集的数据不同，因此第三方标准的收集规则可能无法满足您公司的需求。例如，某些公司需要获得设备标识作为唯一ID，而某些公司需要用户徽标。这是由业务确定的，每个公司都不同。
我们公司的前端组是一个自我开发的前端监视平台。优势是您可以自定义自己的集合规则并设计自己的数据库存储字段。数据存储在您自己的平台上。灵活性和可靠性非常高，可以满足您的多样性需求。
首先，我们公司的前端监视是由前端组完成的，因此技术堆栈是。
这是一个更传统的技术解决方案。前端完成了，因此技术堆栈主要是同一时间，这也是可以在前端进行思考的更好的事情。这是标准解决方案。
其中，“ Node.js”部分我们使用框架编写接口。总体接口分为两个类别，即和谐，功能是在将前端收集到数据之后，该接口是通过调用接口来存储的。在监视表面版本上，数据查询也为通过接口显示。
接口背后是数据库，角色是存储我们收集的数据。为什么选择mongoDB？主要原因是其写作性能非常高，并且写作速度非常快。上面我们说，当监视系统为收集到的写作数据非常频繁，因此写作表现的要求很高。另一方面，查询不是必需的。
这里还有更多困难的观点，也就是说，在收集大量数据之后，我们需要对每个维度进行统计分析。例如：
这些更复杂的查询统计数据主要用于MongoDB。可以在前端编写基本的分组统计信息。我们要伸展了。如何做？我们将MongoDB聚合查询的所有文档长期播放，并根据需要查看可以实施哪个文件找到一个功能。几乎所有的综合函数再次翻转。
接口完成后，最终使用React来实现管理背景，以图表和表格的形式显示数据，您可以实时查看在线产品的使用情况。
当然，有一个步骤来编写用于钉指甲或公司微信的通知接口。当触发异常时，发起通知，以便我们可以及时知道异常情况。我们的通知是：
这些信息可以更全面地查看出现问题的地方。
简而言之，首先全面监视界面异常。确认数据还可以后，我们将转到前端检查。效率得到提高，锅较少。这不是两者的美丽吗？
最后，我们开发的小型系统在推出产品后发挥了重要作用，并受到老板的称赞。这使我们能够得到鼓励并继续改善它?
本文公开叙述的来源是成功的。
欢迎本文中的任何问题和建议与我交流。谢谢您的阅读？
原始：https：//juejin.cn/post/7096675256986763295