0<script> export let error; export let status; </script> <h1>{status}</h1> <p>{error.message}</p>
| Step | Action | Input/Error | Component State | Output Rendered |
|---|---|---|---|---|
| 1 | User requests /missing-page | No page found (404) | error.message='Not Found', status=404 | Render +error.svelte with 404 and 'Not Found' |
| 2 | +error.svelte receives props | error.message='Not Found', status=404 | error and status set | <h1>404</h1><p>Not Found</p> |
| 3 | User sees error page | Rendered HTML | Static error page shown | User sees '404' and 'Not Found' message |
| 4 | User requests /server-error | Server error (500) | error.message='Internal Server Error', status=500 | Render +error.svelte with 500 and message |
| 5 | +error.svelte receives props | error.message='Internal Server Error', status=500 | error and status set | <h1>500</h1><p>Internal Server Error</p> |
| 6 | User sees error page | Rendered HTML | Static error page shown | User sees '500' and 'Internal Server Error' message |
| 7 | User requests /valid-page | Page loads OK | No error | Page content rendered, +error.svelte not used |
| 8 | End | No error | No error state | Normal page shown, no error page |
| Variable | Start | After Step 1 | After Step 4 | After Step 7 | Final |
|---|---|---|---|---|---|
| error.message | undefined | 'Not Found' | 'Internal Server Error' | undefined | undefined |
| status | undefined | 404 | 500 | undefined | undefined |
In SvelteKit, +error.svelte shows error pages. It receives 'error' and 'status' props. Displays error status code and message. Used only when a page load fails. Otherwise, normal page content shows. Customize +error.svelte to style error pages.
+error.svelte file in a SvelteKit project?+error.svelte+error.svelte.+error.svelte [OK]+error.svelte shows errors, not routes or styles [OK]+error.svelte handles authentication+error.svelte?+error.svelte, the status is passed as a separate prop, not inside error.{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.{status} [OK]+error.svelte snippet:<script>
export let error;
export let status;
</script>
<h1>Error {status}</h1>
<p>{error.message}</p>status is 404 and error.message is "Page not found"?{status} is 404, so <h1> shows "Error 404". The {error.message} is "Page not found", so <p> shows that text.+error.svelte code:<script>
export let error;
</script>
<h1>Error {status}</h1>
<p>{error.message}</p>Error undefined. What is the problem?{status} but does not export status from the script, so it is undefined.{error.status} is incorrect because status is a separate prop. Importing status is not needed. error.message exists, so that is not the issue.status prop -> Option C+error.svelte code correctly implements this?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.<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.<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.Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.