vue icon indicating copy to clipboard operation
vue copied to clipboard

Improve Hydration Warnings

Open fadamakis opened this issue 1 year ago • 4 comments

What problem does this feature solve?

When hydration fails the helpful information about the DOM structure and the source of the problem is logged with a console.warn which is not available on the production build. The only available message is "Failed to execute 'appendChild' on 'Node': This node type does not support this method." which is very hard to trace the error from.

What does the proposed API look like?

The console usage could be replaced by the warnHandler, an error or a configuration that controls how this warning is logged.

fadamakis avatar Oct 17 '22 14:10 fadamakis

Hello 👋🏽 I am facing the same problem with non-reproducible hydration errors (observed on our error reporting tool). Have you been able to make any progress on this?

massiaitali avatar Mar 06 '23 15:03 massiaitali

Unfortunately not, but It supposed to be on the roadmap for the upcoming Vue release, as announced during Vuejs Amsterdam.

20230210_095003.jpg

fadamakis avatar Mar 06 '23 16:03 fadamakis

Ah 😭 Good to know (Just for vue3 I guess)

massiaitali avatar Mar 06 '23 16:03 massiaitali

I try to understand these errors by using a custom vue runtime on production build and adding a try/catch with a log to know where is my hydration issue. The detection helps already present in the vue runtime in dev mode, a simple thing would be to activate them in a production build because in my case these errors are not reproducible locally (dev mode and with no production data).

massiaitali avatar Mar 07 '23 14:03 massiaitali