有奖捉虫:办公协同&微信生态&物联网文档专题 HOT
前端性能监控可联动腾讯云应用性能监控实现前后端一体化监控。本文将为您介绍如何进行前后端链路打通,实现调用链路追踪,前后端异常联动排查。
说明
目前仅支持前后端均使用 Skywalking 协议的上报方式。

步骤一:接入 RUM SDK

1. 登录 前端性能监控
2. 在左侧菜单栏中单击数据总览
3. 在数据总览页中单击应用接入,根据下列表格配置创建应用信息。
4. 配置完后单击下一步,进入应用接入页面。根据页面提示接入 RUM SDK,并初始化 SDK。
说明
详细接入步骤可参见 应用接入




步骤二:后端使用 Skywalking 方式接入 APM

1. 资源管理页面 新建业务系统。

2. 进入 探针部署 页面,选择对应的业务系统,选择对应的语言和 Skywalking 方式接入应用。


3. 单击下一步:探针部署,根据探针部署步骤接入应用。
说明
目前支持 Java 、Go、PHP 应用接入方式,详细请参见 应用性能监控 - 接入指南

步骤三:通过业务域名下的 Nginx 配置开启 Skywalking 上报接口转发

使用 Nginx 的作用有下列三个:
解决上报接口跨域问题。
请求头中加入 token 以方便上报接口校验。
转发请求到应用性能监控(APM)的服务中。
以下是 Nginx 配置信息,Skywalking sdk 上报接口是 “/v3/segments”
location /v3/segments {
proxy_set_header authentication BaFdLUhcs*********YhY;
add_header Access-Control-Allow-Headers 'sw8';
proxy_pass https://ap-guangzhou.apm.tencentcs.com:12800/v3/segments;
}
说明
Authentication 为步骤二中在应用性能监控控制台获取的 token。加入 header ‘sw8’ 是因为 Skywalking SDK 会注入 sw8 header 到请求头中,导致请求跨域,因此加入响应头以解决跨域的问题。

步骤四:前端引入 Skywalking SDK

在前端页面引入 Skywalking SDK
引入示例如下:
ClientMonitor.register({
collector: 'https://xxx.yy.com', // 上报域名,前面配置跨域的
service: 'service-name',
pagePath: location.href,
serviceVersion: 'v1.0.0',
useFmp: true,
autoTracePerf: true,
traceSDKInternal: true,
enableSPA: true,
traceTimeInterval: 2000,
noTraceOrigins: [/aegis.qq.com/] // 需要屏蔽上报的接口
});

步骤五:验证 APM 和 RUM 是否上报正常

验证 APM 是否上报正常

资源管理页面 查看是否有数据上报量,若有数据上报则表示上报成功。



验证 RUM 是否上报正常

页面性能 查看是否有数据显示,若有数据上报则表示上报成功。



步骤六:使用方法

当接口发生请求,产生历史日志时,您在 历史日志 可以选择字段选择 Trace,若该日志有 TraceID,可左键单击 TraceID。在弹框中单击自定义跳转配置,绑定 APM 业务系统。



绑定后,单击相关链接即可调整到 APM 链路详情页。


实现调用链路追踪,排查后端异常原因。