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.

Practice

1. What is the main purpose of the +error.svelte file in a SvelteKit project?

easy

A. To handle user authentication

B. To display a custom error page when an error occurs in the app

C. To define global styles for the app

D. To manage routing between pages

Solution

1. Step 1: Understand the role of +error.svelte

   This file is specifically designed to show error messages when something goes wrong in the app.

2. Step 2: Compare with other options

   Authentication, styling, and routing are handled elsewhere, not in +error.svelte.

3. Final Answer:

   To display a custom error page when an error occurs in the app -> Option B

4. Quick Check:

   Error page = +error.svelte [OK]

Hint: Remember: +error.svelte shows errors, not routes or styles [OK]

Common Mistakes:

• Confusing error page with routing or styling files
• Thinking +error.svelte handles authentication
• Assuming it is for normal page content

2. Which of the following is the correct way to access the HTTP status code inside +error.svelte?

easy

A. {error.status}

B. {params.status}

C. {error.message}

D. {status}

Solution

1. Step 1: Recall SvelteKit error props

   In +error.svelte, the status is passed as a separate prop, not inside error.

2. Step 2: Check each option

   {error.status} is incorrect because error holds the error object, but status is separate. {status} is correct. {error.message} is for the message, not status. {params.status} is unrelated.

3. Final Answer:

   {status} -> Option D

4. Quick Check:

   Status code = {status} [OK]

Hint: Status is a separate prop, not inside error object [OK]

Common Mistakes:

• Using {error.status} instead of {status}
• Confusing error message with status code
• Trying to access status from params

3. Given this +error.svelte snippet:

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

<h1>Error {status}</h1>
<p>{error.message}</p>

What will be displayed if status is 404 and error.message is "Page not found"?

medium

A. Error 404Page not found

B. Error Page not found404

C. Error 0undefined

D. Error 404undefined

Solution

1. Step 1: Substitute values in template

   The {status} is 404, so <h1> shows "Error 404". The {error.message} is "Page not found", so <p> shows that text.

2. Step 2: Confirm output matches option

   Error 404
   Page not found matches exactly: "Error 404" and "Page not found". Others have wrong order or undefined values.

3. Final Answer:

   Error 404
   Page not found -> Option A

4. Quick Check:

   Display status and message correctly [OK]

Hint: Match variable names exactly to output text [OK]

Common Mistakes:

• Mixing status and message order
• Assuming undefined values
• Confusing error.message with status

4. You wrote this +error.svelte code:

<script>
  export let error;
</script>

<h1>Error {status}</h1>
<p>{error.message}</p>

But when an error occurs, the page shows Error undefined. What is the problem?

medium

A. You need to import status from another file

B. You should use {error.status} instead of {status}

C. You forgot to export the status prop

D. The error object does not have a message property

Solution

1. Step 1: Identify missing prop export

   The code uses {status} but does not export status from the script, so it is undefined.

2. Step 2: Check other options

   {error.status} is incorrect because status is a separate prop. Importing status is not needed. error.message exists, so that is not the issue.

3. Final Answer:

   You forgot to export the status prop -> Option C

4. Quick Check:

   Export all props used in template [OK]

Hint: Always export props you use in template [OK]

Common Mistakes:

• Using {status} without exporting it
• Trying to access status inside error object
• Assuming error.message is missing

5. You want to create a custom error page that shows a special message for 404 errors and a generic message for others. Which +error.svelte code correctly implements this?

hard

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

<h1>Error {status}</h1>
<p>{status === 404 ? 'Page not found' : error.message}</p>

B. <script>
export let error;
</script>

<h1>Error {error.status}</h1>
<p>{error.message === 404 ? 'Page not found' : error.message}</p>

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

<h1>Error {status}</h1>
<p>{error.message === 404 ? 'Page not found' : error.message}</p>

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

<h1>Error {status}</h1>
<p>{status === '404' ? 'Page not found' : error.message}</p>

Solution

1. Step 1: Check how status is used

   Status is a number, so comparing status === 404 is correct.

   <script>
     export let error;
     export let status;
   </script>
   
   <h1>Error {status}</h1>
   <p>{status === 404 ? 'Page not found' : error.message}</p>

   and D do this, but D compares to string '404' which is wrong.

2. Step 2: Check error.message usage

   <script>
     export let error;
     export let status;
   </script>
   
   <h1>Error {status}</h1>
   <p>{status === 404 ? 'Page not found' : error.message}</p>

   uses error.message as fallback, which is correct. Options B and C incorrectly compare error.message to 404, which makes no sense.

3. Step 3: Confirm correct syntax and logic

   <script>
     export let error;
     export let status;
   </script>
   
   <h1>Error {status}</h1>
   <p>{status === 404 ? 'Page not found' : error.message}</p>

   correctly exports both props and uses a ternary to show special message for 404, else shows error.message.

4. Final Answer:

   Option A code correctly handles 404 and other errors -> Option A

5. Quick Check:

   Compare status number, not error.message [OK]

Hint: Compare status number with 404, not error.message [OK]

Common Mistakes:

• Comparing error.message to 404 instead of status
• Comparing status to string '404' instead of number
• Not exporting both status and error props