Error pages (+error.svelte) - Step-by-Step Execution

Concept Flow - Error pages (+error.svelte)

User requests page

↓

Page loads successfully?

No→Error occurs

↓

+error.svelte loads

↓

Show page content

↓

Display error message

↓

User sees error page

When a page fails to load, SvelteKit shows the +error.svelte component to display a friendly error message.

Execution Sample

Svelte

<script>
  export let error;
  export let status;
</script>
<h1>{status}</h1>
<p>{error.message}</p>

This +error.svelte component shows the error status and message when a page fails.

Execution Table

Step	Action	Input/Error	Component State	Output Rendered
1	User requests /missing-page	No page found (404)	error.message='Not Found', status=404	Render +error.svelte with 404 and 'Not Found'
2	+error.svelte receives props	error.message='Not Found', status=404	error and status set	<h1>404</h1><p>Not Found</p>
3	User sees error page	Rendered HTML	Static error page shown	User sees '404' and 'Not Found' message
4	User requests /server-error	Server error (500)	error.message='Internal Server Error', status=500	Render +error.svelte with 500 and message
5	+error.svelte receives props	error.message='Internal Server Error', status=500	error and status set	<h1>500</h1><p>Internal Server Error</p>
6	User sees error page	Rendered HTML	Static error page shown	User sees '500' and 'Internal Server Error' message
7	User requests /valid-page	Page loads OK	No error	Page content rendered, +error.svelte not used
8	End	No error	No error state	Normal page shown, no error page

💡 Execution stops when page loads successfully or error page is shown for failure.

Variable Tracker

Variable	Start	After Step 1	After Step 4	After Step 7	Final
error.message	undefined	'Not Found'	'Internal Server Error'	undefined	undefined
status	undefined	404	500	undefined	undefined

Key Moments - 2 Insights

Why does +error.svelte show different messages?

Because it receives the error and status from the failed page load, as shown in execution_table rows 1 and 4.

When is +error.svelte NOT used?

When the page loads successfully without errors, like in execution_table row 7, the normal page content shows instead.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of status at step 2?

A 404

B 500

C undefined

D 200

💡 Hint

Check the 'Component State' column at step 2 in the execution_table.

At which step does the user see the 'Internal Server Error' message?

A Step 3

B Step 6

C Step 5

D Step 7

💡 Hint

Look for the 'Output Rendered' column mentioning 'Internal Server Error' in the execution_table.

If the page loads successfully, what happens to the error variables?

A They keep their last error values

B They show default error messages

C They become undefined

D They cause +error.svelte to render anyway

💡 Hint

See variable_tracker values after step 7 and final column.

Concept Snapshot

In SvelteKit, +error.svelte shows error pages.
It receives 'error' and 'status' props.
Displays error status code and message.
Used only when a page load fails.
Otherwise, normal page content shows.
Customize +error.svelte to style error pages.

Full Transcript

When a user requests a page, SvelteKit tries to load it. If the page loads successfully, the normal content shows. If there is an error, like a 404 or 500, SvelteKit uses the +error.svelte component. This component receives two pieces of information: the error object and the status code. It then displays these to the user, for example showing '404' and 'Not Found' for a missing page. The execution table shows step-by-step how the error page is rendered and what the user sees. Variables like error.message and status change only when an error occurs. When the page loads fine, these variables are undefined and +error.svelte is not used. This helps users understand what went wrong in a friendly way. You can customize +error.svelte to change how error pages look and what they say.