SSR Hydration mismatch error message on class is unhelpful

[michaelhthomas]

Vue version

3.4.7

Link to minimal reproduction

https://stackblitz.com/edit/vue-ssr-example-suhfbu?file=server.js

Steps to reproduce

1. Have a hydration mismatch on an element's class property (maybe others as well?)
2. View the error in the console

What is expected?

The error conveys the mismatch between the server in client by displaying the class values on both the client and server.

What is actually happening?

The error, shown below, does not pretty print the class value, so it is output as [object Set]. This makes it more difficult to debug and resolve hydration mismatches.

[Vue warn]: Hydration class mismatch on 
<div class="0.1731338173">
 
  - rendered on server: class="[object Set]"
  - expected on client: class="[object Set]"
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
  You should fix the source of the mismatch. 
  at <App> vue.esm-browser.js:1587:13

System Info

No response

Any additional comments?

This bug can be pretty frustrating when working with poppers and other components that depend on unique identifiers in css classes.

[brgkcosic]

I know I had the same issue, Math.random() is being called twice hence you get different results.