Custom error pages (404, 500) in Flask - Mini Project: Build & Apply

Custom error pages (404, 500)

📖 Scenario: You are building a simple Flask web app for a small business website. You want to make sure visitors see friendly messages if they visit a page that does not exist or if the server has an error.

🎯 Goal: Create custom error pages for HTTP 404 (page not found) and 500 (server error) in a Flask app. When users hit these errors, they should see your custom messages instead of the default plain error pages.

📋 What You'll Learn

Create a Flask app instance named app

Define a route / that returns a welcome message

Create a custom error handler for 404 errors that returns a friendly message

Create a custom error handler for 500 errors that returns a friendly message

💡 Why This Matters

🌍 Real World

Custom error pages improve user experience by showing friendly messages instead of confusing default errors. This is common in all web applications.

💼 Career

Knowing how to handle errors gracefully in Flask is important for backend web developers to build professional and user-friendly web apps.

1

Set up the Flask app and a home route

Import Flask from flask and create a Flask app instance called app. Then define a route for / that returns the string "Welcome to our website!".

Flask

from flask import Flask

# Create the Flask app instance
# Your code here

Hint

Use app = Flask(__name__) to create the app. Use @app.route('/') to define the home page route.

2

Add a custom 404 error handler

Define a function called page_not_found that takes a parameter error. Use the @app.errorhandler(404) decorator on this function. Return the string "Sorry, the page you requested was not found." and the status code 404.

Flask

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return "Welcome to our website!"

# Add a 404 error handler below
# Your code here

Hint

Use @app.errorhandler(404) above the function. Return the message and the status code 404 as a tuple.

3

Add a custom 500 error handler

Define a function called internal_error that takes a parameter error. Use the @app.errorhandler(500) decorator on this function. Return the string "Oops! Something went wrong on our end." and the status code 500.

Flask

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return "Welcome to our website!"

@app.errorhandler(404)
def page_not_found(error):
    return "Sorry, the page you requested was not found.", 404

# Add a 500 error handler below
# Your code here

Hint

Use @app.errorhandler(500) and return the message with status code 500.

4

Add the app run command

Add the code to run the Flask app only if the script is run directly. Use if __name__ == '__main__': and inside it call app.run(debug=True).

Flask

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return "Welcome to our website!"

@app.errorhandler(404)
def page_not_found(error):
    return "Sorry, the page you requested was not found.", 404

@app.errorhandler(500)
def internal_error(error):
    return "Oops! Something went wrong on our end.", 500

# Add the app run command below
# Your code here

Hint

Use the standard Python check if __name__ == '__main__': to run the app with debug mode on.

Practice

1. What is the main purpose of creating custom error pages like 404 or 500 in a Flask app?

easy

A. To show friendly messages instead of default error text

B. To speed up the server response time

C. To disable error logging

D. To automatically fix bugs in the code

Solution

1. Step 1: Understand default error behavior

   By default, Flask shows plain error messages like '404 Not Found' which are not user-friendly.

2. Step 2: Purpose of custom error pages

   Custom error pages replace these default messages with nicer, clearer pages that help users understand the problem.

3. Final Answer:

   To show friendly messages instead of default error text -> Option A

4. Quick Check:

   Custom error pages = Friendly messages [OK]

Hint: Custom error pages improve user experience with friendly messages [OK]

Common Mistakes:

• Thinking custom pages fix server speed
• Believing they disable error logs
• Assuming they auto-correct bugs

2. Which of the following is the correct way to define a custom 404 error handler in Flask?

easy

A. @app.handle_error(404)
def not_found(error):
return 'Page not found', 404

B. @app.route('/404')
def not_found():
return 'Page not found', 404

C. @app.errorhandler(404)
def not_found(error):
return 'Page not found', 404

D. @app.error(404)
def not_found(error):
return 'Page not found', 404

Solution

1. Step 1: Identify correct decorator for error handling

   Flask uses @app.errorhandler(error_code) to register error handlers.

2. Step 2: Check function signature and return

   The handler function takes an error argument and returns a response with the error code.

3. Final Answer:

   @app.errorhandler(404)\ndef not_found(error):\n return 'Page not found', 404 -> Option C

4. Quick Check:

   @app.errorhandler(404) = Correct syntax [OK]

Hint: Use @app.errorhandler(code) to define error handlers [OK]

Common Mistakes:

• Using @app.route instead of @app.errorhandler
• Wrong decorator names like @app.handle_error
• Missing error parameter in handler function

3. Given this Flask code snippet, what will be the output when a user visits a non-existing page?

@app.errorhandler(404)
def page_not_found(e):
    return '
Oops! Page missing.
', 404

@app.route('/')
def home():
    return 'Welcome Home'

medium

A. The browser shows 'Welcome Home'

B. The server crashes with an error

C. The browser shows default Flask 404 page

D. The browser shows 'Oops! Page missing.' with 404 status

Solution

1. Step 1: Understand route and error handler

   The '/' route returns 'Welcome Home'. The 404 error handler returns a custom HTML message with status 404.

2. Step 2: Accessing a non-existing page triggers 404

   Visiting a page not defined triggers the 404 handler, so the custom message is returned with status 404.

3. Final Answer:

   The browser shows '<h1>Oops! Page missing.</h1>' with 404 status -> Option D

4. Quick Check:

   404 error triggers custom handler = The browser shows '<h1>Oops! Page missing.</h1>' with 404 status [OK]

Hint: Non-existing pages trigger 404 handler, not normal routes [OK]

Common Mistakes:

• Thinking '/' route handles all pages
• Expecting default Flask 404 page instead of custom
• Assuming server crashes on 404

4. Identify the error in this Flask code for a custom 500 error page:

@app.errorhandler(500)
def internal_error():
    return 'Server error occurred', 500

medium

A. The handler function must accept an error parameter

B. The decorator should be @app.handle_error(500)

C. The return statement must not include the status code

D. The function name must be 'handle_500_error'

Solution

1. Step 1: Check function signature for error handlers

   Flask error handlers must accept one argument for the error object.

2. Step 2: Verify the given function signature

   The function internal_error() has no parameters, which is incorrect for error handlers.

3. Final Answer:

   The handler function must accept an error parameter -> Option A

4. Quick Check:

   Error handler functions need error argument [OK]

Hint: Error handlers always take one error argument [OK]

Common Mistakes:

• Omitting the error parameter in handler function
• Using wrong decorator names
• Thinking function name matters for error handlers

5. You want to create a custom 404 error page that renders an HTML template named '404.html' and returns status 404. Which Flask code snippet correctly does this?

hard

A. @app.route('/404')
def not_found():
return render_template('404.html'), 404

B. @app.errorhandler(404)
def not_found(error):
return render_template('404.html'), 404

C. @app.errorhandler(404)
def not_found():
return render_template('404.html')

D. @app.errorhandler(404)
def not_found(error):
return render_template('404.html', status=404)

Solution

1. Step 1: Use correct decorator and function signature

   Use @app.errorhandler(404) and define function with error parameter.

2. Step 2: Return rendered template with status code

   Return render_template('404.html') and the status code 404 as a tuple.

3. Final Answer:

   @app.errorhandler(404)\ndef not_found(error):\n return render_template('404.html'), 404 -> Option B

4. Quick Check:

   Custom 404 with template and status code = @app.errorhandler(404) def not_found(error): return render_template('404.html'), 404 [OK]

Hint: Return (render_template, status_code) tuple in error handler [OK]

Common Mistakes:

• Using @app.route instead of @app.errorhandler
• Missing error parameter in function
• Not returning status code with template