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.

Practice

1. What is the main purpose of using error handling in the load function in SvelteKit?

easy

A. To style the page dynamically

B. To speed up the loading of data

C. To keep the app stable when data fails to load

D. To preload images before rendering

Solution

1. Step 1: Understand the role of load in SvelteKit

   The load function fetches data before the page renders.

2. Step 2: Identify why error handling is needed

   If data fetching fails, error handling prevents the app from crashing and shows a proper message.

3. Final Answer:

   To keep the app stable when data fails to load -> Option C

4. Quick Check:

   Error handling in load = stability [OK]

Hint: Error handling keeps your app stable on data failure [OK]

Common Mistakes:

• Thinking error handling speeds up loading
• Confusing error handling with styling
• Assuming error handling preloads images

2. Which of the following is the correct way to throw an error with status 404 inside a load function?

easy

A. throw new Error(404, 'Not found')

B. throw error(404, 'Not found')

C. return { error: 404, message: 'Not found' }

D. throw { status: 404, message: 'Not found' }

Solution

1. Step 1: Recall SvelteKit's error helper usage

   SvelteKit provides an error function to throw HTTP errors with status and message.

2. Step 2: Match the correct syntax

   The correct syntax is throw error(404, 'Not found'). Other options are invalid or incomplete.

3. Final Answer:

   throw error(404, 'Not found') -> Option B

4. Quick Check:

   Throw error helper = throw error(404, message) [OK]

Hint: Use throw error(status, message) in load [OK]

Common Mistakes:

• Using new Error() with status code
• Returning error object instead of throwing
• Throwing plain objects without error helper

3. Given this load function, what will be the output if the fetch fails with a 500 status?

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

medium

A. { status: 500, error: 'Failed to load data' }

B. { data: undefined }

C. Page crashes with unhandled error

D. { status: 404, error: 'Not found' }

Solution

1. Step 1: Analyze fetch failure handling

   If fetch returns a 500 status, res.ok is false, so throw error(500, 'Failed to load data') runs.

2. Step 2: Understand catch block behavior

   The thrown error is caught, and the function returns an object with status and error from the error.

3. Final Answer:

   { status: 500, error: 'Failed to load data' } -> Option A

4. Quick Check:

   Catch returns error object with status and message [OK]

Hint: Catch returns error object with status and message [OK]

Common Mistakes:

• Expecting data to be returned on fetch failure
• Assuming page crashes without catch
• Confusing 404 with 500 status

4. Identify the error in this load function that causes the error handling to fail:

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

medium

A. Not checking res.ok before parsing JSON

B. Missing await before fetch

C. Not returning data inside catch block

D. Using return error(...) instead of throw error(...)

Solution

1. Step 1: Check error throwing vs returning

   The code uses return error(...) which does not throw an error but returns a value, so error handling is bypassed.

2. Step 2: Correct usage in SvelteKit

   To trigger error handling, it must throw error(...) so the catch block or error page activates.

3. Final Answer:

   Using return error(...) instead of throw error(...) -> Option D

4. Quick Check:

   Throw error to activate error handling [OK]

Hint: Throw error(...) to trigger error handling, not return [OK]

Common Mistakes:

• Returning error instead of throwing
• Forgetting to await fetch
• Ignoring res.ok check

5. You want to show a custom error page when your API returns a 403 status inside load. Which approach correctly handles this and passes the error to the page?

hard

A. Throw error(403, 'Access denied') inside load and create an error.svelte page to display it

B. Return { status: 403, error: 'Access denied' } and handle it manually in the page script

C. Use console.error and return empty data to show default page

D. Redirect to a different page using goto('/login') inside load

Solution

1. Step 1: Understand error propagation in load

   Throwing error(403, 'Access denied') inside load tells SvelteKit to show the error page.

2. Step 2: Use error.svelte to customize error display

   Creating an error.svelte page lets you show custom messages based on the error status and message.

3. Final Answer:

   Throw error(403, 'Access denied') inside load and create an error.svelte page to display it -> Option A

4. Quick Check:

   Throw error + error.svelte = custom error page [OK]

Hint: Throw error and use error.svelte for custom error pages [OK]

Common Mistakes:

• Returning error object instead of throwing
• Using console.error without error propagation
• Redirecting instead of showing error page