Heap session recording is not working with electron js based application

Question

I have built an Electron based application using Angular, and now I am trying to integrate Heap session recording. So far am able to record the sessions but facing some issues as following:

Problem: So, the major issue is the recordings from the sessions are not capturing the UI/CSS, only the labels can be seen.

See the issue on the screenshot

Solutions tried/code/findings

• I got the code from the official website of Heap with the key and I pasted that code snippet in index.html on the angular side

• In a session recording, heap does not simply record the session as a normal screen recorder instead heap tracks down all of the actions that are being performed by the user in the form of events which contains the information about the landing pages, CSS file, and the other information. So when the session replay is played Heap sequentially goes through these logged events to get information at that time from the URLs stored in the events. So in a web application, this is possible as web pages have a preloaded CSS file. Still, in an electron application, this is not possible since the CSS file is applied to the content dynamically. Therefore when the session recording is played there is no CSS being applied.

• It is also mentioned in Heap documentation that Heap session recordings only work for web applications, plus heap uses a web crawler that periodically clicks every link on the customer’s site.

---

Same issue is being faced in Hotjar, FullStory, and Smartlook with electron

Answer 1

I'm an engineer on the session replay team at Heap and have some helpful news for you. We are experimenting with a change that will address your CSS issues for electron apps. Currently, we rely on various crawling techniques to find the relevant styles for apps. Soon we will launch a feature that sends the relevant styles to us directly without requiring crawling. Should be out in the wild soon. Hope that helps!