Error pages (+error.svelte) - Mini Project: Build & Apply

Create a Custom Error Page with +error.svelte in SvelteKit

📖 Scenario: You are building a website using SvelteKit. You want to show a friendly error page whenever something goes wrong, like a missing page or a server error.

🎯 Goal: Create a custom error page using the +error.svelte file that shows the error status and message clearly to the user.

📋 What You'll Learn

Create a +error.svelte file with a script block that receives error and status props

Display the error status and message in the page content

Add a friendly heading and a short explanation

Use semantic HTML and accessible roles

Style the error page with simple CSS for clarity and responsiveness

💡 Why This Matters

🌍 Real World

Custom error pages improve user experience by showing friendly messages when something goes wrong on a website.

💼 Career

Knowing how to create error pages is important for frontend developers working with SvelteKit or similar frameworks to handle errors gracefully.

1

Create the basic +error.svelte file with props

Create a +error.svelte file. Inside it, write a <script> block that declares export let error and export let status to receive error details.

Svelte

  // Declare props error and status
  // Your code here

Hint

Use export let to declare props in Svelte components.

2

Add HTML structure to display error status and message

Below the <script> block, add a <main> element with a heading <h1> that shows Error {status}. Then add a paragraph <p> that displays {error.message}.

Svelte

  export let error;
  export let status;



  
  

Hint

Use curly braces {} to insert variables in Svelte templates.

3

Add a friendly explanation and semantic roles

Inside the <main>, add a second paragraph <p> with the text Sorry, something went wrong. Also add role="alert" to the <main> element for accessibility.

Svelte

  export let error;
  export let status;



  Error {status}
  {error.message}
  
  

Hint

Use role="alert" on the main container to notify screen readers of important messages.

4

Add simple CSS styles for clarity and responsiveness

Add a <style> block below the HTML. Inside it, style main with max-width: 30rem;, margin: 2rem auto;, padding: 1rem;, border: 1px solid #ccc;, and border-radius: 0.5rem;. Also style h1 with color: #c00; and font-size: 2rem;.

Svelte

  export let error;
  export let status;



  Error {status}
  {error.message}
  Sorry, something went wrong.



  /* Add styles for main and h1 here */
  /* Your code here */

Hint

Use CSS properties inside a <style> block to style your error page.