与可观测链路 OpenTelemetry 版前后端打通

在前端监控中,即便已知API的请求耗时,也无从知晓准确的网络传输性能、后端服务的调用链路及性能,因而无法快速准确地排查应用API问题。前后端链路追踪功能可以解决此类问题,它会将API请求从前端发出到后端调用的链路串联起来,真实还原代码执行的完整现场。

前提条件

您需要先通过npm方式安装探针,具体操作,请参见npm方式接入前端监控

背景信息

默认前端监控和应用监控都是自动打通的,通过前端监控和会话追踪都能查看端到端的请求追踪数据。当您使用OpenTracing协议(开源Trace ID,即uber-trace-id)的情况下,需要您手动将前端监控的JavaScript配置与可观测链路 OpenTelemetry 版前后端打通。API failure list

配置参数

当您通过npm方式安装探针时,需要完成以下参数配置。

const BrowserLogger = require('alife-logger');
const __bl = BrowserLogger.singleton({
    pid:"xxx",     // 站点ID
    appType:"web",
    enableLinkTrace:true,
    linkType: 'tracing', // 链路追踪类型:默认为arms,使用ARMS私有协议,会传EagleEye开头的几个header;可以改为tracing,即使用jaeger协议,会传uber-trace-id这个header
    enableApiCors: true  // 是否允许请求跨域及自定义header,默认值为false,设置为true后则需要后端服务支持
});                      
  • enableApiCors:true :需要后端服务支持请求跨域及自定义header值,否则请求会失败,如下图所示。请求失败

    若请求失败,您可以参考以下配置处理,以在Node.js应用中配置为例:

    //用于设置允许跨域访问该服务.
    app.all('*', function (req, res, next) {
      res.header('Access-Control-Allow-Origin', '*');
      res.header('Access-Control-Allow-Headers', 'Content-Type,uber-trace-id'); // linkType: 'tracing' 时,header值需要允许 uber-trace-id;linkType: 'arms'时,header值需要支持:EagleEye-TraceID、EagleEye-SessionID、EagleEye-pAppName
      res.header('Access-Control-Allow-Methods', '*');
      next();
    });                    
  • enableLinkTrace:true :开启后

    • 如果API请求与页面域名同源时,则默认会在header中增加traceId的透传,实现前后端链路追踪。

    • 如果API请求与页面域名非同源时,要实现前后端链路追踪,则需要同时配置enableApiCors:true,并且需要后端服务支持请求跨域及自定义header值。

      重要

      请确认所有请求都配合联调正常,否则会出现请求失败的问题。若请求失败,请参见上述在Node.js应用中配置的举例来处理。

  • linkType: 'tracing' :

    • arms(默认):使用ARMS私有协议,会传EagleEye开头的几个header。

    • tracing:使用Jaeger协议,会传uber-trace-id这个header。