fix: opt React app shell out of Chrome Translate (#26)#28
Merged
Conversation
Chrome/Google Translate replaces text nodes inside the React-managed DOM, which breaks React's reconciliation and surfaces as `NotFoundError: Failed to execute 'insertBefore' on 'Node'` followed by `#root` being emptied. Users with Chrome Translate active reported `/projects/:id` rendering as a blank white page while `/console` continued to work in the same session. Mitigation: - Mark `<body>` and `#root` with `translate="no"` + `notranslate` so the React subtree is never mutated by Translate. Add a `<meta name="google" content="notranslate">` hint as well. - Keep the static SEO copy in `<main id="static-site-copy">` translatable by opting it back in with `translate="yes"` — it is outside `#root`, so it cannot break React anyway, and we still want crawlers / translated previews to see it. Hardening: - Default `latest.serp` to `[]` in ProjectCommandCenter so a partial / legacy project-summary payload cannot crash the project detail page. Regression test (tests/test_frontend_translate_optout.py) asserts the opt-out markers are present in the shipped `frontend/index.html`.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #26.
Summary
<body>and#root) withtranslate="no"+notranslate, plus a<meta name="google" content="notranslate">hint. This prevents Chrome/Google Translate from rewriting text nodes that React owns, which was producingNotFoundError: Failed to execute 'insertBefore' on 'Node'and leaving#rootempty on/projects/:id.<main id="static-site-copy">translatable by opting it back in withtranslate="yes"— it lives outside#root, so it can't break React, and we still want crawlers / translated previews to render it.latest.serp ?? []inProjectCommandCenterso a legacy / partial project-summary payload cannot crash the project detail page.Root cause
Chrome Translate (and similar extensions) mutate the DOM in place by replacing text nodes. React's reconciler keeps pointers into the DOM it last rendered, so when Translate splices nodes out,
insertBeforefrom React throws because the reference node is no longer a child of its expected parent. The result on production was the project detail page going blank withrootChildren: 0andhtml.translated-ltrpresent on the document.Test plan
pytest tests/test_frontend_translate_optout.py tests/test_frontend_public_byok_paths.py tests/test_web.py— 82 passed, 3 skippedruff check src/ tests/— cleantsc -b+vite build— clean; builtdist/index.htmlstill carriestranslate="no"on<body>and#rootand the<meta name="google" content="notranslate">hint/projects/:idafter deploy