Error handling in load in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when load throws an error?

Consider a SvelteKit page with a load function that throws an error. What will the user see by default?

Svelte

export async function load() {
  throw new Error('Failed to load data');
}

A The page shows a default error page with the error message.

B The page silently fails and shows no content.

C The page reloads infinitely until the error is fixed.

D The page shows the previous cached content without error.

💡 Hint

Think about how SvelteKit handles errors thrown in load functions by default.

When a load function throws an error, SvelteKit automatically shows its default error page displaying the error message. This helps users know something went wrong.

📝 Syntax

intermediate

Which load function correctly catches and returns an error?

Which load function properly catches an error and returns a custom error response to the page?

A

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

B

export async function load() {
  const res = await fetch('/api/data');
  if (!res.ok) return { error: 'Fetch failed' };
  return { data: await res.json() };
}

C

export async function load() {
  try {
    const res = await fetch('/api/data');
    if (!res.ok) throw new Error('Fetch failed');
    return { data: await res.json() };
  } catch (error) {
    throw new Error('Custom load error');
  }
}

D

export async function load() {
  try {
    const res = await fetch('/api/data');
    if (!res.ok) throw new Error('Fetch failed');
    return { data: await res.json() };
  } catch (error) {
    return { error: 'Custom load error' };
  }
}

💡 Hint

Remember that to return an error response from load, you must return an object with status and error properties.

Option A correctly catches the error and returns an object with status and error properties, which SvelteKit uses to render an error page with the given status and message.

Option A rethrows the error, which also works but does not return a custom error response object.

Options A and D return an error property without status, which SvelteKit does not interpret as an error response.

🔧 Debug

advanced

Why does this load function not show the error page?

Given this load function, why does the page not show the error page when the fetch fails?

Svelte

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

A Because the <code>load</code> function must throw the error instead of returning it.

B Because the fetch never fails, so the error block is never reached.

C Because returning an <code>error</code> property without <code>status</code> does not trigger the error page.

D Because the <code>load</code> function must return a rejected promise to trigger the error page.

💡 Hint

Check what SvelteKit expects to show an error page from a load function.

SvelteKit requires the load function to return an object with status and error properties or throw an error to show the error page. Returning only an error property is ignored and treated as normal data.

❓ state_output

advanced

What is the value of error in the page when load returns a custom error?

If the load function returns { status: 404, error: new Error('Not found') }, what will the error prop contain in the error page component?

A A string 'Not found'.

B Undefined, because error is not passed as a prop.

C An object with a <code>message</code> property containing 'Not found'.

D An Error object with message 'Not found'.

💡 Hint

Recall what type of value is passed as error to the error page.

The error prop in the error page receives the actual Error object returned from load. This allows the error page to access the message and stack trace.

🧠 Conceptual

expert

How to handle errors globally in SvelteKit load functions?

Which approach correctly implements global error handling for all load functions in a SvelteKit app?

A Wrap every <code>load</code> function in try-catch and return error objects manually in each page.

B Create a root <code>+error.svelte</code> component to customize error display and throw errors in <code>load</code> functions as needed.

C Use a global <code>hooks.server.js</code> file to catch errors thrown in <code>load</code> functions and return custom responses.

D Set a global variable to track errors and check it in each page's <code>load</code> function.

💡 Hint

Think about SvelteKit's built-in error handling and how to customize error pages.

Option B is correct because SvelteKit uses a root +error.svelte component to display errors globally. Throwing errors in load functions triggers this component. Options A and B are manual and error-prone. Option B is invalid because hooks.server.js does not catch errors from load functions on the client side.

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