Debugging iOS Issue — React Bundle Error — Experience

What am I doing
A script is called inside a website, this script further synchronously calls react and react-dom production files, then a react bundle minified script. This script is responsible for further rendering components into the website.
The above behaviour is working perfectly in PC, tablet and Android devices. But the same is not working in iPhone mobiles only, If you change your device to iPhone in developer tools, this works great. Looks like the production javascript is somehow not working in iPhone.

How to Solve
We will use chrome://inspect to check the actual logs in the device and find out the issue.

Let’s Dive In
First, add logs to all critical steps to figure out where the code is breaking.

Added Logs and made changes live. Desktop, Tablet, and Android are still fine. IPhone still doesn't work. Open chrome://inspect and start logging. Error: TypeError: Load Failed Found. (Screenshot Attached)

Android v/s iOS

It looks like this is an issue with the typescript or script not being able to load on iPhone only. After checking some other uses of this script, it seems like it is not working or loaded at all on iPhones, while the same is working for Android. (Attached Results for Android and iPhone below)

Looks Similar Issue: https://stackoverflow.com/questions/71280168/javascript-typeerror-load-failed-error-when-calling-fetch-on-ios

Seems some API Call is failing not sure which it is, since the log messages on mount didn’t even got printed. Added more logs and made changes live.

Went to the original Script responsible for loading react and further scripts, added some log comments in there.

All Log Messages not coming seems like the original script is fucking up in loading the scripts, Function Looks like this

function init() {
console.log('IB Booting...');
cookieListener()
addWidget()
console.log("Booted..")
}

IB Booting.. is receiving while Booted is not, added logs to both functions to check.

Control didn’t reach addWidget() and cookieListener() threw error, here is the function

function cookieListender() {
cookieStore.addEventListener('change', ({changed}) => {
    for (const {name, value} of changed) {
        // console.log(`${name} was set to ${value}`);
        window.postMessage({name: "cookieChanged"}, "*")
    }
});
}

Why cookieStore is not working?? Let’s see.

Checked https://caniuse.com/?search=cookie%20store%20api to see usage f cookieStore and found out that it isn’t supported by safari iOS, caniuse don’t shows the same info for chrome iOS but seems like it doesn’t too. That’s why script fails at this point. We can test this theory out by adding try catch within this function

function cookieListener() {
    try {
        console.log("START Cookie Listener")
        cookieStore.addEventListener('change', ({changed}) => {
            for (const {name, value} of changed) {
                // console.log(`${name} was set to ${value}`);
                window.postMessage({name: "cookieChanged"}, "*")
            }
        });
        console.log("START Cookie Listener DONE...")
    } catch (e) {
        console.error("FAILED TO START COOKIE LISTENER", e)
    }

Let’s make the changes LIVE.

VOILA. Failed to start cookie listener, and control went ahead of cookieListener() function since we added try catch and script is working properly.