Page MenuHomePhabricator

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


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 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:
  • error output screenshot; anything except the lower part seems unrelated


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?

Event Timeline


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.

alaa_wmde updated the task description. (Show Details)
alaa_wmde raised the priority of this task from Medium to High.Oct 29 2019, 1:05 PM

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

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

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