Error pages (+error.svelte) - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this +error.svelte component display when an error occurs?

Consider this +error.svelte component in a SvelteKit app:

  <script>
    export let error;
    export let status;
  </script>
  <h1>Error {status}</h1>
  <p>{error.message}</p>

What will the user see if the server returns a 404 error with message "Not Found"?

A <h1>Error 500</h1><p>Not Found</p>

B <h1>Error 404</h1><p>Not Found</p>

C <h1>Error 404</h1><p>Internal Server Error</p>

D <h1>Error</h1><p>Not Found</p>

💡 Hint

The status prop shows the HTTP status code, and error.message shows the error text.

The +error.svelte component receives the status and error props. It displays the status code (404) and the error message ('Not Found') exactly as passed.

📝 Syntax

intermediate

Which +error.svelte code snippet correctly exports the error and status props?

You want to access the error and status in your +error.svelte component. Which code snippet is correct?

A <script> export default { error, status }; </script>

B <script> export const error; export const status; </script>

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

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

💡 Hint

Props must be declared with 'export let' in Svelte components.

In Svelte, to receive props, you declare them with 'export let'. Options A, B, and C are invalid syntax or do not export props correctly.

🔧 Debug

advanced

Why does this +error.svelte component fail to display the error message?

Given this +error.svelte code:

<script>
  export let error;
  export let status;
</script>
<h1>Error {status}</h1>
<p>{error.msg}</p>

The error message does not show up. What is the cause?

A The status prop is not exported correctly, causing the error message to fail.

B The error message is not displayed because the <p> tag is missing a closing tag.

C The component must use $error to access the error object, not 'error'.

D The property 'msg' does not exist on the error object; it should be 'message'.

💡 Hint

Check the property name used to access the error text.

The error object has a 'message' property, not 'msg'. Using 'error.msg' results in undefined, so nothing shows.

❓ state_output

advanced

What is the output when +error.svelte receives a 500 status with a custom error message?

This +error.svelte component:

<script>
  export let error;
  export let status;
</script>
<h1>Oops! Error {status}</h1>
<p>{error.message}</p>

Receives props: status = 500, error.message = "Server crashed".
What is the rendered output?

A <h1>Oops! Error 500</h1><p>Server crashed</p>

B <h1>Oops! Error 404</h1><p>Server crashed</p>

C <h1>Error 500</h1><p>Server crashed</p>

D <h1>Oops! Error 500</h1><p>Internal Server Error</p>

💡 Hint

The component uses the status and error.message props directly in the output.

The component shows the status (500) and the exact error.message ('Server crashed') inside the tags.

🧠 Conceptual

expert

Which statement about +error.svelte in SvelteKit is TRUE?

Choose the correct statement about the +error.svelte file in a SvelteKit project.

A +error.svelte is a special component that automatically receives 'error' and 'status' props when an error occurs during routing.

B +error.svelte must be manually imported and used in every page to handle errors.

C +error.svelte can only handle client-side errors, not server-side errors.

D +error.svelte replaces the default 404 page but cannot display custom error messages.

💡 Hint

Think about how SvelteKit handles errors globally.

+error.svelte is a special file that SvelteKit uses automatically to show error pages. It receives error info as props.