前言

假设你是一名前端开发人员，在使用产品的过程中，有用户反馈遇到了故障，但是故障发生的上下文是未知的。

你不知道故障发生在哪个页面，也不知道如何操作才能复现该故障，更不清楚发生故障的用户的客户端环境是怎样的。这些上下文信息都对故障排查有很大的帮助，但是要通过找到出问题的客户去沟通了解这些信息的成本非常高，一来二去时间过去故障的影响范围可能还会逐步扩大。

然而，ZCAT是一款全面的APM(应用程序性能监控)产品，它提供了前端监控ZCAT SDK，能够同时监控页面性能及JS报错、API报错等多项数据，并提供了告警推送、错误详情、链路追踪等多项能力。

通过ZCAT，可以快速了解故障发生的上下文信息，减少故障排查时间，提高生产效率。而通过告警通知，开发人员可以及时介入，降低故障影响范围，提升用户体验，保持用户忠诚度。

功能介绍

ZCAT提供了全链路性能监控、错误监控、告警推送、性能分析等多项能力，让你可以全面了解应用的健康状况。在前端性能监控方面，ZCAT SDK能够实时监测页面加载速度、AJAX请求、JS错误等多种指标，帮助你快速定位前端问题所在。同时，ZCAT提供了灵活的自定义报警规则，让你可以快速响应故障，保障业务的顺畅运行。

下图为后台页面及各个功能模块的划分

zcat提供了大盘告警、应用告警两种告警能力配置

大盘告警提供红黄绿三种颜色的显示功能，用于提示应用程序当前的状态

点击大盘告警应用可以直接跳转到错误的详情页面

应用告警区别于大盘告警，提供了更加灵活和颗粒度更细的告警能力，支持设置多个自定义告警条件和阈值的组合、宝盒/邮箱多种通知方式。

告警通知会推送到中通宝盒的故障群内，通过告警通知可以直接跳转到对应的告警详情

JS排错模块的错误列表展示了最近发生的JS错误的概览信息，包括错误信息、影响到的用户人数和错误发生次数以及修复状态等。开发者可以通过错误列表了解近期发生的错误，以及这些错误的影响范围。

JS排错模块的错误详情页面中，标签提供了错误发生页面、用户信息、客户端环境、IP地址等信息。这些信息能够帮助开发者更好地理解错误发生的环境，从而更快地解决问题。

错误堆栈根据sourcemap映射，提供了程序错误运行时的堆栈信息。堆栈信息可以告诉开发者程序出错的根本原因，帮助开发者更好地理解错误发生的过程。

交互链路记录了错误发生前用户的操作行为，包括了页面跳转、API请求、点击事件等信息。这些信息能够帮助开发者了解用户的使用行为，更好地模拟错误发生的场景，从而更好地解决问题。

API列表提供了全面的请求数据概览，包括调用次数、失败率等重要数据。通过查看API列表，开发者可以深入了解API的调用情况和性能表现，及时发现异常情况并采取措施进行解决。

通过点击错误API可以查看API的错误请求列表。在列表中，可以获取到API的状态码、耗时、上报时间等信息。而通过Trace ID，则可以跳转到链路追踪查询页面，查看请求调用的完整链路。

ZCAT可以记录请求的各种信息，包括参数、载体、头部和调用链路。使用Trace ID来关联请求节点，形成完整的请求链路。这样我们可以更方便地分析请求在整个系统中的流转情况，找出问题。

后续展望

探索：结合lighthouse的页面性能分析能力、报错录屏复现能力。通过结合lighthouse的页面性能分析能力，可以更全面地了解页面的性能表现，进一步优化网站页面的性能。同时，通过报错录屏复现能力，可以更方便地复现用户遇到的问题，加快问题解决的速度。

梳理：针对高频错误梳理通用的解决优化方案。通过对高频错误进行梳理，可以发掘出问题的共性和规律，为问题的解决提供更加通用和有效的解决方案。这不仅可以提高问题解决的速度，也可以提高产品的质量和用户体验。

总之，不断探索新的技术和方法，总结经验，优化产品和服务，是ZCAT团队持续发展和提升的关键。