En aquest tema, aprendrem com crear pàgines d'error personalitzades en una aplicació Flask. Les pàgines d'error personalitzades no només milloren l'experiència de l'usuari, sinó que també poden proporcionar informació útil sobre què ha anat malament.

Objectius

  • Entendre la importància de les pàgines d'error personalitzades.
  • Aprendre a definir i gestionar errors comuns com el 404 (No Trobat) i el 500 (Error Intern del Servidor).
  • Crear plantilles personalitzades per a les pàgines d'error.

Conceptes Clau

  • Errors HTTP: Codi d'estat que indica que una sol·licitud HTTP no s'ha pogut completar correctament.
  • Gestió d'Errors: Procés de capturar i gestionar errors per proporcionar una resposta adequada a l'usuari.
  • Plantilles d'Error: Fitxers HTML que es mostren quan es produeix un error.

Definint Pàgines d'Error Personalitzades

  1. Configuració Bàsica

Primer, necessitem configurar la nostra aplicació Flask per gestionar errors específics. Utilitzarem el decorador @app.errorhandler per capturar errors i definir les nostres pàgines personalitzades.

from flask import Flask, render_template

app = Flask(__name__)

@app.errorhandler(404)
def page_not_found(e):
    return render_template('404.html'), 404

@app.errorhandler(500)
def internal_server_error(e):
    return render_template('500.html'), 500

if __name__ == '__main__':
    app.run(debug=True)

  1. Creant Plantilles d'Error

A continuació, crearem les plantilles HTML per a les pàgines d'error. Aquestes plantilles es troben normalment a la carpeta templates.

404.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pàgina No Trobada</title>
</head>
<body>
    <h1>Error 404</h1>
    <p>La pàgina que estàs buscant no existeix.</p>
    <a href="{{ url_for('index') }}">Torna a la pàgina principal</a>
</body>
</html>

500.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Error Intern del Servidor</title>
</head>
<body>
    <h1>Error 500</h1>
    <p>Hi ha hagut un error intern del servidor. Si us plau, intenta-ho més tard.</p>
    <a href="{{ url_for('index') }}">Torna a la pàgina principal</a>
</body>
</html>

  1. Prova de les Pàgines d'Error

Per provar les pàgines d'error, podem accedir a una URL que no existeixi per veure la pàgina 404, o provocar un error intern del servidor per veure la pàgina 500.

Provocant un Error 404

Accedeix a una URL que no existeixi, per exemple: http://localhost:5000/nonexistent.

Provocant un Error 500

Podem provocar un error 500 afegint un error intencionat al nostre codi, com ara dividir per zero:

@app.route('/cause_error')
def cause_error():
    1 / 0  # Això provocarà un error 500

Accedeix a http://localhost:5000/cause_error per veure la pàgina d'error 500.

Exercicis Pràctics

Exercici 1: Pàgina d'Error 403

Crea una pàgina d'error personalitzada per a l'error 403 (Prohibit). Defineix el controlador d'errors i crea la plantilla HTML corresponent.

Solució

@app.errorhandler(403)
def forbidden(e):
    return render_template('403.html'), 403

403.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Accés Prohibit</title>
</head>
<body>
    <h1>Error 403</h1>
    <p>No tens permís per accedir a aquesta pàgina.</p>
    <a href="{{ url_for('index') }}">Torna a la pàgina principal</a>
</body>
</html>

Exercici 2: Pàgina d'Error 401

Crea una pàgina d'error personalitzada per a l'error 401 (No Autoritzat). Defineix el controlador d'errors i crea la plantilla HTML corresponent.

Solució

@app.errorhandler(401)
def unauthorized(e):
    return render_template('401.html'), 401

401.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>No Autoritzat</title>
</head>
<body>
    <h1>Error 401</h1>
    <p>No estàs autoritzat per accedir a aquesta pàgina.</p>
    <a href="{{ url_for('index') }}">Torna a la pàgina principal</a>
</body>
</html>

Resum

En aquesta secció, hem après com crear pàgines d'error personalitzades per a una aplicació Flask. Hem vist com gestionar errors comuns com el 404 i el 500, i com crear plantilles HTML per a aquestes pàgines. També hem practicat creant pàgines d'error per a altres codis d'estat HTTP com el 403 i el 401. Amb aquestes habilitats, podem millorar significativament l'experiència de l'usuari en les nostres aplicacions web.

Curs de Desenvolupament Web amb Flask

Mòdul 1: Introducció a Flask

Mòdul 2: Conceptes Bàsics de Flask

Mòdul 3: Formularis i Entrada d'Usuari

Mòdul 4: Integració de Bases de Dades

Mòdul 5: Autenticació d'Usuaris

Mòdul 6: Conceptes Avançats de Flask

Mòdul 7: APIs RESTful amb Flask

Mòdul 8: Desplegament i Producció

Mòdul 9: Proves i Millors Pràctiques

Mòdul 10: Extensions i Ecosistema de Flask

© Copyright 2024. Tots els drets reservats