Filter XHR Calls by URLs

If you have many XHR calls (using XMLHttpRequest or the Fetch API) from your page that you do not need to monitor, you can use XHR filters so that the Agent only monitors a regex-defined list of specified calls.

When XHR calls are monitored, the absolute path of the XHR calls is provided to the JavaScript Agent. In the Controller UI, those monitored XHR calls will be displayed as configured by naming rules. If there are no naming rules, the absolute path of the XHR call is displayed.

XHR Filters

You can use the XHR filters below to include or exclude XHR calls. The filters can be in the form of an XHR filter object or an array of XHR filter objects.

  • xhr.include
  • xhr.exclude

Filter Object Structure

The XHR filter object has two properties: urls and method. The urls property is an array of objects containing a pattern property that specifies a regular expression for matching URLs. The method property is a string that specifies an HTTP method. You can use one or both of the properties. If you only use the urls array, the matched URLs will be either included or excluded for all HTTP methods. If you only specify method, all calls using the specified HTTP method will be either included or excluded.

The following is the general structure for the filter object:

JSON 
{
    urls: 
      [
        {
          pattern: ".*foo.*"
        },
        {
          pattern: ".*bar.*"
        }
      ],
    method: 'GET'
}

Before You Begin

Ensure that the following conditions are met to use XHR URL filtering:
  • Configuration before adrum.js is loaded.
  • A matched adrum.js and adrum-ext.js pair from the same release.
  • Applies to XMLHttpRequest and Fetch API calls.

How to Configure XHR Filters in adrum-config

Browser RUM settings are defined on a single global object: window["adrum-config"]. The XHR filter settings are stored under the xhr property alongside other options such as appKey, beaconUrlHttps, and spa.

The example on this page adds XHR filters to any existing configuration. It does not replace other settings.
Note: Do not overwrite the entire adrum-config object unless you also redefine required settings such as appKey and beacon URLs.

The following example uses nested functions because the snippet uses Immediately Invoked Function Expressions (IIFEs).

JSON 
(function(config) {
  (function(xhr) {
    xhr.include = { urls: [{ pattern: ".*app_status.*" }] };
    xhr.exclude = { urls: [{ pattern: ".*user-profile.*" }], method: "POST" };
  })(config.xhr || (config.xhr = {}));
})(window["adrum-config"] || (window["adrum-config"] = {}));
  1. Outer function runs immediately with window["adrum-config"].
  2. Inner function runs immediately with config.xhr.
  3. xhr.include and xhr.exclude are set on the config object.
  4. When adrum.js loads, the agent reads window["adrum-config"].

No additional calls to these functions required. For more information, see Example for window["adrum-config"] Configuration.

XHR Filter Examples

To use XHR filters, you must assign XHR filters to xhr.include and xhr.exclude before you inject the adrum.js script. It's important to note that the exclude patterns override the include patterns, so those URLs that are matched by both the include and exclude patterns will ultimately be excluded.

For example, in the code snippet below, the include pattern would match all HTTP requests to http://somedomain/app_status/user-profile.jsp, but the exclude pattern would exclude POST calls to that URL.

JSON 
<head>
    <script type='text/javascript' charset='UTF-8'>
        (function(config){
            (function(xhr) {
                xhr.include = {
                    urls: [
                        {
                            pattern: ".*ajax_info.txt"
                        },
                        {
                            pattern: ".*app_status.*"
                        }
                    ]
                };
                xhr.exclude = {
                    urls: [
                        {
                            pattern: ".*user-profile.*"
                        }
                   ],
                   method: "POST"
                };
            })(config.xhr || (config.xhr = {}));
        })(window["adrum-config"] || (window["adrum-config"] = {}));
    </script>
    <script src='//cdn.appdynamics.com/adrum/adrum-latest.js' type='text/javascript' charset='UTF-8'></script>
    ...
</head>

Example for window["adrum-config"] Configuration

JSON 
<head>
  <script type="text/javascript" charset="UTF-8">
    window["adrum-start-time"] = window["adrum-start-time"] || new Date().getTime();

    window["adrum-config"] = {
      appKey: "AD-AAB-AAE-XXXX",
      beaconUrlHttp:  "http://your-collector.example.com",
      beaconUrlHttps: "http://your-collector.example.com",

      xhr: {
        include: {
          urls: [
            { pattern: ".*ajax_info\\.txt" },
            { pattern: ".*app_status.*" }
          ]
        },
        exclude: {
          urls: [{ pattern: ".*user-profile.*" }],
          method: "POST"
        }
      }
    };
  </script>
  <script src="https://cdn.appdynamics.com/adrum/adrum-latest.js"
          type="text/javascript" charset="UTF-8"></script>
</head>