feat: avoid Google Translate plugin crashes

[lorenzo-cavazzi]

Avoid crashing the browser when Google Translate does its own thing with the DOM

/deploy renku=release-2.18.0
fix #4202

[RenkuBot]

You can access the deployment of this PR at https://renku-ci-ui-4203.dev.renku.ch

[leafty]

The fix-method needs to run at the top of the client init script. At the moment the client entrypoint is hidden, so here is how to do it properly:

1. Run $ npx react-router reveal in client/:

   Entry file entry.client created at src/entry.client.tsx.
   Entry file src/entry.server.tsx already exists.
   

2. Open the new file src/entry.client.tsx and edit it:

import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
import { HydratedRouter } from "react-router/dom";
import { fixExternalDOMMutationsCrashes } from "./utils/...";

// Prevent crashes from browser extensions, e.g. Google Translate
fixExternalDOMMutationsCrashes();

startTransition(() => {
  hydrateRoot(
    document,
    <StrictMode>
      <HydratedRouter />
    </StrictMode>,
  );
});

[leafty]

We should keep the original implementation from React.

1. Add a comment like this:

   // Reference: https://github.com/facebook/react/issues/11538
   // This fixes React crashing when the DOM is manipulated by extensions, e.g. Google Translate

2. Name the method something like fixExternalDOMMutationsCrashes()
3. Use the implementation from Make React resilient to DOM mutations from Google Translate facebook/react#11538 (comment). As far as we know, it's the best implementation of the fix (from the React team).
4. Instead of logging to console we can also consider sending warning or info to Sentry.

[leafty]

This runs in the server too, so this is not the right place for this method.

[leafty]

If the method in startTransition() is executed more than once, then maybe this is better:

Suggested change

	startTransition(() => {
	// Prevent crashes from browser extensions like Google Translate
	fixExternalDOMMutationsCrashes();
	hydrateRoot(
	document,
	<StrictMode>
	<HydratedRouter />
	</StrictMode>,
	);
	});
	// Prevent crashes from browser extensions like Google Translate
	fixExternalDOMMutationsCrashes();
	startTransition(() => {
	hydrateRoot(
	document,
	<StrictMode>
	<HydratedRouter />
	</StrictMode>,
	);
	});

We can check if it's better outside of the startTransition().

[leafty]

Sorry, I am not sure if it's best to call before startTransition or inside it 😅

[lorenzo-cavazzi]

It should run only once, let's try to leave it outside 5509d5d

[leafty]

LGTM, one non-blocking comment below.

[leafty]

Note: I have seen implementations use a variable on window to ensure this is executed only once, e.g.

if (typeof window === 'object' && window.__renku_appliedDOMFix == null) {
  // ...body...
  window.__renku_appliedDOMFix = true;
}

[lorenzo-cavazzi]

That's a good suggestion to prevent accidental double run. Worst case, it's an unnecessary safeguard
ffa7631

[leafty]

LGTM, tested on chrome: I crash in dev with translate and with this PR I can use translate and it seems to not crash.

[RenkuBot]

Tearing down the temporary RenkuLab deplyoment for this PR.