Errors

Use a @try statement to catch errors thrown while rendering its content, and show a catch branch instead:

export default function Component($props: { user: User }) {
	@render {
		@try {
			<p>
				Hello, {$props.user.name.toUpperCase()}!
			</p>
		} catch (err) {
			<p class="error">
				Couldn't show user: {err.message}
			</p>
		}
	}
}

A @try statement catches render errors from the component tree below it, including errors thrown by getters, @const statements and async values that reject. A @try without a catch branch lets errors bubble up to the nearest boundary.

The @error block

A top-level @error block catches render errors for a whole component, like wrapping the @render block in a @try statement:

export default function Component($props: { user: User }) {
	@render {
		<UserDetails user={$props.user} />
		<UserPosts user={$props.user} />
	}

	@error (err) {
		<p class="error">
			Something went wrong: {err.message}
		</p>
	}
}

Note that the @error block doesn't catch errors thrown by the component's setup code (the statements before @render), only errors thrown while rendering.