Fix live results error page from browser auto-translate (#48277)#48705
Conversation
Chrome's auto-translate wraps text nodes in <font> elements, detaching DOM nodes React holds references to. As live query/policy results stream in and cells unmount, React's removeChild throws NotFoundError, which the error boundary catches and renders as a full error page. Exclude the live-results subtrees from translation with the notranslate class on the QueryResults and PolicyResults containers.
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
There was a problem hiding this comment.
Claude Code Review
This repository is configured for manual code reviews. Comment @claude review to trigger a review and subscribe this PR to future pushes, or @claude review once for a one-time review.
Tip: disable this comment in your organization's Code Review settings.
There was a problem hiding this comment.
Pull request overview
Prevents Chrome’s auto-translate from crashing Fleet’s live results views (live query/report and live policy) by excluding the rapidly-updating results subtree from translation, avoiding React DOM unmount errors that trigger the error boundary.
Changes:
- Add the
notranslateclass to the top-level container inQueryResultsto prevent browser translation from mutating streaming DOM nodes. - Add the
notranslateclass to the top-level container inPolicyResultsfor the same live-streaming results behavior. - Document the underlying Chrome/Translate + React
removeChildNotFoundErrorroot cause inline for future maintainers.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| frontend/pages/queries/edit/components/QueryResults/QueryResults.tsx | Adds notranslate on the live query/report results container to avoid translate-induced DOM detachment during streaming updates. |
| frontend/pages/policies/edit/components/PolicyResults/PolicyResults.tsx | Adds notranslate on the live policy results container to avoid the same translate-induced React unmount crash. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
WalkthroughCompact metadata ChangesThe PolicyResults and QueryResults root containers now include the Sequence Diagram(s)No sequence diagram generated. Related issues: Poem 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #48705 +/- ##
=======================================
Coverage 68.01% 68.01%
=======================================
Files 3680 3680
Lines 233953 233953
Branches 12307 12307
=======================================
Hits 159132 159132
Misses 60502 60502
Partials 14319 14319
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
Related issue: Resolves #48277
What & why
Running a live report/query (or live policy) on some machines throws a full error page once results start streaming in:
Root cause: Chrome's built-in auto-translate (Google Translate) wraps text nodes in
<font>elements, detaching the original DOM nodes React holds references to. As live results stream in over the websocket, table cells (and the responded-count heading) unmount rapidly; React then callsparentNode.removeChild(node)on a node Translate has already moved, throwingNotFoundError. The app's error boundary catches it and renders the error page (react/react#11538).This is why it's machine-dependent: it only reproduces when Chrome is translating the page. It surfaces on live results specifically because that's one of the few surfaces that unmounts DOM rapidly while displaying translatable text.
Fix: Exclude the live-results subtrees from translation via the
notranslateclass on the top-level containers ofQueryResults(live report/query) andPolicyResults(live policy). These wrappers cover theLiveResultsHeadingcounts, the results table, and (policy) the errors table. Translation stays enabled everywhere else in the app.How to reproduce / QA
Checklist for submitter
SELECT *is avoided, SQL injection is prevented (using placeholders for values in statements), JS inline code is prevented especially for url redirects, and untrusted data interpolated into shell scripts/commands is validated against shell metacharacters.Testing
For unreleased bug fixes in a release candidate, one of:
Summary by CodeRabbit