Home
LogRocket SDKs
Sign Up
Start typing to search…

Sanitize Network Data (React Native)

Control how data is passed in network requests or responses

By default, the LogRocket React Native SDK captures all network requests made through XMLHttpRequests and the Javascript Fetch API.

network

A collection of configuration options specific to network capture. This option is available for configuration, and should be provided in the second argument to LogRocket.init.

Disable recording of network data

isEnabled - Boolean

optional (default - true)
// Add this to your existing init call, do not call init twice!
LogRocket.init(YOUR_APP_ID, {
  network: {
    isEnabled: false,
  },
});

Sanitize a network request

requestSanitizer - Function

optional

Use requestSanitizer to scrub sensitive data from javascript network requests, or to ignore request/response pairs entirely.

To ignore a request/response pair return null from the requestSanitizer. You can also redact fields on the request object by modifying the object. Make sure that you still return the modified request from the function:

// Add this to your existing init call, do not call init twice!
LogRocket.init(YOUR_APP_ID, {
  network: {
    requestSanitizer: request => {
      // if the url contains 'ignore'
      if (request.url.toLowerCase().indexOf('ignore') !== -1) {
        // ignore the request response pair
        return null;
      }
      
      // otherwise log the request normally
      return request;
    },
  },
});
// Add this to your existing init call, do not call init twice!
LogRocket.init(YOUR_APP_ID, {
  network: {
    requestSanitizer: request => {
      // if the url contains 'ignore'
      if (request.url.toLowerCase().indexOf('ignore') !== -1) {
        // scrub out the body
        return {
          ...request,
          body: null,
        };
      }
        
      return request;
    },
  },
});
// Add this to your existing init call, do not call init twice!
LogRocket.init(YOUR_APP_ID, {
   network: {
     requestSanitizer: request => {
       return {
         ...request,
         headers: {
           ...request.headers,
           'x-auth-token': null,
         },
       };
     },
   },
});
// Add this to your existing init call, do not call init twice!
LogRocket.init(YOUR_APP_ID, {
  network: {
    requestSanitizer: request => {
      if (request.headers['x-auth-token']) {
        return {
          ...request,
          headers: {
            ...request.headers,
            'x-auth-token': '',
          },
       	};
      }
      
      return request;
    },
  },
});

Sanitize a network response

responseSanitizer - Function

optional

Use the responseSanitizer to redact sensitive data from javascript network responses. Return null from the function to redact all response fields and only record timing data.

// Add this to your existing init call, do not call init twice!
LogRocket.init(YOUR_APP_ID, {
   network: {
     responseSanitizer: response => {
       return {
         ...response,
         body: null,
       };
     },
   },
});
// Add this to your existing init call, do not call init twice!
LogRocket.init(YOUR_APP_ID, {
   network: {
     responseSanitizer: response => {
       return null;
     },
   },
});
📘

logrocket-fuzzy-search-sanitizer

Joshua Bailey, a LogRocket user, contributed a plugin for more easily sanitizing data from network requests and responses. Check it out here: https://github.com/LogRocket/logrocket-fuzzy-search-sanitizer

iOS native network capture in React Native

Coming soon!

Android native network capture in React Native

Native Android network requests cannot be captured automatically. You must make use of the Android LogRocket SDK to capture network requests and configure sanitization. The LogRocket Android SDK can be made available to your native Android codebase via the Gradle setup documented here. From there, network capture can be configured following the Android network setup guide here.