When Google Translate Meets React: A Bug Story Worth Sharing

Here's an interesting challenge I recently faced: what happens when React and Google Translate try to work together on mobile devices? Turns out, they don't always play nice – and the solution revealed some fascinating insights about how our favorite framework handles DOM manipulation.

The Discovery

The mystery started with our error logs lighting up. Our React app was crashing for mobile users, but only sometimes, and only for certain people. Like any good detective story, we had our first clue:

TypeError: Cannot read properties of null (reading 'parentNode')        

After some debugging, we discovered something surprising: Google Translate was behind it all!

Let me walk you through what we found.

Understanding the Problem

Here's the thing about Google Translate – when users enable it on mobile devices, it gets a bit creative with the DOM. It wraps every text node in a <font> tag. Not a big deal, right? Well, React begs to differ.

The sequence goes something like this:

1. React keeps track of how the DOM should look (its virtual DOM)
2. Google Translate sneaks in and adds <font> tags everywhere
3. React's mental model of the page no longer matches reality
4. When React tries to update things... boom! ??

Let's Break It Down

Take this innocent-looking React component:

function Welcome() { 
    return  <div>Hello, World!</div>; 
}
        

After Google Translate does its thing, the actual DOM looks like this:

<div> 
    <font> 
        Hello, World! 
    </font> 
</div>        

React expects the text to be right where it left it, but suddenly there's a new <font> tag in the mix. Not ideal.

Why Can't React Just Handle It?

We took to researching this question and came across Dan Abramov's answer on the Github issue on the matter: fixing this at the React level would mean either slowing down the framework or making it harder to catch real bugs. Sometimes the elegant solution isn't the right one.

The good news however, he does offers a temporary workaround. It's not perfect, but it gets the job done:

if (typeof Node === 'function' && Node.prototype) {
  const originalRemoveChild = Node.prototype.removeChild;
  Node.prototype.removeChild = function(child) {
    if (child.parentNode !== this) {
      if (console) {
        console.error('Cannot remove a child from a different parent', child, this);
      }
      return child;
    }
    return originalRemoveChild.apply(this, arguments);
  }

  const originalInsertBefore = Node.prototype.insertBefore;
  Node.prototype.insertBefore = function(newNode, referenceNode) {
    if (referenceNode && referenceNode.parentNode !== this) {
      if (console) {
        console.error('Cannot insert before a reference node from a different parent', referenceNode, this);
      }
      return newNode;
    }
    return originalInsertBefore.apply(this, arguments);
  }
}        

This patch helps React handle those unexpected DOM changes, though it may come with a small performance cost.

What I Learned

This whole experience taught me some valuable lessons about building better web apps:

1. Detailed Logging is Your Friend: Those annoying verbose logs? They will always come in handy cracking these sort of cases.
2. Think Beyond Local Testing: What works perfectly in your development environment might break in unexpected ways when users bring their own tools to the party.
3. Error Boundaries Are Essential: Having proper fallbacks in place helps maintain a smooth user experience, even when things go sideways.
4. Consider Translation Tools Early: If your app might be used internationally, factor in translation tools during your planning phase.

Looking Forward

The Chromium team is working on a better solution at the browser level. Until then, we're keeping our error handling sharp and our logging verbose. (Link to the currently opened Chromium ticket)

While this wasn't the most straightforward bug we've tackled, it's a perfect example of how modern web development often involves finding the right balance between different tools and services.

Let's Share Knowledge

How do you handle translation tools in your React apps? Have you run into similar challenges with third-party services modifying your DOM? Share your experiences in the comments – there's always more to learn from each other.

#ReactJS #WebDevelopment #FrontendDevelopment #Programming #Debugging #GoogleTranslate #JavaScript