Home Session Replay Popular Why is my session replay not loading right? (ex. text, borders, or other page content missing)

Table of Contents

Was this article helpful?

Yes No

Thank you for your feedback!

Why is my session replay not loading right? (ex. text, borders, or other page content missing)

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 (mozilla.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 make sure that CSS files (and fonts, etc.) are accessible without being behind a login. Example: https://www.example.com/style.css?v=123.4 

Cause: The replay 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: Allow ports 80 (HTTP) and 443 (HTTPS) and the following IP addresses to prevent your proxy, firewall, or server configuration from blocking the crawler. 

52.18.162.157
20.75.90.236
100.24.76.90
34.192.98.148
20.67.250.109
54.247.44.196
52.51.9.12
35.72.153.38
35.73.99.41

Cause: If the content files require a login, the 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.