腾讯云前端性能监控可联动腾讯云应用性能监控实现前后端一体化监控。本文将以 RUM 和 APM 全链路接入为例，简单介绍如何快速高效改造用户现有的业务，并且通过前后端 trace 打通的案例，实现调用链路追踪，帮助用户解决开发和排障中的实际问题。
背景
业务系统日益复杂
随着互联网产品的快速发展，不断变化的商业环境和用户诉求带来了纷繁复杂的业务需求。业务系统需要支撑的业务场景越来越广、涵盖的业务逻辑越来越多，系统的复杂度也跟着快速提升。与此同时，由于微服务架构的演进，业务逻辑的实现通常需要依赖多个服务间的共同协作。总而言之，业务系统的日益复杂已经成为一种常态。
业务追踪面临挑战
业务系统往往面临着多样的日常客诉和突发问题，“业务追踪”就成为了关键的应对手段。业务追踪可以看做一次业务执行的现场还原过程，通过执行中的各种记录还原出原始现场，可用于业务逻辑执行情况的分析和问题的定位，是整个系统建设中重要的一环。
说明：
目前建议前后端均使用 OpenTelemetry 协议的上报方式。
步骤1：接入 RUM SDK
1. 登录 腾讯云可观测平台。
2. 在左侧菜单栏中单击前端性能监控 > 数据总览。
3. 在数据总览页中单击应用接入，根据提示填写配置信息。
4. 配置完后单击下一步，进入应用接入页面。根据页面提示接入 RUM SDK，并初始化 SDK。
5. 开启下图对应配置参数，前端方面即已完成链路配置。
说明：
关键配置
字段 injectTraceHeader 会使 Aegis SDK 给所有监控的接口注入对应的请求头，并且自动生成相关协议字段。目前支持 traceparent、sw8、b3、sentry-trace。
协议 | 说明 |
traceparent | OpenTelemetry 的协议字段（推荐使用） |
sw8 | SkyWalking 的协议字段 |
b3 | Zipkin 跟踪协议字段 |
sentry-trace | Sentry 的协议字段 |
步骤2：后端使用 OpenTelemetry 方式接入 APM
1. 在 应用性能监控 > 资源管理 > 资源总览 页面，单击新建，创建业务系统。
2. 进入 应用监控 页面接入应用，选择对应的业务系统，选择对应的语言和 OpenTelemetry 方式接入应用。
说明：
步骤3：使用方法
当接口发生请求，产生历史日志时，您在 前端性能监控 > 日志查询 > 历史日志 可以选择字段 Trace，若该日志有 TraceID，可左键单击 TraceID。在弹框中单击自定义跳转配置，绑定 APM 业务系统。
绑定后，单击相关链接即可跳转到 APM 链路详情页，查看该条请求在整个链路下的状态。
实现调用链路追踪，排查后端链路异常原因，快速定位异常信息。
全链路打通方案
Trace 是如何打通的
接入 OpenTelemetry 后所有打桩的接口都会带上一个请求头，traceparent 或者 b3，这个请求头是 trace 打通的核心，它主要由 traceId 和 spanId 组成，traceId 会跟随这个接口一直向下，所有的内部服务和请求都带有该字段，每层服务生成对应的 span，最后根据 traceId 把所有 span 连起来形成了 trace 数据链。
如果 Aegis SDK 根据用户协议生成对应的 trace 关键字，并且带入到请求的 header 中，发现也可以实现这个效果：我们在项目验证中，去掉了所有 OpenTelemetry 的引入，然后 Aegis SDK 中 mock 了一个 traceparent，发现上报正常，trace 也可以正常生成。
不过对比这个 trace 的图发现这里 trace 起点是 tomcat，不是前端的 HTTP 请求，所以可以判断这里是缺少了 前端的 span。
因为没有在前端接入 OpenTelemetry 的 sdk，所以这里也不难理解为什么 trace 中少了前端的 span 了。
那么如果用户可以接受忽略 trace 缺少前端 span 这种情况，其实当前的方案已经可以满足 90% 的问题查询 case 了，缺点可能就是如果请求链路在网络层或者 CLB 层断掉的话，就没办法发现断掉的原因。除此之外，前端的数据可以在 RUM 上看，后端的链路可以在 APM 上查看。
于是我们对当前 Aegis SDK 进行优化，可以适配不同全链路协议的请求头。
SDK 全新接入方案
通过 injectTraceHeader 参数，Aegis SDK 会给所有监控的接口注入对应的请求头，并且自动生成相关协议字段。
对比之前需要几十行的接入代码，并且需要非常复杂的 Nginx 转发配置，当前方案极大的减少了开发者的使用负担。从性能的角度来看，当前方案上报的数据量也远远少于之前的方案，开发者也不需要详细理解 trace 协议的原理，只需要配置即可，可以说是比较方便地实现了“无侵入接入”。
import Aegis from 'aegis-web-sdk'; // 或者通过 cdn 的方式引入new Aegis({id: 'xxxxxx',api: {injectTraceHeader: 'traceparent', // 注意这里目前支持 traceparent，b3，sw8，sentry-traceinjectTraceIgnoreUrls: ['/v1/traces', /rumt-zh.com/], // 忽略不参与注入的接口},});
常见问题
前端接口请求头跨域？
部分接口具有严格跨域限制，不允许在 header 中添加额外参数，Traceparent 的注入会导致其跨域。可以使用如下两种方式解决：
采用 injectTraceIgnoreUrls: Array，数组中传入 string 或者 RegExp。标记不需要注入 trace 请求头的请求 url 。
采用 injectTraceUrls: Array，数组中传入 string 或者 RegExp。标记需要注入 trace 请求头的请求 url 进行全链路追踪。（推荐）
推荐原因： 用户侧请求环境复杂，采用 injectTraceIgnoreUrls 则需要枚举出全部当前项目关联的 ignore request，恐有遗漏。采用 injectTraceUrls 方式，则链路 request 请求的主动权在用户侧，可灵活配置。
验证 RUM 和 APM 是否上报正常
验证 RUM 是否上报成功
1. 首先，可以在浏览器控制台看到您的业务接口Request headers中存在对应协议参数 ，例如 Traceparent。
2. 其次在 页面性能 中查看是否有数据显示，若有数据上报则表示上报成功。
验证 APM 是否上报成功
