404 and error pages in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic 404 page in Astro.

Astro

---
export const prerender = true;
---
<html lang="en">
  <head>
    <title>Page Not Found</title>
  </head>
  <body>
    <h1>404 - [1]</h1>
    <p>Sorry, the page you are looking for does not exist.</p>
  </body>
</html>

Drag options to blanks, or click blank then click option'

ANot Found

BError

CMissing

DUnavailable

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Error' instead of 'Not Found' which is less clear.

Leaving the message blank.

The standard message for a 404 page is "Not Found" to indicate the page is missing.

2fill in blank

medium

Complete the code to export a custom 404 component in Astro.

Astro

---
export const prerender = true;
export function [1]() {
  return (
    <html lang="en">
      <head><title>404 Not Found</title></head>
      <body>
        <h1>Page Not Found</h1>
      </body>
    </html>
  );
}
---

Drag options to blanks, or click blank then click option'

AErrorPage

BgetStaticPaths

CNotFound

DPage404

Attempts:

3 left

💡 Hint

Common Mistakes

Using reserved function names like getStaticPaths.

Using generic names that don't indicate 404.

In Astro, a custom 404 page component is often named NotFound for clarity.

3fill in blank

hard

Fix the error in the Astro 404 page code by completing the missing export.

Astro

---
[1] = true;
---
<html lang="en">
  <head><title>404 Not Found</title></head>
  <body>
    <h1>Oops! Page not found.</h1>
  </body>
</html>

Drag options to blanks, or click blank then click option'

Aexport const prerender

Bconst prerender

Cexport default prerender

Dprerender

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to export the constant.

Using default export incorrectly.

To enable prerendering in Astro, you must export prerender as a constant.

4fill in blank

hard

Fill both blanks to create a custom error page component with a status code and message.

Astro

---
export function [1]({ status }) {
  return (
    <html lang="en">
      <head><title>Error [2]</title></head>
      <body>
        <h1>Error {status}</h1>
        <p>Something went wrong.</p>
      </body>
    </html>
  );
}
---

Drag options to blanks, or click blank then click option'

AErrorPage

B404

C500

DNotFound

Attempts:

3 left

💡 Hint

Common Mistakes

Using 404 as the status code for a generic error page.

Naming the function something unrelated.

The function is named ErrorPage to represent a generic error page, and the status code 500 is used for server errors.

5fill in blank

hard

Fill all three blanks to create a 404 page with a link back to the homepage.

Astro

---
export const prerender = true;
---
<html lang="en">
  <head>
    <title>[1] Not Found</title>
  </head>
  <body>
    <h1>404 - [2]</h1>
    <p>The page you requested could not be found.</p>
    <a href="[3]" aria-label="Go back to homepage">Go Home</a>
  </body>
</html>

Drag options to blanks, or click blank then click option'

APage

BNot Found

C/

DError

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Error' instead of 'Page' in the title.

Linking to a wrong URL instead of '/'.

The title uses "Page Not Found", the heading uses "Not Found", and the link points to the homepage at "/".

Practice

1. What is the main purpose of a 404.astro page in an Astro project?

easy

A. To speed up the loading of the homepage

B. To display the site map automatically

C. To handle user login and authentication

D. To show a friendly message when a user visits a page that does not exist

Solution

1. Step 1: Understand the role of 404 pages

   A 404 page appears when a user tries to visit a page that the website cannot find.

2. Step 2: Identify the purpose in Astro

   In Astro, 404.astro is used to show a friendly message for missing pages.

3. Final Answer:

   To show a friendly message when a user visits a page that does not exist -> Option D

4. Quick Check:

   404 page = friendly missing page message [OK]

Hint: 404 pages show missing page messages [OK]

Common Mistakes:

• Thinking 404 pages speed up the homepage
• Confusing 404 pages with login pages
• Assuming 404 pages show site maps

2. Which file name should you create in an Astro project to automatically handle 404 errors?

easy

A. error.astro

B. notfound.astro

C. 404.astro

D. page404.astro

Solution

1. Step 1: Recall Astro's naming convention for 404 pages

   Astro uses the exact file name 404.astro to detect and serve 404 error pages automatically.

2. Step 2: Compare options with the required file name

   Only 404.astro matches the required name; others won't be recognized automatically.

3. Final Answer:

   404.astro -> Option C

4. Quick Check:

   404 page file = 404.astro [OK]

Hint: Use exact file name 404.astro for error pages [OK]

Common Mistakes:

• Using names like error.astro or notfound.astro
• Adding prefixes or suffixes to 404 file name
• Assuming any file with '404' works

3. Given this 404.astro code snippet, what will the user see when visiting a missing page?

<!-- 404.astro -->
<h1>Oops! Page not found.</h1>
<p>Try going back to the <a href='/'>homepage</a>.</p>

medium

A. A blank page with no message

B. A message saying 'Oops! Page not found.' with a link to homepage

C. An error message with code 500

D. The homepage content without any error message

Solution

1. Step 1: Read the 404.astro content

   The code shows a heading with 'Oops! Page not found.' and a paragraph with a homepage link.

2. Step 2: Understand what Astro renders on missing pages

   Astro will display this content when a user visits a missing page.

3. Final Answer:

   A message saying 'Oops! Page not found.' with a link to homepage -> Option B

4. Quick Check:

   404 page shows friendly message + homepage link [OK]

Hint: 404 page content shows on missing pages [OK]

Common Mistakes:

• Expecting a blank page instead of message
• Confusing 404 with server error 500
• Thinking homepage content shows on 404

4. You created a 404.astro page but it does not show when visiting a missing page. What is the most likely mistake?

medium

A. The 404.astro file is inside the src/components folder

B. The file is named 404.html instead of 404.astro

C. The homepage link is missing inside the 404 page

D. The project does not have a package.json file

Solution

1. Step 1: Check file location requirements in Astro

   Astro expects 404.astro to be in the root of the src/pages folder, not inside components.

2. Step 2: Understand why wrong location breaks 404 page

   If placed in src/components, Astro won't serve it automatically as a 404 page.

3. Final Answer:

   The 404.astro file is inside the src/components folder -> Option A

4. Quick Check:

   404 page must be in pages folder [OK]

Hint: Place 404.astro in src/pages folder [OK]

Common Mistakes:

• Naming file 404.html instead of 404.astro
• Putting 404.astro in components folder
• Thinking missing homepage link breaks 404 page
• Assuming package.json affects 404 page

5. You want to create a custom error page in Astro that shows different messages for 404 and 500 errors. Which approach is best?

hard

A. Create separate 404.astro and 500.astro files in src/pages

B. Use only 404.astro and add JavaScript to detect 500 errors

C. Create a single error.astro file and rename it to 404.astro when needed

D. Handle errors only in client-side JavaScript, no Astro pages needed

Solution

1. Step 1: Understand Astro's error page handling

   Astro supports special files like 404.astro and 500.astro to handle different error codes automatically.

2. Step 2: Choose the best way to show different messages

   Creating separate files for 404 and 500 errors is clean and follows Astro conventions.

3. Final Answer:

   Create separate 404.astro and 500.astro files in src/pages -> Option A

4. Quick Check:

   Separate files for each error code [OK]

Hint: Use separate 404.astro and 500.astro files [OK]

Common Mistakes:

• Trying to detect errors with JavaScript in 404.astro
• Renaming files manually instead of separate files
• Ignoring server-side error handling