Page MenuHomePhabricator

Investigate why Termbox CSR failed to override mismatching SSR markup
Closed, ResolvedPublic

Description

Termbox was broken in production after changes to the markup were deployed. The console output read: DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method. which in other projects hints at hydration problems due to mismatching markup. Deploying the latest version to the SSR service fixed the problem once the parser cache was purged.

Until now we always assumed this not to be a problem, and that client-side rendering would override the server-side rendered markup no matter its content. This should be reproducible locally by rendering having CSR (in Wikibase) checked out with https://gerrit.wikimedia.org/r/c/wikibase/termbox/+/541235 and SSR with a commit prior to that.

Probably not needed for the investigation but here they are anyway:

  • item that's currently still broken until PCache is purged: https://m.wikidata.org/wiki/Q778
  • error output screenshot; anything except the lower part seems unrelated

Info

Investigation timeboxed to: 4 hours for initial investigation.

Questions to answer as part of this investigation

  • Do we want/need to setup alerts for when CSR fails to rehydrate?
  • Do we want/need to find a way to make sure CSR updates do not land in production without SSR being up-to-date with it?

Details

Related Gerrit Patches:

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 11 2019, 11:27 AM
Jakob_WMDE updated the task description. (Show Details)Oct 11 2019, 11:38 AM
Jakob_WMDE added a subscriber: alaa_wmde.

Hint: https://ssr.vuejs.org/guide/hydration.html#hydration-caveats

In development mode, Vue will assert the client-side generated virtual DOM tree matches the DOM structure rendered from the server.
If there is a mismatch, it will bail hydration, discard existing DOM and render from scratch.
In production mode, this assertion is disabled for maximum performance.

Jakob_WMDE updated the task description. (Show Details)Oct 11 2019, 12:44 PM
Pablo-WMDE updated the task description. (Show Details)Oct 11 2019, 1:00 PM
alaa_wmde triaged this task as Medium priority.Oct 11 2019, 1:51 PM
alaa_wmde updated the task description. (Show Details)
This comment was removed by alaa_wmde.
alaa_wmde raised the priority of this task from Medium to High.Oct 29 2019, 1:05 PM
Addshore updated the task description. (Show Details)Oct 29 2019, 1:06 PM

Change 547558 had a related patch set uploaded (by Jakob; owner: Jakob):
[wikibase/termbox@master] Rerender if hydration from server-side rendering fails

https://gerrit.wikimedia.org/r/547558

Change 547558 merged by jenkins-bot:
[wikibase/termbox@master] Rerender if hydration from server-side rendering fails

https://gerrit.wikimedia.org/r/547558

alaa_wmde closed this task as Resolved.Tue, Nov 26, 1:59 PM

We haven't experience any failures in production.. although it might be because we didn't yet introduce any breaking changes in CSR compared to SSR yet.

But we believe tests in the patch are enough confirmation of the solution for now