Can we make the ERR_SVELTE_HYDRATION_MISMATCH error more user friendly?

[thebjorn]

Describe the problem

I was getting this error

(index):57 ERR_SVELTE_HYDRATION_MISMATCH: Hydration failed because the initial UI does not match what was rendered on the server.

on a page that I eventually reduced to (it was example code from Auth.js):

<script>
    import LogOut from "$lib/components/LogOut.svelte";
    let { 
        data 
    } = $props();
</script>
<p>
    {#if data.session}
        <LogOut></LogOut>
    {/if}
</p>

and LogOut.svelte was simply

<h1>hello</h1>

In addition it only happened when the user was logged in (i.e. data.session) had a value.

It took me quite some time to figure out that it was the <p> and <h1> tags that were clashing - changing p to div, or h1 to strong solves the issue.

Quite obvious when you "get" it, but there wasn't any help from "the system" in figuring it out...

Describe the proposed solution

Would it be possible to include "what was rendered on the server", what "the initial UI" was, and/or where they didn't match?

Importance

would make my life easier

[trueadm]

We could possible add an attribute to the template element in DEV that contains a JSON DOM tree (just the element names) that we could then use to validate the output tree matches and if not supply a better message for what is mismatching.

[dummdidumm]

For this specific case, rather than failing on the client, we should probably already fail on the server. At dev time we can record which elements we're currently in and error if we discover that there's an invalid combination.

For the more general case of a mismatch it could help to at dev time somehow enhance our child/sibling etc calls with a string that represents the element we're expecting there, and when it fails while walking then we can say in which component at which position it failed (maybe this goes into the same direction as your JSON DOM tree idea).

[dummdidumm]

#10658 made the error clearer by showing an explicit error for the case of invalid nested HTML tags. Let's see if we also find a way to make the error more helpful in other situations.

[thebjorn]

@trueadm shouldn't ${message} be in quotes here: https://github.com/sveltejs/svelte/pull/10658/files#diff-e8cd30cfb0931b1ce87fcfc5d783f30effd1334222b69437f33e32eccbf48faaR110

I'm getting (with latest release):

[trueadm]

This has since been improved. Please let us know if you find any issues.

[thebjorn]

@trueadm It's a little bit better... I now get:

docsite:dev: Svelte SSR validation error:
docsite:dev:
docsite:dev: <button> is invalid inside <a>
docsite:dev:
docsite:dev: Ensure your components render valid HTML as the browser will try to repair invalid HTML, which may result in content being shifted around and will likely result in a hydration mismatch.

however, the <button> in question (I had to do a binary search from apps.html to find it) is not inside an <a> tag. I've gone through all instances of <a> tags in the entire application and there isn't any before this <button>. I'm sure it's just me not finding it, but there's really not an abundance of clues in the error message...

Would it be possible to provide the file/line number for each of the mentioned tags?

[trueadm]

@thebjorn sounds like a great idea. I’ll add that information to that error on Monday :)

[dummdidumm]

Error message now includes path to the component and line/column info