Error handling in load in Svelte - Mini Project: Build & Apply

Error handling in load

📖 Scenario: You are building a SvelteKit page that fetches user data from an API when the page loads. Sometimes the API might fail or return an error. You want to handle these errors gracefully so the page shows a friendly message instead of breaking.

🎯 Goal: Create a SvelteKit load function that fetches user data from a URL. Add error handling inside load to catch fetch failures or bad responses. Show the user data if successful, or show an error message if there is a problem.

📋 What You'll Learn

Create a load function that fetches from 'https://api.example.com/user'

Add a variable errorMessage to hold error text

Use try...catch inside load to handle fetch errors

Return user data if fetch succeeds, or errorMessage if it fails

In the Svelte component, display user name if data exists, or display the error message

💡 Why This Matters

🌍 Real World

Web apps often fetch data from servers. Sometimes the server is down or the network fails. Handling these errors gracefully improves user experience.

💼 Career

Knowing how to handle errors in data loading is essential for frontend developers working with frameworks like SvelteKit. It helps build robust, user-friendly applications.

1

Set up initial user data variable

Create a variable called user and set it to null to hold user data initially.

Svelte

let user = null
# Your code here

Hint

Start by creating a variable user and set it to null. This will hold the user data once loaded.

2

Add error message variable

Add a variable called errorMessage and set it to an empty string '' to hold any error messages.

Svelte

let user = null
let errorMessage = ''
# Your code here

Hint

Create a variable errorMessage to store error text if loading fails.

3

Write load function with error handling

Write an async load function that uses try...catch. Inside try, fetch from 'https://api.example.com/user'. If the response is not OK, set errorMessage to 'Failed to load user data.'. If successful, set user to the JSON data. In catch, set errorMessage to 'Network error.'. Return an object with user and errorMessage.

Svelte

let user = null
let errorMessage = ''

export async function load() {
    // Your code here
}

Hint

Use try...catch to handle errors. Check res.ok to detect bad responses. Return both user and errorMessage.

4

Display user or error message in Svelte component

In the Svelte component, use {#if data.user} to show <h1>{data.user.name}</h1>. Use {:else} to show <p>{data.errorMessage}</p>. This will show the user name if loaded, or the error message if there was a problem.

Svelte

let user = null
let errorMessage = ''

export async function load() {
    try {
        const res = await fetch('https://api.example.com/user');
        if (!res.ok) {
            errorMessage = 'Failed to load user data.';
            return { user, errorMessage };
        }
        user = await res.json();
        return { user, errorMessage };
    } catch {
        errorMessage = 'Network error.';
        return { user, errorMessage };
    }
}


    export let data;


{#if data.user}
    
{:else}
    
{/if}

Hint

Use Svelte's {#if} block to show user name or error message based on data.

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