前言
随着网站应用越来越复杂，一个可靠的前端性能监控工具是非常重要的。zipkin-javascript-opentracing 是一个使用 OpenTracing API 的 JavaScript 实现，可以用来追踪和监控浏览器端和服务器端的应用。本文介绍了如何使用这个 npm 包来监控前端性能。
安装
使用 npm 可以方便地安装 zipkin-javascript-opentracing：
npm install zipkin-javascript-opentracing
使用
初始化
首先需要创建一个 Tracer 对象，并指定要发送追踪数据的位置。可以使用以下代码：
const { initTracer } = require('zipkin-javascript-opentracing'); const tracer = initTracer({ serviceName: 'my-service', collectorEndpoint: 'http://myzipkin.com:9411/api/v2/spans' });
这里的 serviceName 是应用的名称，在不同的服务中应该是不同的。collectorEndpoint 是 zipkin server 的地址。
创建 spans
然后可以创建 spans 来追踪代码耗时：
// start a new span const parentSpan = tracer.startSpan('my-operation'); // do some work // finish the span parentSpan.finish();
这里 startSpan 方法会创建一个新的 span，可以用来追踪代码的执行。finish 方法说明这个 span 已经完成。
连接 spans
如果有嵌套的代码执行，可以使用 childOf 方法来连接不同的 spans：
const childSpan = tracer.startSpan('my-child-operation', { childOf: parentSpan });
这里的 childOf 参数指定了这个新的 span 是哪个 span 的子 span。
添加 tags
可以给 spans 添加自定义的 tags，表示例如请求参数等信息：
parentSpan.setTag('url', 'http://my-api.com/users');
发送数据
最后，需要将追踪数据发送到 zipkin server：
tracer.inject(parentSpan.context(), FORMAT_HTTP_HEADERS, myHeaders); fetch('/api/users', { headers: myHeaders })
这里使用了 inject 方法将 span 的上下文信息注入到 headers 中。然后发送请求到服务器并指定 headers。
示例
-- -------------------- ---- ------- ----- - ----------- ------------------- - - ----------------------------------------- ----- ------ - ------------ ------------ ------------- ------------------ --------------------------------------- --- -------- ---------- - -- ----- - --- ---- ----- ---------- - ------------------------------ -- --- ---- ------------------------ --------------------------- -- ----- --- ----- --------- - --- ----------------------------------- -------------------- ----------- ------------------- - -------- --------- -- -------------- -- - -- ------ ---- -------------------- ------ ---------------- -- ---------- -- - ------------------ -- ------------ -- - --------------------- --- - -----------展开代码
结论
zipkin-javascript-opentracing 是一个简单易用的前端性能监控工具，可以用在浏览器端和服务器端应用中。通过追踪和监控应用的每一次请求，可以更好的理解和优化应用性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb4bab5cbfe1ea061134c
