Change Details

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](https://github.com/nuxt/nuxt.js/issues/5800) 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 {F30629393} Info * [[ https://ssr.vuejs.org/guide/hydration.html | Vue SSR hydration documentation ]]

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](https://github.com/nuxt/nuxt.js/issues/5800) 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 {F30629393} Info * [[ https://ssr.vuejs.org/guide/hydration.html | Vue SSR hydration documentation ]] **Questions to answer as part of this investigation** - Do we want/need to setup alerts for when CSR fails to rehydrate? - Is there a way to enforce changing termbox cache version when markup is changed in a patch more actively (e.g. build step to check)? - 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?

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](https://github.com/nuxt/nuxt.js/issues/5800) 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 {F30629393} Info * [[ https://ssr.vuejs.org/guide/hydration.html | Vue SSR hydration documentation ]] **Questions to answer as part of this investigation** - Do we want/need to setup alerts for when CSR fails to rehydrate? - Is there a way to enforce changing termbox cache version when markup is changed in a patch more actively (e.g. build step to check)? - 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?