How logrocket records http calls

Let's see how LogRocket hooks into HTTP calls by intercepting network requests made via XMLHttpRequest (XHR) and the Fetch API. This interception allows these tools to monitor, record, and possibly modify the requests and responses without altering the application's intended functionality.

Intercepting XMLHttpRequest

The XMLHttpRequest (XHR) object is a web API that allows scripts to perform HTTP client functions, such as submitting form data or loading data from a server without a page refresh.

How It's Intercepted:

1. Overriding the XMLHttpRequest Constructor: LogRocket can override the global XMLHttpRequest constructor function with its own implementation. This custom implementation will provide a wrapper around the original XMLHttpRequest object.

   const originalXHR = window.XMLHttpRequest;
   window.XMLHttpRequest = function() {
     this.xhr = new originalXHR();
     // Setup custom behavior here.
   };
   

2. Monitoring Events and States: The wrapper can then monitor and record various events and state changes associated with the XMLHttpRequest lifecycle (e.g., onload, onerror, onreadystatechange).

   window.XMLHttpRequest.prototype.send = function() {
     this.xhr.onreadystatechange = () => {
       if (this.xhr.readyState === 4) {
         // The request is completed. Now you can record the response.
         // LogRocket would record the response here.
       }
     };
     // Call the original send method.
     this.xhr.send.apply(this.xhr, arguments);
   };
   

3. Capturing Request and Response Details: Before the actual network request is sent, and after the response is received, the wrapper can capture details like the request URL, headers, body, response status, headers, and body. This data is crucial for debugging issues.

Intercepting Fetch API

The Fetch API provides a more modern and powerful interface for making HTTP requests. It's promise-based, making it a better fit for modern web applications.

How It's Intercepted:

1. Wrapping the Fetch Function: Similar to XHR, LogRocket can wrap the global fetch function to intercept calls made through it.

   const originalFetch = window.fetch;
   window.fetch = function() {
     // Record the arguments (e.g., the request URL and options).
     const fetchArguments = arguments;
     
     // Call the original fetch function.
     return originalFetch.apply(this, fetchArguments).then(response => {
       // Clone the response to not interfere with the original response body consumption.
       const clone = response.clone();
       // Now you can record response details.
       // LogRocket would process and potentially record the response here.
       
       return response; // Make sure the original response is returned to the calling code.
     });
   };
   

2. Non-Intrusive Data Collection: This approach allows LogRocket to collect data about the request and response without disrupting the original request's intended behavior. It's important to clone the Response object when inspecting it to ensure that the original response can still be consumed by the original requestor as intended.

Handling Data with Care

In both cases, it’s crucial to handle data carefully to respect user privacy. LogRocket and similar tools provide mechanisms to mask or exclude sensitive information from being recorded. This might include filtering out passwords, credit card numbers, and other personal information from request payloads or responses before they are stored or processed.