Errors
Svelte Errors
To handle errors in Svelte, the load function at the top of each page can return an error status code (4xx and 5xx) and an error Object to describe the error. That will be passed to a page called __error.svelte which will display the error.
Bubbles makes styling the page easy by exporting a component called Error which will style the error page for you. Import it in your __error.svelte page and pass in the props from your load function.
<script context="module">
//__error.svelte
export function load({ error, status }) {
return {
props: {
status: status,
message: error.message,
title: ``, //will get autogenerated by Error component based on status,
},
};
}
</script>
<script>
import { Error } from "bubbles-ui";
export let status;
export let message;
export let title;
const props = {
status,
message,
title,
};
</script>
<Error {...props} />