Advanced network recording

Smartlook DevTools

Smartlook DevTools gives you and your team the technical data to see what’s happening in your users' browsers. DevTools are a prerequisite for advanced network recording. Advanced network recording allows recording the bodies and headers of requests and responses.

Getting started with advanced network recording

Smartlook's Privacy by design means that no potentially sensitive data is recorded. Due to this policy, Smartlook doesn't record any body responses or requests.

1. Make sure that DevTools are enabled on your project in your Project settings.

2. Extend Smartlook.init() with advancedNetwork object. For more info, see the API reference.
3. Allow recording of request/response bodies using the allowedUrls property. If you want to mask/hide/remove sensitive data, you can use Interceptors.

{
  advancedNetwork: {
    allowedUrls: [
      /^https:\/\/domain\.com\/.*/,
      'https://exact.match.com/exact-path',
      new RegExp("^https://exact.match.com/exact-path-with-any-query-param"),
    ]
  }
}

allowedUrls is an Array of exact, string patterns or regular expressions.

4. Allow recording of non-standard headers. By default, Smartlook records only headers considered safe (list below). To record other headers, extend the advancedNetwork in the init options with allowedHeaders:

{
  advancedNetwork: {
    allowedHeaders: [
      'Custom-header'
    ]
  }
}

allowedHeaders is an Array of exact, case-insensitive patterns.

The following headers are recorded by default:

A-IM, Accept, Accept-Charset, Accept-Datetime, Accept-Encoding, Accept-Language, Access-Control-Request-Method, Access-Control-Request-Headers, Cache-Control, Connection, Content-Encoding, Content-Length, Content-MD5, Content-Type, Cookie, Date, Expect, Forwarded, From, Host, HTTP2-Settings, If-Match, If-Modified-Since, If-None-Match, If-Range, If-Unmodified-Since, Max-Forwards, Origin, Pragma, Prefer, Range, Referer, TE, Trailer, Transfer-Encoding, User-Agent, Upgrade, Via, Warning

5. You can also allow recording of WebSocket:

{
  advancedNetwork: {
    websockets: true,
  }
}

Sensitive content

Because some recorded network calls may contain sensitive data that needs to be omitted, you can set Network interceptors. For more information, see Network interceptors.

Example of advanced network recording setup

The following example script:

• records all request and response bodies and headers for domain.com while ignoring 3rd-party requests done by scripts like Google Analytics
• adds capture of the custom header x-custom-header
• allows WebSocket capture
• use of an interceptor to catch any token value in any URL so it can be removed. You can also do this with request/response bodies to replace sensitive information.

<script type='text/javascript'>
  window.smartlook||(function(d) {
    var o=smartlook=function(){ o.api.push(arguments)},h=d.getElementsByTagName('head')[0];
    var c=d.createElement('script');o.api=new Array();c.async=true;c.type='text/javascript';
    c.charset='utf-8';c.src='https://web-sdk.smartlook.com/recorder.js';h.appendChild(c);
    })(document);
    smartlook('init', PROJECT_KEY, {
      region: REGION,
      advancedNetwork: {
        allowedUrls: [new RegExp("^https://domain.com/")],
        allowedHeaders: ['x-custom-header'],
        websockets: true,
      },
      interceptors:{
        network: (data, context) => {
          const tokenIndex = data.url.indexOf('token=');
          if (tokenIndex > -1) {
            data.url = data.url.slice(0, tokenIndex) + 'token=[OBSCURED]';
          }
        }
      }
    });
</script>