Skip to content

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

Open
@claudiaballano

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions