"Hydration completed but contains mismatches" error not caught by the Vue error handler

[claudiaballano]

Vue version

3.5

Link to minimal reproduction

https://play.vuejs.org/#__SSR__eNp9UstqwzAQ/BWhS1MINiHtJTiBNuTQQh+0PQqKsDeJU1kSergB43/vrl2noU1z0+7MSLM7aviNtUkdgc945nNX2sA8hGgXQpeVNS6wpaksWztTsYskpYLoFwe4MXrlnHFLaUN0UIyZg3X7LeiZQudG+8CAeGxOhJGOSl0S9Es+QhKbL1gjNOsFSS1VBJRhRU2pwAWiobztrsjS3jl6xiJAZZUMgBVjGRlO8ZilR30+5sGjp3W5SXbeaBy+e0/wHOklPvBkQ4meBZ/1TgiTSpnP+64XXITx0M+3kH+c6O/8nnqCPzvw4GoQ/IAF6TYQenj1+gh7PB/AyhRRIfsM+ALeqEgee9pt1AXaPuJ1bu+6jEq9efOrfQDth6HIKDHbji84BkWb+m/0H7vT5KrT4e5xi8N3OPF7htDLAqN7kGGbOKkLU40wsnOBbSeLpiFV22YpFn+je6/B0SD46DS5TiZT3n4BfWfvyQ==

Steps to reproduce

After this change, more hydration mismatch errors are appearing in production. However, Vue's error handlers are unable to catch them, likely because console.error is used directly instead of handleError.

Additionally, it would be helpful if these errors logged more contextual information rather than just a plain string, making debugging easier.

In the provided reproduction link, I introduced a random ID to force a hydration mismatch. However, Vue's error handler does not catch it. I also tested with app.config.errorHandler, but the issue persists.

What is expected?

Vue’s error handlers (onErrorCaptured and app.config.errorHandler) should be able to catch hydration mismatch errors, but they currently cannot, likely because console.error is used directly instead of handleError. Logging these errors through handleError would ensure they are properly intercepted, making it possible to handle them and provide better debugging insights.

What is actually happening?

Debugging becomes harder since it's just an string.

System Info

Any additional comments?

No response

[edison1105]

You can enable VUE_PROD_HYDRATION_MISMATCH_DETAILS to display details in the production build.

[claudiaballano]

VUE_PROD_HYDRATION_MISMATCH_DETAILS

Yes @edison1105 , but this will only enable the warning. Our goal is to catch the errors and enrich them with more context. Imagine errors are being reported to an observability tool, they lack sufficient information for effective debugging.