Heap obtains a copy of website content via a web crawler that periodically clicks every link on the customer’s site. If session replay isn’t loading correctly (ex. text, borders, or other page content missing) it may be due to one of the following issues with the crawler, with the following fixes.
Cause: A pre-loaded CSS file that doesn’t apply to the page. This typically appears as Bad alignment, overlapping text, or other indications of CSS not being applied.
Fix: Your dev team must fix the CSS so that the browser automatically applies the styles. In the meantime, add a separate stylesheet (Mozilla.org instructions) or use the onload attribute when linking your stylesheet (Mozlla.org instructions).
Cause: The website or CSS was updated in the last 30 days but the filename was the same, so Heap used the cached (older) version of the CSS file which was no longer valid. This may present as missing blocks of text, borders, or other chunks of the page.
Fix: Apply a version number to your CSS files, and ensure that CSS files (and fonts, etc.) are accessible without being behind a login. Example: https://www.example.com/style.css?v=123.4
Cause: Heap’s crawler was blocked entirely (ex. by a Firewall) from capturing a copy of the site’s content. You’ll see formatting, images, etc. missing, and 403 errors visible in the dev console.
Fix: In your firewall settings, allowlist this IP: `22.214.171.124`. Also, allowlist this user agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Auryc Chrome/66.0.3359.181 Safari/537.36
Cause: Text capture is disabled on this page (or all pages) which forces session replay to redact large portions of the page (or the entire page). You’ll see huge portions of the page appear as grey boxes.
Fix: Enable target text autocapture in Heap settings, and for any sensitive pages, selectively disable text capture via the
Cause: If the content files require a login, the Heap Replay Bot will not be able to download the file. This may look like missing styles, images, fonts, etc. on pages that are behind a login.
Fix: During playback, the player will try to fetch the content again. Log into your site in a different tab (on the same browser) to enable Heap to fetch the content successfully.
Alternatively, removing the login requirement for the content files when possible is an even better fix.