在前端开发中，随着复杂度的增加和系统的庞大，很多问题变得越来越难以排查。而跟踪系统的调用和性能却可以帮助我们快速定位问题。@rxcc/tracing 是一个用于前端性能跟踪的 npm 包，可以帮助我们监控 web 应用程序的响应时间、请求时间和其他性能指标，并生成用户可以查看的跟踪图。
安装
在开始编写代码之前，我们需要先安装该 npm 包：
npm install @rxcc/tracing
或者
yarn add @rxcc/tracing
使用
在你的应用程序中，你可以使用 @rxcc/tracing 轻松跟踪你的应用程序的所有事件。
-- -------------------- ---- ------- ------ ------- ---- --------------- ---------------- ------ -------------- --------- --------------- -- -------------------- --- ------------------
以上便是一个简单的访问示例。分别使用 startTrace 和 endTrace 方法开始和结束跟踪，它们将分别记录时间戳和名称，以便跟踪执行时间。但是，在实际情况中，可能需要跟踪更多的信息，例如：
- HTTP 或者 WebSocket 的请求时间
- 自定义事件处理时间
- 渲染事件的时间
监控 HTTP 或 WebSocket 请求时间
对于 XMLHttpRequest 和 WebSocket 请求，我们可以在 async/await 时使用 @rxcc/tracing 提供的 async/await hook：
-- -------------------- ---- ------- ------ ------- ---- --------------- ------ ------- ---- ---------------------------- ------ ------------- ---- ---------------------------------- ------ ----- ---- ------- ---------------- ---------------------- ---------------- ------ -------------- --------- --------------- -- -------------------- ----- --------------------------------------------------- ----- ---------------------------------------------- ------------------
注意，如果正在使用的是非异步 HTTP 调用，则应使用 xhrHook 和 websocketHook 来手动记录异步 HTTP 请求开始和结束时间。例如：
-- -------------------- ---- ------- ------ ------- ---- --------------- ------ ------- ---- ---------------------------- ------ - -------------- - ---- ---------------- ---------------- ---------------- ------ -------------- --------- --------------- -- -------------------- ----- --- - --- ---------------- --------------- ----------------------------------------- ---------- - -- -- -- ---------- ------------------
现在我们可以通过跟踪图来查看 HTTP 请求的时间和事件。
监控自定义事件
使用 @rxcc/tracing 可以轻松监控自定义事件的处理时间。只需要使用 withTracing 前缀或后缀方法包装你的代码即可。
-- -------------------- ---- ------- ------ ------- ---- --------------- ---------------- ------ -------------- --------- --------------- -- -------------------- ----------------------------------------- -- -- - --- -- ------------------
使用这种方式进行自定义跟踪时，我们需要注意一些细节：
- 包装的函数会作为参数传递给
withTracing方法 - 与异步请求一样，如果计划外终止，则应使用异常处理程序
- 函数名称不应太长，以免图形显示不便
总结
使用 @rxcc/tracing 使我们能够轻松跟踪并监控 web 应用程序中大量的性能事件。通过跟踪图，我们可以了解应用程序的性能问题，并优化我们的代码。本文主要介绍了安装和使用 @rxcc/tracing 的基本步骤，还提供了一些代码示例。我希望本文可以为那些正在探索前端跟踪的人提供一些指导和建议。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c9781e8991b448ebf53