Production surprise in Safari
After a few months of hard work, I released a production version of the application build with nuxt.js in SPA mode. With the team, we tested various scenarios, observed and immediately fixed minor bugs, and started to open the champagne after great success. Then the call came:
“Application doesn’t work on iPhone!”
– angry product owner
ChunkLoadError: Loading chunk failed
The error appeared only in Safari browser and on specific pages. Fortunately, I was prepared to debug Safari behavior in Windows1, but console output surprised me:
SyntaxError: Invalid regular expression: invalid group specifier name
ChunkLoadError: Loading chunk 6 failed
You don’t see these messages so often…
We had a very few candidates:
- The issue with production webpack build
- Problem with third-party plugins
But the internet didn’t help us very well with the analysis of the output messages. I didn’t have much clue and the team was afraid of reverting production changes back. Time was ticking.
Invalid regular expression: invalid group specifier name
Sometimes it’s just good to understand what’s going on and stop panicking! I closed all the opened tabs, turned on focused, mode and took a look on first message with Invalid regular expression. Why do we get it?
According to this stackoverflow answer2 Invalid group specifier name is thrown if Look behind expression is applied to regexp pattern. But I didn’t find any copy-paste references of it in the source code, so I needed to understand what the look behind really is3. The view of caniuse made me confident, we found the right root cause.
Solution
- I opened the .js file that cannot be loaded to Safari browser because of ChunkLoadError error.
- Search for regexp expression Look behind “?<=”
- Found it and I immediately recognized the source code part
We used var mediaRegexp = /(?<=oembed url\=\")(.*?)(?=\")/g regexp pattern to filter oembed elements from the API response to create gallery of youtube videos. After removing the lookbehind part, the issue was gone. We had this part of the code in the application for quite time (several months), but it wasn’t shown because we used SSR nuxt.js mode until recently. We didn’t trigger this error during the testing by accident, because not all the pages have a video gallery.
Mental framework to investigate similar issues
In the end, the issue was like many others. The most important thing I got from the solution, is a thinking pattern:
- Calm down.
- The output tells you something, what is it?
- Do you really understand the meaning of errors?
- Can you distinguish in what part of the application the problem occurs?
- Can you find and understand the root cause?
- Solve it.
Userful links
Docs to read and tools to use:
- Are you Windows user? Safari debugging guide on Windows platform
- Stackoverflow answer invalid group specifier name
- Regular expressions explained - Lookbehind & lookaround
