前言
随着网站应用越来越复杂，一个可靠的前端性能监控工具是非常重要的。zipkin-javascript-opentracing 是一个使用 OpenTracing API 的 JavaScript 实现，可以用来追踪和监控浏览器端和服务器端的应用。本文介绍了如何使用这个 npm 包来监控前端性能。
安装
使用 npm 可以方便地安装 zipkin-javascript-opentracing：
--- ------- -----------------------------
使用
初始化
首先需要创建一个 Tracer 对象，并指定要发送追踪数据的位置。可以使用以下代码：
----- - ---------- - - ----------------------------------------- ----- ------ - ------------ ------------ ------------- ------------------ --------------------------------------- ---
这里的 serviceName 是应用的名称，在不同的服务中应该是不同的。collectorEndpoint 是 zipkin server 的地址。
创建 spans
然后可以创建 spans 来追踪代码耗时：
-- ----- - --- ---- ----- ---------- - --------------------------------- -- -- ---- ---- -- ------ --- ---- --------------------
这里 startSpan 方法会创建一个新的 span，可以用来追踪代码的执行。finish 方法说明这个 span 已经完成。
连接 spans
如果有嵌套的代码执行，可以使用 childOf 方法来连接不同的 spans：
----- --------- - -------------------------------------- - -------- ---------- ---
这里的 childOf 参数指定了这个新的 span 是哪个 span 的子 span。
添加 tags
可以给 spans 添加自定义的 tags，表示例如请求参数等信息：
------------------------ ---------------------------
发送数据
最后，需要将追踪数据发送到 zipkin server：
----------------------------------- -------------------- ----------- ------------------- - -------- --------- --
这里使用了 inject 方法将 span 的上下文信息注入到 headers 中。然后发送请求到服务器并指定 headers。
示例
----- - ----------- ------------------- - - -----------------------------------------
----- ------ - ------------
------------ -------------
------------------ ---------------------------------------
---
-------- ---------- -
-- ----- - --- ----
----- ---------- - ------------------------------
-- --- ----
------------------------ ---------------------------
-- ----- ---
----- --------- - ---
----------------------------------- -------------------- -----------
------------------- -
-------- ---------
--
-------------- -- -
-- ------ ----
--------------------
------ ----------------
--
---------- -- -
------------------
--
------------ -- -
---------------------
---
-
-----------结论
zipkin-javascript-opentracing 是一个简单易用的前端性能监控工具，可以用在浏览器端和服务器端应用中。通过追踪和监控应用的每一次请求，可以更好的理解和优化应用性能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedb4bab5cbfe1ea061134c