全部產品
Search
文件中心

Application Real-Time Monitoring Service:Web端監控關聯前後端Trace

更新時間:Oct 16, 2024

ARMS使用者體驗監控支援以使用者會話作為切入點,追蹤使用者與應用互動過程中的錯誤、緩慢、異常問題,通過與ARMS應用監控聯動,實現端到端分析,協助您打通問題分析鏈路。本文介紹Web端監控如何?端到端Trace打通。

前提條件

  • 確保您的前端應用(包含Web、小程式)已接入使用者體驗監控。具體操作,請參見接入Web & H5應用接入小程式

  • 確保您的後端應用,已接入ARMS應用監控或Managed Service for OpenTelemetry。具體操作,請參見接入指南

  • 確保您的後端應用有提供Web服務(HTTP),用於解析Header,關聯Trace上下文。

支援的Trace協議類型

目前使用者體驗監控關聯Trace功能已支援以下主流Trace透傳協議:

  • w3c:包含OpenTelemetry用戶端以及ARMS探針。

  • b3/b3multi:Zipkin

  • jaeger

  • sw8:SkyWalking

開啟RUM關聯Trace

請在為前端應用在接入RUM探針時開啟鏈路追蹤配置項。

重要

開啟RUM關聯Trace會額外產生一部分Trace資料,這將對您的應用監控或Managed Service for OpenTelemetry的賬單產生一些影響。

CDN同步

極簡模式

重要

該方式只推薦在瀏覽器中使用,小程式由於不存在同域請求的概念,所以必須使用完整模式接入,並配置allowedUrls。

常用於不需要跨域請求,後端預設採取OTel標準。allowedUrls類型為undefined,但會對同域請求加白。

<script>
  window.__rum = {
    pid: "<your pid>",
    endpoint: "<your endpoint>",
    //...此處省略其他配置項
    // 鏈路追蹤配置開關,預設關閉
    tracing: true //等效於 { enable: true,  sample: 100, tracestate: true, allowedUrls:[], baggage: false }
  };
</script>
<script type="text/javascript" src="https://sdk.rum.aliyuncs.com/v2/browser-sdk.js " crossorigin></script>

完整模式

全量配置,用於對所有配置都進行控制,allowedUrls類型為Array<TraceOption>。

<script>
  window.__rum = {
    pid: "<your pid>",
    endpoint: "<your endpoint>",
    //...此處省略其他配置項
    // 鏈路追蹤配置開關,預設關閉
    tracing: {
      enable: true, // 開啟鏈路追蹤,預設關閉
      sample: 60, // 採樣率60%,預設100%
      tracestate: true, // 開啟tracestate的透傳,預設開啟
      baggage: false, // 關閉baggage的透傳,預設關閉
      allowedUrls:[
        {match: 'https://api.aliyun.com', propagatorTypes:['tracecontext', 'b3']}, // 字元匹配 https://api.aliyun.com開頭,使用w3c標準
        {match: /api\.alibaba\.com/i, propagatorTypes:['b3multi']}, // 正則匹配包含api.aliyun.com,使用b3multi多頭標準
        {match: (url)=>url.includes('.api'), propagatorTypes:['jaeger']}, // 函數判斷包含.api, 使用jaeger標準
      ]
    }
  };
</script>
<script type="text/javascript" src="https://sdk.rum.aliyuncs.com/v2/browser-sdk.js " crossorigin></script>

CDN非同步

極簡模式

重要

該方式只推薦在瀏覽器中使用,小程式由於不存在同域請求的概念,所以必須使用完整模式接入,並配置allowedUrls。

常用於不需要跨域請求,後端預設採取OTel標準。allowedUrls類型為undefined,但會對同域請求加白。

<script>
  !(function(c,b,d,a){c[a]||(c[a]={});c[a].config=
    {
      pid: "<your pid>",
      endpoint: "<your endpoint>",
      //...此處省略其他配置項
      // 鏈路追蹤配置開關,預設關閉
      tracing: true
    }
   with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
  })(window,document,"https://sdk.rum.aliyuncs.com/v1/bl.js","__bl");
</script>
完整模式

全量配置,用於對所有配置進行控制,allowedUrls類型為Array<TraceOption>。

<script>
  !(function(c,b,d,a){c[a]||(c[a]={});c[a].config=
    {
      pid: "<your pid>",
      endpoint: "<your endpoint>",
      //...此處省略其他配置項
      // 鏈路追蹤配置開關,預設關閉
      tracing: {
        enable: true, // 開啟鏈路追蹤,預設關閉
        sample: 100, // 採樣率,預設100%
        tracestate: true, // 開啟tracestate透傳,預設開啟
        baggage: true, // 開啟baggage透傳,預設關閉
        allowedUrls:[
          {match: 'https://api.aliyun.com', propagatorTypes:['tracecontext', 'b3']}, // 字元匹配 https://api.aliyun.com開頭,使用w3c標準
          {match: /api\.alibaba\.com/i, propagatorTypes:['b3multi']}, // 正則匹配包含api.aliyun.com,使用b3multi多頭標準
          {match: (url)=>url.includes('.api'), propagatorTypes:['jaeger']}, // 函數判斷包含.api, 使用jaeger標準
        ]
      }
    }
    with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
   })(window,document,"https://sdk.rum.aliyuncs.com/v1/bl.js","__bl");
</script>

NPM包

極簡模式

重要

該方式只推薦在瀏覽器中使用,小程式由於不存在同域請求的概念,所以必須使用完整模式接入,並配置allowedUrls。

常用於不需要跨域請求,後端預設採取OTel標準。allowedUrls類型為undefined,但會對同域請求加白。

import ArmsRum from '@arms/rum-browser';

ArmsRum.init({
  pid: 'your pid',
  endpoint: 'your endpoint',
  //...此處省略其他配置項
  // 鏈路追蹤配置開關,預設關閉
  tracing: true, //等效於 { enable: true,  sample: 100, tracestate: true, allowedUrls:[], baggage: false }
});
完整模式

全量配置,用於對所有配置進行控制,allowedUrls類型為Array<TraceOption>。

import ArmsRum from '@arms/rum-browser';

ArmsRum.init({
  pid: "your pid",
  endpoint: "your endpoint",
  //...此處省略其他配置項
  tracing: {
    enable: true, // 開啟鏈路追蹤,預設關閉
    sample: 100, // 採樣率,預設100%
    tracestate: true, // 開啟tracestate透傳,預設開啟
    baggage: true, // 開啟baggage透傳,預設關閉
    allowedUrls:[
      {match: 'https://api.aliyun.com', propagatorTypes:['tracecontext', 'b3']}, // 字元匹配 https://api.aliyun.com開頭,使用w3c標準
      {match: /api\.alibaba\.com/i, propagatorTypes:['b3multi']}, // 正則匹配包含api.aliyun.com,使用b3multi多頭標準
      {match: (url)=>url.includes('.api'), propagatorTypes:['jaeger']}, // 函數判斷包含.api, 使用jaeger標準
    ]
  }
});

Tracing配置項

欄位

類型

預設值

備忘

tracing.enable

Boolean

true

傳入非Boolean類型時,會被重設為true。

tracing.sample

Number

100

取值範圍[0,100],其他類型任何值都會被重設為100。

tracing.tracestate

Boolean

true

預設開啟,僅w3c tracecontext模式下才會生效,其他模式不存在tracestate概念。

配置為false後,w3c模式下不會攜帶tracestate要求標頭。

tracing.baggage

Boolean

false

開啟鏈路追蹤時,RUM監控會在要求標頭中加入baggage,並攜帶相關資訊,不區分tracing標準。

tracing.propagatorTypes

PropagatorType | PropagatorType[]

null

當前Trace採用的傳遞標準。

注意:

  • 如果allowedUrls配置了propagatorTypes,則當前配置會被覆蓋。

  • 如果配置中包含sw8,則其他類型的配置會自動失效,只保留sw8標準。

tracing.allowedUrls

Array<MatchOption | TraceOption> | undefined

undefined

允許使用鏈路追蹤的請求地址

  1. 當在瀏覽器時,同域請求會被預設允許,跨域請求需要配置allowedUrls才會生效

  2. 在小程式情況下,allowedUrls是必須配置才會生效

瀏覽器情況下tracing.allowedUrls會增加以下規則:

{
  match: (url) => (/^https?:\/\/*/.test(url) || startsWith(url, location.origin)),
  propagatorTypes: ['tracecontext']
}

MatchOption

type MatchOption = string | RegExp | ((value: string) => boolean);

allowedUrls與完整URL匹配。接受以下類型:

  • string:匹配任何以該值開頭的URL,如https://api.aliyun.com可以匹配https://api.aliyun.com/v1/resource

  • RegExp:使用提供的RegExp和URL執行test。

  • function:以URL作為參數進行計算,返回true表示匹配。

PropagatorType

預設情況下,基於OpenTelemetry使用的是tracecontext。

type PropagatorType = 'tracecontext' | 'b3' | 'b3multi' | 'jaeger' | 'sw8';

以上幾種Trace協議,透傳的Header如下:

透傳格式名稱

格式

tracecontext

traceparent : {version}-{trace-id}-{parent-id}-{trace-flags}

tracestate: rum={version}&{appType}&{pid}&{sessionId}

b3

b3: {TraceId}-{SpanId}-{SamplingState}-{ParentSpanId}

b3multi

X-B3-TraceId: {TraceId}

X-B3-SpanId: {SpanId}

X-B3-ParentSpanId: {ParentSpanId}

X-B3-Sampled: {SamplingState}

jaeger

uber-trace-id : {trace-id}:{span-id}:{parent-span-id}:{flags}

sw8

sw8: {sample}-{trace-id}-{segment-id}-{0}-{service}-{instance}-{endpoint}-{peer}

重要

以上各協議透傳的Request Header,並不是標準的HTTP要求標頭,也不在CORS安全清單中(有時也稱為:CORS-safelisted request-headers)。因此,當您的網站或應用存在跨域請求時(尤其是在小程式等情境),需要在服務端的Access-Control-Allow-Headers中明確指定。否則,跨域請求會因CORS策略而被瀏覽器攔截。

驗證RUM關聯Trace

Web & H5

  1. 訪問您的網站或者Web H5頁面。

  2. 開啟瀏覽器控制台,切換到Network(網路)頁簽。

  3. 檢查前端發起的請求(注意是API請求,類型為:XHR/Fetch),查看要求標頭(Request Headers)中是否包含對應透傳協議的Header。

小程式(支付寶/微信/DingTalk)

  1. 使用小程式開發人員模擬器運行。

  2. 開啟開發人員工具調試器,切換到網路(Network)Tab頁。

  3. 檢查小程式發起的Request要求標頭中是否包含對應的透傳協議的Header。

配置後端應用Trace串聯

為了打通完整Trace鏈路,還需要對後端應用進行配置,目前支援的後端應用類型以及接入方式如下:

Java應用

使用ARMS應用監控探針接入

ARMS應用監控探針預設整合了對OpenTelemetry協議的支援,因此無需額外配置,即可實現與RUM Trace關聯,但需要確保以下兩點:

  • 支援的ARMS應用監控探針版本:2.x、3.x、4.x,為了獲得更好的使用體驗,推薦升級到4.x版本。

  • 支援的Web容器和架構:支援Tomcat、Jetty、WebLogic、Undertow等主流Web容器,以及SpringBoot、SpringMVC等架構。支援的完整組件和架構請參見ARMS應用監控支援的Java組件和架構

ARMS應用監控探針接入操作請參見開始監控Java應用

使用OpenTelemetry接入

通過OpenTelemetry接入ARMS(Managed Service for OpenTelemetry),目前分為兩種方式:自動埋點和手動埋點。

  • 自動埋點情境下,由於OpenTelemetry已經支援了絕大多數主流架構,因此,無需額外配置,即可實現與RUM Trace的串聯。

    說明

    OpenTelemetry支援的Java架構,請參見通過OpenTelemetry上報Java應用資料

  • 手動埋點情境下,需要通過OpenTelemetry SDK提供的擴充機制,實現與RUM Trace的串聯,即從前端要求標頭(traceparent、tracesate)中,解析出Trace上下文,以下是Springboot情境程式碼範例:

    1. 引入OpenTelemetry的依賴項。

      <dependency>
        <groupId>io.opentelemetry</groupId>
        <artifactId>opentelemetry-api</artifactId>
      </dependency>
      <dependency>
        <groupId>io.opentelemetry</groupId>
        <artifactId>opentelemetry-sdk-trace</artifactId>
      </dependency>
      <dependency>
        <groupId>io.opentelemetry</groupId>
        <artifactId>opentelemetry-extension-annotations</artifactId>
        <version>1.18.0</version>
      </dependency>
      <dependency>
        <groupId>io.opentelemetry</groupId>
        <artifactId>opentelemetry-exporter-otlp</artifactId>
      </dependency>
      <dependency>
        <groupId>io.opentelemetry</groupId>
        <artifactId>opentelemetry-sdk</artifactId>
      </dependency>
      <dependency>
        <groupId>io.opentelemetry</groupId>
        <artifactId>opentelemetry-semconv</artifactId>
        <version>1.30.1-alpha</version>
      </dependency>
      <dependency>
        <groupId>io.opentelemetry</groupId>
        <artifactId>opentelemetry-sdk-extension-autoconfigure</artifactId>
        <version>1.34.1</version>
      </dependency>
      <dependency>
        <groupId>io.opentelemetry</groupId>
        <artifactId>opentelemetry-extension-incubator</artifactId>
        <version>1.35.0-alpha</version>
      </dependency>
    2. 在OpenTelemetry初始化時,添加W3C Propagator。

      Resource resource = Resource.getDefault()
              .merge(Resource.create(Attributes.of(
                      ResourceAttributes.SERVICE_NAME, "otel-demo",
                      ResourceAttributes.HOST_NAME, "xxxx"
      )));
      
      SdkTracerProvider sdkTracerProvider = SdkTracerProvider.builder()
              .addSpanProcessor(BatchSpanProcessor.builder(OtlpHttpSpanExporter.builder()
                      .setEndpoint("Your Endpoint")
                      .addHeader("Authentication", "Your Token")
                      .build()).build())
              .setResource(resource)
              .build();
      
      openTelemetry = OpenTelemetrySdk.builder()
              .setTracerProvider(sdkTracerProvider)
              // 這裡添加W3C Propagator
              .setPropagators(ContextPropagators.create(
                      TextMapPropagator.composite(W3CTraceContextPropagator.getInstance(), W3CBaggagePropagator.getInstance()))
               ).buildAndRegisterGlobal();
      // 這裡需要使用擴充的Tracer
      tracer = ExtendedTracer.create(openTelemetry.getTracer("com.example.tracer", "1.0.0"));
    3. 在業務介面中,添加headers參數,並從要求標頭中解析Trace上下文,設定parent。

      // Controller中添加請求header參數,用於解析Trace上下文
      @RequestMapping("/test")
      public String test(@RequestHeader Map<String, String> headers) {
          Span span = OpenTelemetrySupport.getTracer()
                  .spanBuilder("/test")
                  // 從headers中解析parent span
                  .setParentFrom(OpenTelemetrySupport.getContextPropagators(), headers)
                  .setSpanKind(SpanKind.SERVER)
                  .startSpan();
          try (Scope scope = span.makeCurrent()) {
              // do something
          } catch (Throwable t) {
              span.setStatus(StatusCode.ERROR, "handle parent span error");
          } finally {
              span.end();
          }
          return "success";
      }

使用Jaeger接入

Jaeger目前針對Web情境,提供了:手動埋點和通過Spring Cloud組件埋點兩種方式。完整接入方式請參見通過Jaeger上報Java應用資料

  • 通過SpringCloud組件埋點情況下,無需額外配置即可與RUM Trace打通。

  • 手動埋點情境下,需要自行從前端請求header中解析Trace上下文。代碼配置樣本如下:

    1. 引入依賴項。

      <dependency>
        <groupId>io.jaegertracing</groupId>
        <artifactId>jaeger-client</artifactId>
        <version>最新版本</version> <!-- 確保使用最新的Jaeger版本 -->
      </dependency>
    2. 初始化Tracer。

      請將<endpoint>替換成Managed Service for OpenTelemetry控制台叢集配置 > 存取點資訊頁面相應用戶端和地區的存取點。

      // 將manualDemo替換為您的應用程式名稱。
      io.jaegertracing.Configuration config = new io.jaegertracing.Configuration("manualDemo");
      io.jaegertracing.Configuration.SenderConfiguration sender = new io.jaegertracing.Configuration.SenderConfiguration();
      // 將 <endpoint> 替換為控制台概覽頁面上相應用戶端和地區的存取點。
      sender.withEndpoint("<endpoint>");
      config.withSampler(new io.jaegertracing.Configuration.SamplerConfiguration().withType("const").withParam(1));
      config.withReporter(new io.jaegertracing.Configuration.ReporterConfiguration().withSender(sender).withMaxQueueSize(10000));
      GlobalTracer.register(config.getTracer());
    3. 在業務介面中建立Span,可參考以下代碼進行Trace關聯。

      // Controller中添加請求header參數,由於解析Trace上下文
      @RequestMapping("/test")
      public String test(@RequestHeader Map<String, String> headers) {
          Tracer tracer = GlobalTracer.get();
          SpanContext parentCtx = tracer.extract(Format.Builtin.HTTP_HEADERS, new TextMapAdapter(headers));
          Span span;
          if (parentCtx != null) {
              span = tracer.buildSpan("/test").asChildOf(parentCtx).start();
          } else {
              span = tracer.buildSpan("/test").start();
          }
          try (Scope ignored = tracer.activateSpan(span)) {
              tracer.activeSpan().setTag("methodName", "test");
              // do something
          } catch (Throwable t) {
              TracingHelper.onError(e, span);
              throw e
          } finally {
              span.finish();
          }
          return "success";
      }

使用Zipkin接入

完整接入方式請參見通過Zipkin上報Java應用資料

按照文檔接入,然後在服務端代碼中,從Request Header中解析Context,實現與RUM Trace串聯。

// 從request header解析Context
extractor = tracing.propagation().extractor(Request::getHeader);

// convert that context to a span which you can name and add tags to
oneWayReceive = nextSpan(tracer, extractor.extract(request))
.name("process-request")
.kind(SERVER)
... add tags etc.

// start the server side and flush instead of finish
oneWayReceive.start().flush();

// you should not modify this span anymore as it is complete. However,
// you can create children to represent follow-up work.
next = tracer.newSpan(oneWayReceive.context()).name("step2").start();

使用SkyWalking接入

完整接入方式請參見Java Agent外掛程式

SkyWalking目前僅提供了Java Agent接入方式,您只需要按照上述文檔接入,即可實現RUM與後端Trace串聯。

和RUM側配置的協議匹配要求:sw8(v3版本)對應SkyWalking 8.x版本探針。

Go應用

通過OpenTelemetry接入

完整接入方式請參見通過OpenTelemetry上報Go應用資料

按照文檔接入,然後在HTTP請求Handler中,通過request context產生Span,即可實現與RUM Trace串聯。

// 初始化tracer
tracer := otel.Tracer(common.TraceInstrumentationName)
// 通過request context產生span
handler := http.HandlerFunc(func(w http.ResponseWriter, req *http.Request) {
    ctx := req.Context()
    span := trace.SpanFromContext(ctx)
    // do something
    w.Write([]byte("Hello World"))
})

通過Jaeger接入

完整接入方式請參見通過Jaeger上報Go應用資料

按照文檔接入,然後從HTTP要求標頭中解析Span上下文,實現與RUM Trace串聯,程式碼範例如下:

// 從HTTP對象解析出spanCtx。
spanCtx, _ := tracer.Extract(opentracing.HTTPHeaders, opentracing.HTTPHeadersCarrier(r.Header))
span := tracer.StartSpan("myspan", opentracing.ChildOf(spanCtx))
...
defer  span.Finish()

通過Zipkin接入

完整接入方式請參見通過Zipkin上報Go應用資料

按照文檔接入,然後從HTTP要求標頭中解析Span上下文,實現與RUM Trace串聯,程式碼範例如下:

// 初始化tracer
tracer, err := exampletracer.NewTracer("go-frontend", frontendPort)
// 通過request context產生span
router.Methods("GET").Path("/").HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
    // retrieve span from context
	span := zipkin.SpanFromContext(r.Context())
    // add some tag
    span.Tag("some_key", "some_value")
    // do something...
	span.Annotate(time.Now(), "some_event")
})

使用SkyWalking接入

完整接入方式請參見通過SkyWalking上報Go應用資料

按照文檔接入,推薦採用skywalking-go接入方式,該方式支援了主流的Web服務架構,如gin、go-restful、http、go-kratos v2、go-micro、go-resty等,無需修改代碼即可實現與RUM Trace串聯。

如果您希望手動從HTTP要求標頭中解析出Trace上下文,也可參考以下代碼實現:

//Extract context from HTTP request header `sw8`
span, ctx, err := tracer.CreateEntrySpan(r.Context(), "/api/test", func(key string) (string, error) {
		return r.Header.Get(key), nil
})

Python應用

通過OpenTelemetry接入

完整接入方式請參見通過OpenTelemetry上報Python應用資料

按照文檔接入,然後從HTTP要求標頭中解析Span上下文,實現與RUM Trace串聯,程式碼範例如下:

// 初始化tracer
trace.set_tracer_provider(TracerProvider())
trace.get_tracer_provider().add_span_processor(BatchSpanProcessor(ConsoleSpanExporter()))

tracer = trace.get_tracer(__name__)

@app.route('/test')
def test():
    headers = dict(request.headers)

    // 從headers中解析trace context
    carrier ={'traceparent': headers['Traceparent'], 'tracestate': headers['Tracestate']}
    ctx = TraceContextTextMapPropagator().extract(carrier=carrier)

    with tracer.start_span("test", context=ctx):
        // do something
        return "success"

通過Jaeger接入

完整接入方式請參見通過Jaeger上報Python應用資料

按照文檔接入,然後從HTTP要求標頭中解析Span上下文,實現與RUM Trace串聯,程式碼範例如下:

import logging
from flask import Flask
from jaeger_client import Config
from opentracing.ext import tags
from opentracing.propagation import Format

## 初始化tracer
def init_tracer(service, scope_manager=None):
    logging.getLogger('').handlers = []
    logging.basicConfig(format='%(message)s', level=logging.DEBUG)

    config = Config(
        config={
            'sampler': {
                'type': 'const',
                'param': 1,
            },
            'logging': True,
            'reporter_batch_size': 1,
        },
        service_name=service,
        scope_manager=scope_manager
    )
    return config.initialize_tracer()

## trace decorator
def trace(tracer, span_name):
    def decorator(f):
        @functools.wraps(f)
        def wrapped(*args, **kwargs):
            ## 從headers中解析trace context 
            span_ctx = tracer.extract(Format.HTTP_HEADERS, request.headers)
            span_tags = {tags.SPAN_KIND: tags.SPAN_KIND_RPC_SERVER}

            with tracer.start_active_span(span_name, child_of=span_ctx, tags=span_tags) as scope:
                rv = f(*args, **kwargs)

            return rv
        return wrapped
    return decorator

## api test example
@app.route('/test')
@trace(tracer, 'test')
def test():
    return "success"

使用SkyWalking接入

完整接入方式請參見通過SkyWalking上報Python應用資料

按照文檔接入,然後從HTTP要求標頭中解析Span上下文,實現與RUM Trace串聯,程式碼範例如下:

from skywalking import config, agent
from skywalking.trace.context import SpanContext, get_context
from skywalking.trace.carrier import CarrierItem

# 配置 SkyWalking,根據需要調整相關參數
config.init(agent_collector_backend_services='<endpoint>',
            agent_authentication='<auth-token>')

agent.start()

# 樣本 HTTP 要求處理函數,需要傳入 HTTP 要求的 headers
def handle_request(headers):
    # 從要求標頭 headers 中提取追蹤資訊
    carrier_items = []
    for item in SpanContext.make_carrier():
        carrier_header = headers.get(item.key.lower())
        if carrier_header:
            carrier_items.append(CarrierItem(item.key, carrier_header))

    carrier = SpanContext.make_carrier(carrier_items)

    # 從 Carrier 中提取追蹤上下文
    context = get_context().extract(carrier)
    
    # 建立一個新 Span 來處理請求
    with get_context().new_entry_span(op='operation_name') as span:
        # 在這裡處理請求,並在結束時自動認可 Span
        ...

# 類比接收到的 HTTP 要求 header 包含 sw8
incoming_headers = {
    'sw8': '1-My40LjU=-MTY1MTcwNDI5OTk5OA==-xxxx-xx-x-x==',  # 樣本值,實際根據請求填寫
    # 其他 header...
}

# 調用函數處理請求
handle_request(incoming_headers)

查看端到端完整Trace資料

完成前後端Trace打通後,您可以在ARMS使用者體驗控制台查看前端請求對應的調用鏈。

image

單擊查看調用鏈,可以看到請求的完整調用鏈路,以及應用拓撲。此時,可以結合RUM側的請求詳細資料,與後端Trace資料,分析錯慢請求問題。

image.png

最上面的Span即代表RUM入口Span,根據端側接入類型,分為以下幾種:

  • Web & H5情境:應用程式名稱:rum-browser,Span名稱首碼:"browser.request:"

  • 小程式情境:應用程式名稱:rum-miniapp,Span名稱首碼:"miniapp.request: "

  • 移動端Android情境:應用程式名稱:rum-android,Span名稱首碼:"android.request: "

  • 移動端iOS情境:應用程式名稱:rum-ios,Span名稱首碼:"ios.request: "

同時,也可以通過拓撲圖,直觀地看到整個請求的上下遊服務拓撲。

image