You need to enable JavaScript to run this app.
导航
全链路场景接入
最近更新时间:2023.06.01 11:58:09首次发布时间:2022.08.01 12:10:41

全链路场景可以查看服务端到客户端整个链路的完整数据,帮助快速定位问题。本文介绍如何接入WebPro端监控的全链路打通场景。

前提条件

  • @apmplus/web >= 1.3.0
  • 接入最新版本的应用性能监控全链路版本服务端监控

注意事项

服务需要在响应头配置Access-Control-Allow-Headers来允许x-rum-traceparent和x-rum-tracestate请求头被传递。配置示例:
Access-Control-Allow-Headers: x-rum-traceparent, x-rum-tracestate
配置后需充分验证,否则请求可能会因为跨域错误导致发送失败。

接入示例

import client from '@apmplus/web'

client('init', {
 ...
  plugins: {
    ...
    fetch: {
      // 如果请求由fetch API 发出,则需要在fetch插件上配置
      trace: {
        sample: 1, //  trace 采样率,采样规则为会话采样,也就是一次会话中的符合要求的请求要么全部开启trace,要么全部不开启trace
        origins: ['xxx'],  // origins用作请求地址匹配,只有匹配上origins的请求才会开启trace
      }
    },
    ajax: {
      // 如果请求由xhr API发出,则需要在ajax插件上配置
      trace: {
        sample: 1, //  trace 采样率,采样规则为会话采样,也就是一次会话中的符合要求的请求要么全部开启trace,要么全部不开启trace
        origins: ['xxx'] // origins用作请求地址匹配,只有匹配上origins的请求才会开启trace
      }
    }
  },
  ...
})
  • 如果请求由fetch API发出,则需要在fetch插件上配置;如果请求由xhr API发出,则需要在ajax插件上配置。
  • 开启trace打通会给请求添加请求头,属于副作用,所以默认不开启trace。
  • 必须同时配置sampleRate和origins。
    • sampleRate代表trace采样率,采样规则为会话采样,也就是一次会话中的符合要求的请求要么全部开启trace,要么全部不开启trace。
    • origins用作请求地址匹配,只有匹配上origins的请求才会开启trace。

接入验证

如果@apmplus/web配置正确,对应的请求里会携带两个请求头,分别是X-Rum-Traceparent和X-Rum-Tracestate,同时在X-Rum-Tracestate中有携带当前的app_id。
图片
如果没有携带请求头,请自行排查SDK的版本是否 >= v1.3.0或者配置的结构是否正确。