In the browser monitoring module of Alibaba Cloud Application Real-Time Monitoring Service (ARMS), you are unable to accurately know about the network transmission performance and the back-end service traces and performance even if you know the API response time. Therefore, you cannot quickly and accurately troubleshoot application API problems. The front-to-back tracing function can solve such problems. It connects the front end and back end of an API request to make the complete code execution recur.

To obtain the complete front-to-back trace, you must activate ARMS browser monitoring and application monitoring and use them together.

  • ARMS browser monitoring

    • SDK configuration

      • Enable automatic API reporting.

      • Enable front-to-back tracing, that is, set enableLinkTrace to true. The configuration is as follows:

        <script>
        !( function(c,b,d,a){c[a]||(c[a]={});c[a].config={pid:"xxx",imgUrl:"https://arms-retcode.aliyuncs.com/r.png?", enableLinkTrace: true};
        with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
        })(window,document,"https://retcode.alicdn.com/retcode/bl.js","__bl");
        </script>
        								
    • Principle

      • When automatic API reporting is enabled, if the API origin is the same as that of the domain of the current application, the EagleEye-TraceID and EagleEye-SessionID custom headers are added to the API request headers. EagleEye-TraceID is the identifier of the trace that connects the front end and back end.
      • If the API origin is different from that of the domain of the current application, no custom header is added to the API request header to ensure that the application request is sent normally.
      • To check whether the front-to-back tracing configuration takes effect, access the console and check whether the EagleEye-TraceID and EagleEye-SessionID headers are included in the API request header, as shown in the following figure.

        Notice The values of EagleEye-TraceID and EagleEye-SessionID have corresponding meanings. Do not set the values manually.
  • ARMS application monitoring

    • For more application monitoring configurations, see Overview.

    • This feature is only supported by ARMS agent 2.4.5 or later.

Use method

In the ARMS browser monitoring module, the Overview, Page, and API Request pages contain the API Link Trace section.

You can perform the following operations in the section:

  • Sort the APIs in ascending or descending order by the report time or response time.
  • Click Link Trace. On the tab that appears, view the overall response time of the browser monitoring and the call sequence diagram of the back-end application.
  • Click View Details. On the details page that appears, view details of the API request.

Scenarios and cases

Application monitoring provides the back-end processing performance and trace of an API request. However, the data may not accurately reflect real user experience. Browser monitoring can only monitor the overall response and statuses of an API from request to response but cannot provide the traces and performance of back-end services. In this case, the front-to-back tracing function connects the front end and back end, providing you with one-stop troubleshooting experience.

You can know whether the network transmission or back-end call takes a longer time based on the call timeline. You can also click thread profiling in the back-end application to view the complete back-end trace of this request. In this way, you can identify the cause of the error based on the business.

  • Locate the error when the API returns an error code or a business logic error occurs.

    1. In API Failure List of the API Link Trace section, locate the API or trace ID, and click Link Trace to view the overall response time of browser monitoring and the call sequence diagram of the back-end application.

    2. Determine whether the network transmission or back-end call process takes a longer time based on the call timeline.

    3. Click the magnifier icon in the Method Stack column of the back-end application to view the overall back-end trace of the request and locate the cause of the API error based on the business.

  • Locate the error when the API response time is long

    1. In the API Link Trace section, sort the APIs in descending order by response time and find the time-consuming API or trace ID.

    2. In the row of a time-consuming API, click Link Trace to view the overall response time of the browser monitoring and the call sequence diagram of the back-end application.

      • If the back-end application processing time is short but the overall response time is long, the time consumed from API request sending to the server to data returning to the browser is long. Click View Details. On the details page that appears, view the network, region, browser, device, and operating system of the access.
      • If the back-end application takes a long time to process, the back-end processing performance is poor. Click the magnifier icon in the Method Stack column. In the dialog box that appears, check which part of back-end tracing is time-consuming to locate the problem.