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.