Error handling in load in Svelte - Step-by-Step Execution

Concept Flow - Error handling in load

Page request starts

↓

Call load function

↓

Try to fetch data

↓

Return data

↓

Page renders

↓

End

When a page loads, the load function tries to get data. If it works, data is returned and page shows it. If it fails, error is caught and shown instead.

Execution Sample

Svelte

export async function load() {
  try {
    const res = await fetch('/api/data');
    if (!res.ok) throw new Error('Failed to load');
    return { data: await res.json() };
  } catch (error) {
    return { status: 500, error: new Error('Load error') };
  }
}

This load function fetches data and returns it. If fetching fails, it returns an error to show on the page.

Execution Table

Step	Action	Fetch Result	Condition	Outcome	Returned Value
1	Call load()	N/A	N/A	Start loading	N/A
2	Fetch '/api/data'	Response with status 200	res.ok is true	Success path	{ data: ... }
3	Page renders with data	N/A	N/A	Show data on page	N/A
4	Call load() again	N/A	N/A	Start loading	N/A
5	Fetch '/api/data'	Response with status 500	res.ok is false	Throw error	Error thrown
6	Catch error	N/A	N/A	Return error info	{ status: 500, error: Error('Load error') }
7	Page renders error	N/A	N/A	Show error message	N/A
8	End	N/A	N/A	Loading complete	N/A

💡 Execution stops after returning data or error info to render the page accordingly.

Variable Tracker

Variable	Start	After Step 2	After Step 5	Final
res	undefined	Response 200 OK	Response 500 Error	N/A
error	undefined	undefined	Error('Failed to load') caught	Error('Load error') returned
returnedValue	undefined	{ data: ... }	{ status: 500, error: Error('Load error') }	N/A

Key Moments - 3 Insights

Why do we check if res.ok is false after fetching?

Because fetch can succeed at network level but the server can respond with an error status. Checking res.ok ensures we catch such errors and handle them properly, as shown in steps 5 and 6.

What happens if an error is thrown inside load?

The error is caught by the catch block (step 6), which returns an error object. This tells SvelteKit to show an error page or message instead of normal data, as seen in step 7.

Why do we return an object with status and error in the catch block?

Returning { status, error } informs SvelteKit about the error status and message. This triggers the framework to render an error page automatically, instead of crashing or showing blank content.

Visual Quiz - 3 Questions

Look at the execution table, what is the returned value after a successful fetch at step 2?

A { data: ... }

B { status: 500, error: Error('Load error') }

C undefined

D Error thrown

💡 Hint

Check the 'Returned Value' column at step 2 in the execution_table.

At which step does the condition res.ok become false?

A Step 2

B Step 5

C Step 6

D Step 3

💡 Hint

Look at the 'Condition' column in the execution_table where res.ok is checked.

If the fetch URL was changed to a valid endpoint, how would the returnedValue change at step 5?

A It would throw an error

B It would return error info

C It would return { data: ... }

D It would be undefined

💡 Hint

Refer to variable_tracker and execution_table rows for successful fetch results.

Concept Snapshot

SvelteKit load function fetches data before page shows.
Use try-catch to handle fetch errors.
Check res.ok to detect HTTP errors.
Return { data } on success.
Return { status, error } on failure to show error page.
This keeps user informed and page stable.

Full Transcript

When a SvelteKit page loads, it runs the load function to get data. The load function tries to fetch data from an API. If the fetch is successful and the response is OK, it returns the data. The page then shows this data. If the fetch fails or the response is not OK, the load function catches the error and returns an error object with a status code. This tells SvelteKit to show an error page or message instead of normal content. Checking res.ok is important because fetch can succeed at the network level but the server might respond with an error status. Returning status and error in the catch block helps SvelteKit handle errors gracefully. This way, users see meaningful messages instead of broken pages.