When you preview a Clone Environment demo, you might notice that tables, charts, widgets, etc. do not show any data, even if the real application did load data whenever you recorded it. There are a few variables that need to be checked in order to verify that we have actually captured that data and if so, why has the request failed in the replay.
- Are there web requests that have failed?
- If so, can the web request be found in the replays Web Requests table?
- Is the request URL encoded?
Poor Performance or Crashing
It's possible that when you experience sluggishness after launching a replay there is a web request being called continuously. We'll use a common example that occurs when an application has an integration with the third party software, LaunchDarkly.
LaunchDarkly is a software that allows companies to manage feature flags for their clients/users. This integration is installed as an SDK, which means that the code is bundled with the application and requests are made to LaunchDarkly servers.
replay_backend.get('/main.js').post_process(async (response) => {let t = await response.text();t = t.replace('m||(e?m=setTimeout(j,e):j())', '');return t;});
Enabling maps
Some applications use third party APIs to render maps (example: Google Maps Embed API). Depending on the API key restrictions, you might be able to let these API requests pass to their intended targets. In the example below, we can allow the requests to pass and render Google Maps.
replay_backend.match_domain('googleapis').pass();When a Google Maps API key is created, it can be locked to only be used on specific authorized domains. These domain names are called "referrers", and the API key won't work on other domains. If you receive a 403 Forbidden response for this request, that could mean that the API key is restricted to originate from authorized referrers. If that's the case, a workaround would be to replace the map element with a static image of the map. You can simply take a screenshot of the map and upload it to Google Drive and add code.
function swapMap() {const imageMap = document.createElement('img');imageMap.id = 'map-image';imageMap.src = 'https://drive.google.com/uc?export=view&id=1Aj4IrKHFtXeAY3WVNgCaJ17bWykUefFa';document.addEventListener('DOMContentLoaded', () => {const callback = (mutationsList, observer) => {const gMapContainer = document.getElementById('google-map-form');const gMap = document.getElementById('google-map');if (gMap) {gMapContainer.replaceChild(imageMap, gMap);}};const observer = new MutationObserver(callback);observer.observe(document.body, { childList: true, subtree: true });});}swapMap();