Cannot Create projects when translation to Chinese in turned on in the browser

[olevski]

Seen on renku 2.17.2

To replicate:

• go to renkulab.io
• turn on translation to chiense (simplified)
• try to create a project
• it fails

Reported by @bethcg seen during a workshop with many chinese students who used translation software.

I looked at the API requests, the project gets successfully created in the backend.

I suspect this may be happening with many other languages - probably more likely on the ones that use non-latin alphabets.

I tested this on a brave browser.

[sentry]

Sentry Issue: RENKU-UI-AG

[olevski]

There are several of these "failed to execute insertBefore" errors on sentry. I linked one the details from it indicate it happened exactly during the hackathon that @bethcg attended and where she saw this problem.

[lorenzo-cavazzi]

There is a known problem with the Google Translate plugin and React applications (ref -- more formal ref). The error we see in Sentry matches the description, and Chinese doesn't matter, it happens with every language.

If we care about client-side plugin compatibility (Google Translate might be on my default in many browsers), we could instruct Translate to avoid in-place translation by adding translate="no" in the html tag. But that would inhibit translation on the whole app.

I've seen code snippets that help prevent the crash, perhaps we can give it a try if we care about this

[lorenzo-cavazzi]

P.S: here is a possible fix that should handle Google Translate (and potentially other plugins) messing around with the DOM
https://renku-ci-ui-4203.dev.renku.ch/

[leafty]

Thanks @olevski for reporting! The error has been happening since forever and we had no idea what this "failed to execute insertNode" meant and what actually happened for users.