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.

It would be great if we could

1. Provide more details about the mismatches instead of just "Hydration completed but contains mismatches." https://github.com/vuejs/core/blob/3be4e3cbe34b394096210897c1be8deeb6d748d8/packages/runtime-core/src/hydration.ts#L87
2. 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 console.error.

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.

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"

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.