Error handling in load in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the error helper from SvelteKit.

Svelte

import { [1] } from '@sveltejs/kit';

Drag options to blanks, or click blank then click option'

Aerror

Bload

Credirect

Dfetch

Attempts:

3 left

💡 Hint

Common Mistakes

Importing 'redirect' instead of 'error'.

Forgetting to import anything.

Importing from wrong package.

The error helper is imported from '@sveltejs/kit' to throw HTTP errors in the load function.

2fill in blank

medium

Complete the code to throw a 404 error with a message inside the load function.

Svelte

export function load() {
  throw [1](404, 'Not found');
}

Drag options to blanks, or click blank then click option'

AthrowError

Berror

Cnew Error

Dredirect

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'redirect' instead of 'error'.

Using 'new Error' which does not set HTTP status.

Calling a non-existent function 'throwError'.

Use the error helper to throw HTTP errors with status code and message.

3fill in blank

hard

Fix the error in the load function to correctly catch and throw a 500 error.

Svelte

export async function load() {
  try {
    const res = await fetch('/api/data');
    if (!res.ok) {
      throw [1](500, 'Server error');
    }
    return await res.json();
  } catch (err) {
    throw err;
  }
}

Drag options to blanks, or click blank then click option'

Anew Error

Bredirect

Cerror

DthrowError

Attempts:

3 left

💡 Hint

Common Mistakes

Throwing 'new Error' which lacks HTTP status.

Using 'redirect' instead of 'error'.

Calling a non-existent 'throwError' function.

Use the error helper to throw HTTP errors with status code and message inside load.

4fill in blank

hard

Fill both blanks to throw a 401 error with a custom message and import the helper.

Svelte

import { [1] } from '@sveltejs/kit';

export function load() {
  throw [2](401, 'Unauthorized access');
}

Drag options to blanks, or click blank then click option'

Aerror

Bredirect

Cload

Dfetch

Attempts:

3 left

💡 Hint

Common Mistakes

Importing 'redirect' but trying to throw an error.

Using different helpers for import and throw.

Forgetting to import the helper.

Import and use the error helper to throw HTTP errors with status and message.

5fill in blank

hard

Fill all three blanks to import error, check response status, and throw a 403 error if unauthorized.

Svelte

import { [1] } from '@sveltejs/kit';

export async function load({ fetch }) {
  const response = await fetch('/secret');
  if (!response.[2]) {
    throw [3](403, 'Forbidden');
  }
  return await response.json();
}

Drag options to blanks, or click blank then click option'

Aerror

Bok

Dredirect

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'redirect' instead of 'error'.

Checking wrong response property.

Not importing the helper.

Import error, check response.ok, and throw error with status 403 if unauthorized.