Error pages (+error.svelte) - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to display the error status code in the error page.

Svelte

<script>
  export let error;
  export let status;
</script>

<h1>Error [1]</h1>

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

A{status}

B{error}

Cstatus

Derror

Attempts:

3 left

💡 Hint

Common Mistakes

Using the variable name without curly braces.

Using the error object instead of the status code.

The {status} variable holds the HTTP status code, which we want to show in the error page heading.

2fill in blank

medium

Complete the code to show the error message inside a paragraph.

Svelte

<script>
  export let error;
  export let status;
</script>

<p>[1]</p>

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

A{error.message}

B{status.message}

C{message}

D{status}

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to access message from status instead of error.

Forgetting the curly braces around the expression.

The error object contains the message property with the error details. We display it using {error.message}.

3fill in blank

hard

Fix the error in the script to correctly export the error and status variables.

Svelte

<script>
  let error;
  let status;
  export [1];
</script>

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

A{error status}

Berror, status

C{error, status}

D[error, status]

Attempts:

3 left

💡 Hint

Common Mistakes

Missing curly braces around the variables.

Using square brackets or missing commas.

In Svelte, to export multiple variables at once, use export {error, status}; with curly braces and commas.

4fill in blank

hard

Fill both blanks to create a conditional block that shows a custom message for 404 errors and a generic message otherwise.

Svelte

<script>
  export let status;
</script>

{#if status [1] 404}
  <p>Page not found.</p>
{:else}
  <p>Error occurred.</p>
{/if}

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

A!==

B===

C==

D!=

Attempts:

3 left

💡 Hint

Common Mistakes

Using != or !== which check for inequality.

Using == instead of === which is less strict.

Use strict equality === to check if status equals 404 for the custom message.

5fill in blank

hard

Fill all three blanks to create a reactive statement that logs the error message when the error changes.

Svelte

<script>
  export let error;

  $: if ([1]) {
    console.log([2].[3]);
  }
</script>

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

Aerror

Cmessage

Dstatus

Attempts:

3 left

💡 Hint

Common Mistakes

Using status instead of error.

Forgetting to check if error exists before logging.

The reactive statement runs when error changes. We check if error exists, then log error.message.