1562293 - Make sure beta pages work with google translate

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: Wiki pages, defect)

Description

[David Flanagan [:djf]]

Non-beta pages look horrible in google translate, but they do get translated:

https://translate.google.com/translate?hl=&sl=fr&tl=en&u=https%3A%2F%2Fdeveloper.mozilla.org%2Ffr%2Fdocs%2FWeb%2FHTML&sandbox=1

But when we try the same thing with a beta page, errors occur, React panics and everything goes blank:

https://translate.google.com/translate?hl=&sl=fr&tl=en&u=https%3A%2F%2Fbeta.developer.mozilla.org%2Ffr%2Fdocs%2FWeb%2FHTML

For feature parity we need to make sure that beta pages are at least somewhat usable in google translate.

(Note that the translation that runs inside Chrome itself seems to work well enough: this is just for the translate.google.com website, when you paste in a link to an MDN page)

Comment 1

[David Flanagan [:djf]]

The immediate cause of the error is when we call replaceState() on the first load, and we give it an MDN URL when the pages is now at translate.googleusercontent.com That error propagates, React panics, and all the content (except the footer) is gone.

I would guess that if we work around that one particular exception that there will be others as well, and I don't want to get into a whack-a-mole game trying to anticipate everything that could go wrong when google takes our page and runs it in its own domain.

Because of the way we display the entire document as a string of HTML in an <Article> component, I suspect that trying to set up an error boundary wouldn't really solve this problem.

If we were not doing server-side rendering, then we could try just not rendering the Router component when we see that we're running in google's domain. But since we are doing SSR, the approach I'm going to try is to check window.origin, and if we're being translated, we just won't hydrate the page. We'll lose some interactivity that way, perhaps, but by just treating the page as static HTML we should eliminate the risk of React unmounting everything.

I've used the debugger to set a breakpoint before the hydrate call, then used the console to set ReactDOM.hydrate() to an empty function. When I resume execution the translated content does not disappear, so I think this approach will work for us.

A PR is forthcoming.

Comment 2

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/kuma/pull/5530

Comment 3

[David Flanagan [:djf]]

Peter was able to figure out how to test the patch with a ssh tunnel courtesy of serveo.net. It works well enough and has landed in master.