Skip to content

fix: keep the registration form from crashing under chrome translate - #75

Merged
Adel2411 merged 1 commit into
devfrom
fix/translate-dom-crash
Nov 6, 2026
Merged

Adel2411 merged 1 commit into
devfrom
fix/translate-dom-crash

Conversation

@0xHouss

@0xHouss 0xHouss commented Nov 5, 2026

Copy link
Copy Markdown
Collaborator

Keeps the registration form working for applicants who translate the page with Chrome's Google Translate.

The crash: Translate replaces text nodes with its own <font> elements. On SUBMIT, McButton inserts its spinner before the "SUBMIT" text node, which is no longer in the button, so React throws NotFoundError: insertBefore and the whole page falls to global-error.tsx, while the request still goes through behind it (react/react#11538).

  • DOM guard: src/lib/translate-dom-guard.ts wraps Node.prototype.insertBefore and removeChild. When the node React expects has been moved or replaced, it inserts before (or removes) whatever still holds it, or appends (or does nothing) when it left the page, instead of throwing. Calls on nodes still in place run unchanged, so untranslated pages never reach the fallback. Installed site-wide from src/instrumentation-client.ts, before the app is interactive.
  • Recap as typed: the review dialog marks the applicant's answers, file name, links and skills translate="no". Translate turned the skill "react" into "réagir"; the labels and questions still translate.
  • Error boundary: src/app/(registrations)/error.tsx, so a crash in the form keeps the menu instead of replacing the root layout. It shares ErrorFallback (src/components/shared/) with (site)/error.tsx.

Known limit: under translation, a text React changes afterwards can stay in its old translated form until Translate passes again (e.g. the menu bar countdown). Nothing crashes.

Tested in Chromium with Translate set to French, same flow on both: on dev, SUBMIT ends on the full error page with the insertBefore error; on this branch, the spinner shows and the result modal opens, with no page error. Unit tests for the guard's fallbacks (translate-dom-guard.test.ts).

Closes #71

@vercel

vercel Bot commented Nov 5, 2026 •

Copy link
Copy Markdown
Contributor

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
mc-website Ready Ready Preview Nov 5, 2026 10:48pm UTC

@Adel2411
Adel2411 merged commit 417cb09 into dev Nov 6, 2026
3 checks passed
@Adel2411
Adel2411 deleted the fix/translate-dom-crash branch November 6, 2026 03:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants