How Regex rendered our site useless on iOS devices

In the last week of January, we launched the web version of Iku, after a couple of days we received reports that the site wasn’t usable on iOS devices.

We built the site using ReactJS and then later migrated to NextJS to provide a better experience of Iku on the web. I’ll cover the migration to NextJS in another article soon. We began to debug this issue, the entire site was just not working, it loaded some content on the landing page and then every interaction just didn’t work. We figured the site loaded a bit and then JavaScript just broke on the website.

To be able to address this issue we had other hurdles, no one on the team had an Apple device to help with debugging. I had an iPad air, that also faced the same issue, which helped in testing the changes we made to fix the issue for a couple of days but had no result as it doesn’t allow me to access the developer tools. It got really frustrating, we started to check out if any of the libraries were causing the issue, digging deeper into every file, hours of exploring SO.

I had to get an Apple device or emulate one, decided to install MacOS on a VM, which seemed to be a longer task. Then came browserstack to the rescue, I have my GitHub student plan which provided me with using any device on their plan for longer than a minute. Fired up an iPad on browser stack and opened up developer tools to find Regex was the culprit.

Now it was clear what the issue was, we narrowed down it to 4 instances where regex was being used. We used regex to split a user’s full name into first and last name.

let s = fullname.split(/(?<=^\S+)\s/);

I removed the above piece of code and the site worked perfectly 😃. Apparently Apple mobile devices doesn’t support Regex lookbehind. That’s when I stumbled upon this SO answer.

This could have definitely been solved in a day or two if we had access to a Mac, nonetheless we did end up figuring it out.