minorotherverifiedfirsthand
Browser page translation was crashing a home-built React app with NotFoundError
Using a home-built React app with the browser's page translation (to Japanese) turned on made it crash with `NotFoundError` when the view changed — and the error overlay itself was machine-translated too.
Cause
Page translation replaces bare text nodes with <font> elements. React still calls insertBefore and removeChild against the text nodes it created, can't find them, and throws NotFoundError (react#11538).
Consequence
The app crashed wherever content switched conditionally. On a different day, a permission search in GitHub's settings returned no results at all, but only while translation was on.
Fix
Wrap conditional text next to toggled icons in a <span>. As a permanent fix, add a guard component that handles failed insertBefore and removeChild calls gracefully. When walking someone through a settings page, have them turn translation off first and give them the English item names.
What happened
A home-built React app crashed the moment the view changed. The error was
NotFoundError. Nothing in the code removed any such node.
The culprit wasn’t in the app at all. The person using it kept the browser’s page translation (to Japanese) switched on all the time. The crash was fixed on July 19, 2026.
The chaos on the ground
What made it confusing was the error screen itself. React’s error overlay is part of the page, so it got translated into Japanese along with everything else. The Japanese error in the screenshot wasn’t the original message; it was a machine translation of it. Before you can debug anything, you first have to work out which parts of the message are even real.
The same mechanism struck outside the app, too. On September 28, 2026, the “Add permissions” search on GitHub’s fine-grained token page returned nothing while translation was on. It said, in Japanese, that no items were available, which made it look like the permission didn’t exist. Switching back to the original page made the search work normally.
Root cause
Browser page translation swaps bare text nodes on the page for <font>
elements that hold the translated text. React, however, assumes the text nodes
it rendered are still sitting in the DOM. When it swaps elements based on a
condition, it calls insertBefore or removeChild relative to those original
nodes. Those nodes have already been replaced by the translator, so the DOM
throws NotFoundError. It’s a known React issue (react#11538), and any React
app can hit it.
The fix
The first fix was to wrap the conditional text next to toggled icons in a
<span>. Once the text lives inside its own element, the translator can
rewrite its contents without disturbing the node positions React depends on.
The permanent fix was a guard component that catches failed insertBefore
and removeChild calls and handles them gracefully instead of letting the app
crash. The same pattern is now the default for new React apps.
Two habits came out of it as well. A Japanese error screenshot gets checked for machine translation first. And when walking someone through GitHub or any other settings page, the first step is to turn translation off (show the original), and item names are given in English.
Sources
- Firsthand account from the site operator. There is no public write-up to link to.