APM Integration Settings

You can link HTTP requests generated in the browser to backend transactions.
When linked, you can view frontend indicators together with backend and infrastructure performance information, which helps you quickly identify and understand the causes of delays and errors that real users experience.

Requirements

• An application with Whatap APM installed is required.

• You must configure the AJAX request URLs to be linked in the browser monitoring agent.

• The server providing the HTTP API may need to configure and allow Access-Control-Allow-Headers for the headers below(Important).

  Table. Access-Control-Allow-Headers configuration and settings

  Info	Description
  x-wtap-po	Project information used for MTID tracking
  x-wtap-mst	Transaction information used for MTID tracking
  x-wtap-sp1	Page URL-related information configuration

Browser Agent Settings

Specify the HTTP request URLs to be traced.
Configure them in the config section of the browser monitoring agent installation script.

• Register target AJAX URLs as a string array in the installation script option tracingAjaxUrls.

• You can configure the ratio of multi-transaction generation using traceSampleRate.

  <script>
  (function (w, h, _a, t, a, b) {
  w = w[a] = w[a] || {
      config: {
      projectAccessKey: "xxxxxxxxxxxxx-xxxxxxxxxxxxx-xxxxxxxxxxxxx",
      pcode: 1,
      sampleRate: 100,
      proxyBaseUrl: "https://rumote.whatap-browser-agent.io/",
      traceSampleRate: 50,
      tracingAjaxUrls: ['http://dev.whatap.io/yard/api/flush', 'http://devote.whatap.io/', /^https?:\/\/localhost(:\d+)?(\/.*)?$/]
      },
  };
  a = h.createElement(_a);
  a.async = 1;
  a.src = t;
  t = h.getElementsByTagName(_a)[0];
  t.parentNode.insertBefore(a, t);
  })(window, document, 'script', '${front_rum_url}', 'WhatapBrowserAgent', '');
  </script>

1. In the AJAX Hitmap where real-time and historical data can be viewed, check the HTTP requests occurring at the client level.

   

2. Drag the hitmap to select the analysis range and review the table.

   

   • You can check AJAX requests generated on the client side by user ID, page URL, AJAX URL, and more, and you can link them to the backend transactions processed in APM.

     

   • When clicking a node, you can view detailed information about the APM transaction on that screen.