前端性能监控可联动腾讯云应用性能监控实现前后端一体化监控。本文将为您介绍如何进行前后端链路打通,实现调用链路追踪,前后端异常联动排查。
说明
目前仅支持前后端均使用 Skywalking 协议的上报方式。
步骤一:接入 RUM SDK
1. 登录 前端性能监控。
2. 在左侧菜单栏中单击数据总览。
3. 在数据总览页中单击应用接入,根据下列表格配置创建应用信息。
4. 配置完后单击下一步,进入应用接入页面。根据页面提示接入 RUM SDK,并初始化 SDK。
说明
步骤二:后端使用 Skywalking 方式接入 APM
1. 在 资源管理页面 新建业务系统。
2. 进入 探针部署 页面,选择对应的业务系统,选择对应的语言和 Skywalking 方式接入应用。
3. 单击下一步:探针部署,根据探针部署步骤接入应用。
说明
步骤三:通过业务域名下的 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
引入示例如下:
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 是否上报正常
步骤六:使用方法
绑定后,单击相关链接即可调整到 APM 链路详情页。
实现调用链路追踪,排查后端异常原因。