chore: avoid reporting inspections when an exception occurs

.changeset/light-crews-deny.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: avoid reporting inspections when an exception occurs

packages/svelte/src/internal/client/dev/inspect.js

@@ -1,3 +1,4 @@
+import { UNINITIALIZED } from '../../../constants.js';
 import { snapshot } from '../../shared/clone.js';
 import { inspect_effect, validate_effect } from '../reactivity/effects.js';
 
@@ -12,7 +13,24 @@ export function inspect(get_value, inspector = console.log) {
 	let initial = true;
 
 	inspect_effect(() => {
-		inspector(initial ? 'init' : 'update', ...snapshot(get_value(), true));
+		/** @type {any} */
+		var value = UNINITIALIZED;
+
+		// Capturing the value might result in an exception due to the inspect effect being
+		// sync and thus operating on stale data. In the case we encounter an exception we
+		// can bail-out of reporting the value. Instead we simply console.error the error
+		// so at least it's known that an error occured, but we don't stop execution
+		try {
+			value = get_value();
+		} catch (error) {
+			// eslint-disable-next-line no-console
+			console.error(error);
+		}
+
+		if (value !== UNINITIALIZED) {
+			inspector(initial ? 'init' : 'update', ...snapshot(value, true));
+		}
+
 		initial = false;
 	});
 }

packages/svelte/tests/runtime-runes/samples/inspect-exception/Component.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	let { a = $bindable() } = $props();
+
+	$inspect(a).with((t, c) => console.log(t, c));
+
+</script>
+<p>{a}</p>

packages/svelte/tests/runtime-runes/samples/inspect-exception/_config.js

@@ -0,0 +1,16 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	async test({ assert, target, logs }) {
+		const b1 = target.querySelector('button');
+		b1?.click();
+		flushSync();
+
+		assert.deepEqual(logs, ['init', 'a', 'init', 'b']);
+	}
+});

packages/svelte/tests/runtime-runes/samples/inspect-exception/main.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import Component from './Component.svelte';
+
+	let s = $state({ a: {"1": "a", "2": "b"} });
+</script>
+
+<button onclick={() => (s = {})}>Set State</button>
+
+{#if s.a}
+	{#each Object.entries(s.a) as [k, v]}
+		<Component bind:a={s.a[k]} />
+	{/each}
+{/if}