It’s We Build Wednesday time 🛠️

Our devs regularly review sentry logs to ensure a smooth UX & this time found a real sneaky bug.

The bug was initially a brain teaser as it was not isolated to a specific page & at first glance, there was no way to reproduce it.

The light bulb moment was a cryptic message in the error logs ("React DOMException: Failed to execute 'removeChild' on 'Node'"), which made us realize it was React-related. React (the most popular frontend framework powering 50M+ websites) has a long-time bug that caused website crashes while used with Google Translate under specific scenarios. Yeah I know, check the details here https://t.co/IzqDARY9s5

The suggested solution of wrapping conditionally rendered text nodes in tags didn't work for us because of conflicts with the tags we use for translations. This made it difficult to automatically find and fix these issues. On the other hand, with thousands of text nodes, manually fixing them one by one wasn't practical.

The team had to get creative & they developed a clever workaround:

→ They "monkey patched" React to watch for when Google Translate was enabled with “MutationObserver” function.

→ If it was, they'd make sure React handled text nodes with “removeChild” & “insertBefore” methods, so that the texts nodes are removed or inserted correctly, preventing the crashes.

And the problem is solved! Our users can now enjoy a seamless experience without any unexpected crashes. And thanks to our team's ingenuity, the fix was implemented without sacrificing performance.