构建前后端一体化可观测场景，原来只需5步！

背景

当用户 APP 或小程序购买商品，遇到突然闪退，请求超时或者下单失败，前端页面响应慢等终端问题，可能会直接导致用户流失。

这种看似简单的终端问题，既可能是前端程序问题导致，也可能是因为中间件或数据库故障或者后端服务的错误。有时候在前端排查出异常，也很难直接定位到后端哪个应用或服务导致的，无法明确给出确定性的根因。

前后端一般通过请求进行交互，当服务出现异常时，开发人员需要回溯当时所有操作，进行异常分析与定位。单点监控导致前后端数据无法串联，无法完整回溯所有行为，且定位问题成本较高。

用户终端发起请求开始，到服务器执行完把结果返回给用户，整条链路要经过多个前后端相关的环节，如下图所示。并且一些服务模块之间的调用关系错综复杂，对于客户端请求的分析与处理就会显得异常复杂。对于多数企业来说，使用开源自建方案实现前后端链路打通，有较高学习成本和人力成本，同时也容易遇到性能瓶颈，需要频繁调优，后期维护成本和资源投入成本也较高。

为了解决此类问题，腾讯云前端性能监控（RUM）联合腾讯云应用性能观测（APM）推出前后端链路打通方案，实现前后端可观测性全覆盖，可将 API 请求从前端发出到后端调用的链路串联，真实还原代码执行的完整故障现场。同时还支持 API 错误诊断、异常信息告警、场景化链路拓扑分析、多维分析等功能。帮助企业先于用户发现问题，快速排障，保障终端顺畅使用。

‍

操作文档

步骤流程：

说明：
目前仅支持前后端均使用 Skywalking 协议的上报方式。

步骤一：接入 RUM SDK

登录前端性能监控控制台

（https://console.cloud.tencent.com/rum）

在左侧菜单栏点击应用管理>业务系统>创建业务系统，根据页面提示创建业务系统。
进入数据总览页，单击应用接入，根据提示配置应用基本信息。
配置完后单击下一步，进入应用接入页面。根据页面提示接入 RUM SDK，并初始化 SDK。

说明：
详细接入步骤可参考前端性能监控应用接入官方文档：https://cloud.tencent.com/document/product/1464/58145。

步骤二：前端引入 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/] // 需要屏蔽上报的接口});