Session recording for Ionic apps only shows white/black pages

[samklc]

Bug description

Session recording, on normal and V2 (rrweb 2), shows completely unusable screens.

Just created a simple default ionic (on Angular) project with tabs. So you can see the app here:
https://test-posthog-erf.web.app/

After just clicking on different tabs, here is how the session recording result looks like:
https://user-images.githubusercontent.com/129857723/232476555-444b7ede-e107-4a5e-842a-ad2df5cbbb83.mp4

This has been the same for many of the web browsers and devices. There is no specific web browser/devices that the session recording works well.

Environment

• PostHog Cloud EU, project ID: [please provide from https://eu.posthog.com/project/settings#1223]

[benjackwhite]

Thanks for the report. I don't suppose the source would be available somewhere so that I could fire it up myself and tweak some things to debug? Or is truly just a boilerplate Ionic app?

[benjackwhite]

Managed to recreate and noticed that the updated version of rrweb playback much better so should have a fix coming up

[benjackwhite]

This should be fixed. If not, feel free to re-open or if there is a different issue, create a new issue 👍

[samklc]

@benjackwhite
Sadly the issue is still there and all the recordings are not shown correctly.

I have updated the test project to have a side menu: https://test-posthog-erf.web.app/

The recording sample: https://user-images.githubusercontent.com/129857723/236797729-4662eb6f-9f2b-4d26-8c35-c5f5dae8c4c0.mp4

On the other apps, all the icons of the side menu are shown so big in the middle of the recording covering all the video:
https://user-images.githubusercontent.com/129857723/236797761-50825d0f-e51d-4492-b0b0-a6ac92032fc9.mp4

Let me know if you need more information.

[samklc]

Do I have to create a new issue? @benjackwhite

[tanuj-g]

Indeed, I am encountering a similar problem. Initially, when I developed an Android application using React and Capacitor, the session recording functioned perfectly.

However, after incorporating IONIC 7 into the mix, the session recording ceased to work. It only displays a black-and-white screen, as depicted in @samklc's video. I'm experiencing the exact issue, mirroring the troubles @samklc mentioned in their video.

Is there anyone who could provide some guidance or assistance on this matter?

[RupertBarrow]

Hi @tanuj-g , did you get this to work ?

[tanuj-g]

@RupertBarrow no

[RupertBarrow]

Did you get Posthog to work in an Ionic app on mobile ?

[tanuj-g]

@RupertBarrow Yes, After upgrading to the latest version of Posthog, I am able to capture some events, But still some issues left which I mentioned on the top.

[RupertBarrow]

I have been trying for days. Posthig in my UInic 8 + Angular 18 app works fine in the web browser, on the mobile Nexus browser on iOS but not in the mobile app tested in TestFlight on iOS.
However, in the same context, I have TrackJS workingvas well as server call-outs.

Could you share how you implemented an initialize Posthog ? Do you get events sent from your iOS app ? What version of Ionic are you using ?

TIA