Better reporting of hydration mismatches

[rudolfbyker]

What problem does this feature solve?

It is currently hard to debug:

• Hydration mismatches happening in production but not in development.
• Hydration mismatches happening for some but not all users in the field, but not in the lab.
• Hydration mismatches happening only at certain times / dates.
• Hydration mismatches happening due to external factors like misbehaving APIs.

Since Vue 3.4 is is possible to include details about hydration mismatches in production using a compile time flag: https://vuejs.org/api/compile-time-flags.html#VUE_PROD_HYDRATION_MISMATCH_DETAILS , but it still just goes to the console.

The relevant code starts here:

core/packages/runtime-core/src/hydration.ts

Line 610 in 34106bc

const handleMismatch = (

It would be great if we could provide a way of plugging this into something like Sentry for in-production, in-the-field collection of mismatch info.

What does the proposed API look like?

Since a mismatch is not a thrown error (and should not be), it currently just logs to the console. It would be nice if we could pass in some kind of onHydrationMismatch function, which gets called instead of warn.

It should get called once for each mismatch, if possible.

It should receive as arguments any DOM nodes and virtual nodes related to the mismatch.

[FreshRob]

I concur with this statement.

Recently we got hydration mismatches in production, and it took modifying the runtime-core to allow the dev logs for hydration

In our case it due to using toLocaleString and this would cause mismatching between the server and the client.

Would an acceptable solution in the short term be to add a defineOption to enable HydrationLogging vs using NODE_ENV === "production"

[FreshRob]

Following this, with the extra logging, we also saw some users using tools to translate from English to another language which then also causes a mismatch, without this extra logging it wouldn't of been possible to figure that out.

[rudolfbyker]

Updated the original post for Vue 3.4

[rudolfbyker]

A workaround specifically for Sentry: Use this integration https://docs.sentry.io/platforms/javascript/configuration/integrations/captureconsole/ along with the compile time flag https://vuejs.org/api/compile-time-flags.html#VUE_PROD_HYDRATION_MISMATCH_DETAILS . But this is not a general solution.