Bug: On iOS Safari, mux-video-react triggers "Reached maximum..." and "Fetch API cannot..." errors when unmounting

[sabrichu]

Is there an existing issue for this?

• I have searched the existing issues

Which Mux Elements/Packages does this apply to? Select all that apply

mux-video-react

Which browsers are you using?

Safari on iOS

Which operating systems are you using?

macOS

Description

I'm using @mux/mux-video-react version 0.8.3 in a NextJS app to display videos that autoplay and loop. I noticed when I was debugging the app in iOS Safari 17.3.1 that when I navigated away from a page with Mux videos playing, multiple errors were triggered in the console from Mux saying:

"Reached maximum amount of queued data of 64Kb for keepalive requests"
"Fetch API cannot load httos://inferred.litix.io/ due to access control checks."

This isn't a blocker or urgent request as the page isn't broken and you're able to navigate to the new page just fine, but also seemed to indicate that the component isn't unmounting gracefully.

Reduced test case

https://yasly.com/work

Steps to reproduce

1. On your iOS device, enable Web Inspector by going to Settings > Safari > Advanced > Web Inspector
2. Connect your phone to a Mac using USB, select "Trust" if the "Trust This Computer" popup appears on your phone, and open desktop Safari
3. On phone, open https://yasly.com/work on Safari
4. On desktop, in Safari go to Develop > [Select your device] > [Select the url to open developer tools for that window]
5. On phone, tap any link on the page
6. On desktop, look at the console in the developer tools for that window

Current Behavior

Multiple errors are triggered in the console that say:

"Reached maximum amount of queued data of 64Kb for keepalive requests"
"Fetch API cannot load httos://inferred.litix.io/ due to access control checks."

Expected Behavior

No errors are logged

Errors

What version of the package are you using?

0.8.3

[cjpillsbury]

Thanks for filing, @sabrichu! We'll have to look into this one, since it appears to be tied to some transition/edge cases in our underlying data analytics library. I'll let you know if we find anything or get a fix out! Also, appreciate the link for reproducing the issue! Was able to confirm on Safari dev tools + connected iOS device.