partytown icon indicating copy to clipboard operation
partytown copied to clipboard

Session Recording / Replay tools don't work

Open davidstellini opened this issue 2 years ago • 10 comments

Describe the bug Session recording tools (Like mouseflow, hotjar, and yandex) record user sessions & behaviour, they allow you to generate heatmaps of site usage and identify & fix issues by seeing exactly what users clicked on to great detail.

These tools are a massively good candidate for Partytown because they are, as you can imagine - heavy.

I made a repro with Yandex.

To Reproduce Steps to reproduce the behavior:

  1. Open https://davste93.github.io/angular-partytown-yandex-repro/
  2. Click on home
  3. Select some text
  4. Close the tab
  5. If it works, you should see a new session under: https://metrica.yandex.com/stat/visor?period=today&filter=(ym%3As%3AisRobot%3D%3D%2527No%2527)&id=89979942 (However you need to create a yandex account, give me your username, and I can add you to the dashboard so you can see it).
  6. By running the script under JS directly, it works, but using text/partytown does not.

Reproduction link https://davste93.github.io/angular-partytown-yandex-repro/

davidstellini avatar Aug 16 '22 20:08 davidstellini

Updated:

Scrapped angular and used plain HTML.

Yandex: https://davste93.github.io/angular-partytown-yandex-repro/working.html - Working (without partytown): https://davste93.github.io/angular-partytown-yandex-repro (not working - no errors, no sessions recorded)

I also added a version with Hotjar here: https://davste93.github.io/angular-partytown-yandex-repro/hotjar-working.html - working without partytown https://davste93.github.io/angular-partytown-yandex-repro/hotjar-partytown.html (not working - no errors, no sessions recorded_

And a version with mouseflow here: https://davste93.github.io/angular-partytown-yandex-repro/mouseflow-working - working without partytown https://davste93.github.io/angular-partytown-yandex-repro/mouseflow-partytown (not working - throwing errors)

image

Mouseflow seems to be breaking on mouseLeaveEvent.composedPath()

So from three same types of tools I've tried - it seems like neither can work with partytown :(

davidstellini avatar Aug 16 '22 20:08 davidstellini

Can confirm that Hotjar does not seem to work. From what I can tell the issue seems to be that while the static.hotjar.com host that the script tries to access works and has a Access-Control-Allow-Origin: * header it then sets up subsequent calls to vars.hotjar.com which does not and fails.

Access to XMLHttpRequest at 'https://vars.hotjar.com/box-5e66f98b4ee957db209dc6f63e3d59dd.html' from origin 'https://www.*******.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
set @ partytown-ww-sw.js?v=0.7.1:1193
window.hjBootstrap @ hotjar-1266105.js?sv=6:5
270 @ hotjar-1266105.js?sv=6:5
n @ hotjar-1266105.js?sv=6:5
eval @ hotjar-1266105.js?sv=6:5
eval @ hotjar-1266105.js?sv=6:5
run @ partytown-ww-sw.js?v=0.7.1:689
(anonymous) @ partytown-ww-sw.js?v=0.7.1:1684
await in (anonymous) (async)
receiveMessageFromSandboxToWorker @ partytown-ww-sw.js?v=0.7.1:1701
16:33:46.152 

jonathan-dejong avatar Nov 24 '22 08:11 jonathan-dejong

Yeah, confirm this issue too. We cannot use a reverse proxy to control the https://vars.hotjar.com/box-5e66f98b4ee957db209dc6f63e3d59dd.html. Bcs this is a website 🥲 We cannot access the same domain so CORS will bummp.

We have the same issue when embedding some scripts to contain a website. So how we can do now @adamdbradley 🙏

harrytran998 avatar Dec 13 '22 13:12 harrytran998

Where are you guys seeing the CORS errors? I don't see any in the repros in the console?

davidstellini avatar Dec 20 '22 12:12 davidstellini

Same CORS problem here.

Anyone tried to install Hotjar with Google Tag Manager and then setup the GTM script with Partytown?

gomespereira avatar Dec 28 '22 16:12 gomespereira

Same CORS problem here.

Anyone tried to install Hotjar with Google Tag Manager and then setup the GTM script with Partytown?

Yes but you have to set up a CORS proxy. You can dump the code from CORS anywhere into a cloud flare worker and and set up resolveUrl there.

CesarBenavides777 avatar Dec 28 '22 18:12 CesarBenavides777

Anyone can investigate this issue 🥹 - Seemming this is a hard problem!

harrytran998 avatar Feb 20 '23 11:02 harrytran998

Has anyone managed to get hotjar to work with Partytown yet? I'm also curious to know how you manage to see the errors that happen in the service workers

PeretEtienne avatar Apr 04 '23 16:04 PeretEtienne

Has anyone solved the issue?

tcetin avatar Sep 18 '23 11:09 tcetin

Has anyone successfully integrated any session replay tool with partytown? Or is it just impossible?

kkopp001 avatar Apr 02 '24 06:04 kkopp001