Error pages (+error.svelte) - Cheat Sheet & Quick Revision

Recall & Review

beginner

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

The +error.svelte file defines a custom error page that shows when a route fails or an error occurs. It helps display friendly messages instead of default browser errors.

beginner

How do you access the error details inside +error.svelte?

You receive an error and status prop automatically. Use these to show the error message and HTTP status code on the page.

intermediate

What HTTP status codes can trigger the +error.svelte page in SvelteKit?

Any HTTP error status like 404 (Not Found), 500 (Server Error), or custom errors can trigger the +error.svelte page to display.

beginner

Can you customize the look and content of the +error.svelte page?

Yes! You can style it with CSS and add any HTML or Svelte code to make the error page user-friendly and match your app's design.

beginner

What happens if you don't create a +error.svelte file in your SvelteKit app?

SvelteKit shows a default plain error page with minimal info. Creating +error.svelte lets you provide a better user experience.

What props does +error.svelte receive automatically?

A data and params

B message and code

C request and response

D error and status

The +error.svelte component automatically receives 'error' and 'status' props to display error details.

Which file name triggers a custom error page in SvelteKit?

A errorPage.svelte

B error.svelte

C +error.svelte

D +404.svelte

The special file '+error.svelte' is used by SvelteKit to show custom error pages.

If a route returns a 404 error, what happens in SvelteKit if +error.svelte exists?

A The +error.svelte page is shown with the 404 status

B The browser default 404 page is shown

C The app crashes

D Nothing happens

SvelteKit shows the +error.svelte page with the 404 status and error message.

Can you add custom styles to +error.svelte?

A Yes, you can style it like any Svelte component

B No, styles are not allowed

C Only inline styles work

D You must use global CSS only

You can add CSS or scoped styles inside +error.svelte just like any other Svelte component.

What is the default behavior if +error.svelte is missing?

A The app redirects to homepage

B SvelteKit shows a simple default error page

C The app crashes with no message

D The error is ignored

Without +error.svelte, SvelteKit shows a basic default error page with minimal info.

Explain how +error.svelte works in SvelteKit and how you can use it to improve user experience.

Think about what happens when a page fails to load and how you want to show that to users.

Describe the steps to create a custom error page using +error.svelte in a SvelteKit app.

Focus on file creation, props usage, and testing.