Front-end and Back-end Trace Linking with Tracing Analysis - Application Real-Time Monitoring Service

In Browser Monitoring, knowing the response time of an API request is not enough. You lack visibility into network performance and the full backend service trace. This makes it difficult to quickly and accurately troubleshoot API issues. The frontend-to-backend tracing feature solves this by linking the entire journey of an API request, from the client to the backend services, to provide a complete picture of the code execution.

Prerequisites

Install the agent by using npm. For more information, see Set up Browser Monitoring with npm.

Background

By default, Browser Monitoring and Application Monitoring are automatically integrated, allowing you to view end-to-end request tracing data through both Browser Monitoring and session tracing. However, when you use the OpenTracing protocol (which uses the open-source trace ID uber-trace-id), you must manually connect your Browser Monitoring JavaScript configuration with Managed Service for OpenTelemetry. On the trace tab, a table details each call, with columns for Application Name, Log Time, Status, IP Address, Call Type, Service Name, call stack, thread profiling, and timeline (in milliseconds). For example, a request with the call type frontend may take 30,889 ms and have an abnormal status (red dot), while its corresponding HTTP entry call takes 68,964 ms and has a normal status (green dot). You can click the magnifying glass icon in the call stack or thread profiling column to view detailed information.

Parameters

When you install the agent by using npm, you must configure the following parameters.

const BrowserLogger = require('alife-logger');
const __bl = BrowserLogger.singleton({
    pid:"xxx",     // site ID
    appType:"web",
    enableLinkTrace:true,
    linkType: 'tracing', // The tracing type. The default value is 'arms', which uses a proprietary ARMS protocol and sends headers prefixed with 'EagleEye'. You can change this to 'tracing', which uses the Jaeger protocol and sends the 'uber-trace-id' header.
    enableApiCors: true  // Specifies whether to allow cross-origin requests and custom headers. The default value is false. If set to true, your backend service must be configured to support this.
});

enableApiCors:true: Your backend service must support cross-origin requests and custom header values. Otherwise, requests will fail, as shown in the following error message.

[WDS] Live Reloading enabled.                                              client:52
Access to fetch at 'http://xxx.xxx.xxx.155:9000/api' from origin 'http://127.0.0.1:9000' has been blocked by CORS policy: Response to preflight request doesn't pass    arms.html:1
access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors'
to fetch the resource with CORS disabled.
GET http://xxx.xxx.xxx.155:9000/api net::ERR_FAILED

If a request fails, see the following Node.js configuration example:

// Allow cross-origin access to the service.
app.all('*', function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type,uber-trace-id'); // If linkType is 'tracing', the 'uber-trace-id' header must be allowed. If linkType is 'arms', the 'EagleEye-TraceID', 'EagleEye-SessionID', and 'EagleEye-pAppName' headers must be allowed.
  res.header('Access-Control-Allow-Methods', '*');
  next();
});

enableLinkTrace:true: When this parameter is set to true:
- If an API request and the page have the same origin, the trace ID is automatically added to the request header to enable frontend-to-backend tracing.
- If an API request and the page have different origins, you must also set enableApiCors to true. Your backend service must also support cross-origin requests and custom headers.
  
  Important
  Ensure all requests are correctly configured to work with your backend; otherwise, they may fail. If a request fails, see the Node.js configuration example above.
linkType:
- arms (default): Uses the proprietary ARMS protocol and sends several headers that start with EagleEye.
- tracing: Uses the Jaeger protocol and sends the uber-trace-id header.