📅 SAISON B Semaine 2 Épisode 3 - Les Middlewares avec Express

📚 Notions du jour

Aujourd’hui, j’ai découvert un concept central dans Express : les middlewares. Un middleware, c’est comme un ouvrier sur une chaîne de montage : il reçoit une requête, fait un travail spécifique (comme valider des données, logger une information, ou modifier la requête/réponse), puis passe le relais au middleware suivant. Express est d’ailleurs conçu comme un moteur de middlewares : tout y est middleware, des routes aux gestionnaires d’erreurs ! C'est ce qu'on appel un design pattern.
Nous utilisions déjà sans le savoir des middlewares lors de notre apprentissage d'Express.

Pourquoi c’est puissant ?

• Modularité : Chaque middleware a une responsabilité unique.
• Réutilisabilité : Un middleware peut être utilisé sur plusieurs routes.
• Flexibilité : Vous pouvez ajouter, retirer ou réorganiser des middlewares sans tout casser.

---

🔗 Comment Fonctionnent les Middlewares ?

Un middleware est une fonction qui prend 3 paramètres :

1. req : L’objet requête (informations sur la requête HTTP).
2. res : L’objet réponse (pour envoyer une réponse au client).
3. next : Une fonction callback pour passer au middleware suivant.

Syntaxe de base :

function myMiddleware(req, res, next) {
  // Something to do with req and/or res here
  console.log("Middleware executed!");
  next(); // Go to the next middleware
}

---

📌 Deux Façons d’Utiliser les Middlewares

1️⃣ Middleware Spécifique à une Route (app.get, app.post, etc.)

Le middleware ne s’exécute que si l’URL correspond à la route.

Exemple :

app.get('/about', (req, res, next) => {
  console.log("Someone accessed the About page!");
  next();
}, (req, res) => {
  res.send("About Page");
});

Explications :

• Le premier argument de app.get est un middleware qui logge l’accès à /about.
• Le deuxième argument est la fonction qui envoie la réponse.

---

2️⃣ Middleware Global (app.use)

Le middleware s’exécute pour toutes les requêtes, peu importe l’URL.

Exemple :

// Middleware that logs all request
app.use((req, res, next) => {
  console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`);
  next();
});

Cas d’usage :

• Logging (journalisation des requêtes).
• Authentification (vérifier si l’utilisateur est connecté).

---

⚙️ L’Ordre des Middlewares : Une Question Cruciale

L’ordre dans lequel on chaîne les middlewares est essentiel ! Express exécute les middlewares dans l’ordre où ils sont déclarés. Si un middleware n’appelle pas next(), la chaîne s’arrête.

Exemple :

// Middleware 1 : Logs the request
app.use((req, res, next) => {
  console.log("Middleware 1");
  next();
});

// Finale route
app.get('/', (req, res) => {
  res.send("Welcome!");
});

---

🛠️ Exemples Concrets de Middlewares

1️⃣ Middleware de Logging

Objectif : Logger toutes les requêtes (méthode, URL, heure).

app.use((req, res, next) => {
  console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`);
  next();
});

2️⃣ Middleware pour Servir des Fichiers Statiques

Objectif : Servir les fichiers CSS, JS et images depuis un dossier public/.

app.use(express.static('public'));

---

💡 Ce Que J’ai Appris Aujourd’hui

1. Tout est middleware dans Express : Les routes, les gestionnaires d’erreurs, même express.static.
2. L’ordre des middlewares est crucial : Un middleware qui n’appelle pas next() bloque la chaîne.
3. Les middlewares permettent de :
4. Logger les requêtes.
5. Valider les données (authentification, validation de formulaires).
6. Modifier les requêtes/réponses.
7. Gérer les erreurs de manière centralisée.
8. app.use() vs app.get() :
9. app.use() : Middleware global (toutes les requêtes).
10. app.get() : Middleware spécifique à une route/méthode.

---

⌨️ Challenge du jour : Challenge Middlewares pour la Ghibliothèque – Gestion des 404 et Journalisation des Visites

🎤 Présentation du Challenge

Aujourd’hui, nous allons améliorer notre Ghibliothèque en ajoutant deux middlewares essentiels :

1. Une gestion personnalisée des erreurs 404 pour afficher une page "not found" stylisée quand une route n’existe pas.
2. Un système de journalisation (logging) pour tracer les visites (date, IP, chemin accédé).

L’objectif était de comprendre le fonctionnement des middlewares dans Express et de les utiliser pour améliorer l’expérience utilisateur et le débogage.

---

📋 Étapes à Réaliser

1️⃣ Gestion des 404 Personnalisée

Objectif : Afficher une page 404 personnalisée quand une route n’est pas trouvée.

👨‍💻 Solution proposée

J’ai d’abord eu du mal à comprendre comment capturer les erreurs 404 sans consulter la documentation (comme demandé dans l’énoncé). Après quelques essais, j’ai trouvé une solution qui fonctionne, mais je ne suis pas sûr qu’elle soit optimale. Je me suis dit que je pouvais créer un Middleware qui renvoie une erreur 404 par défaut si aucune route n'est trouvée. Placé après le Middleware qui qui gère les routes app.use(router);, si aucune route n'est trouvée quand l'utilisateur essaie d'accéder à une url qui n'existe pas, cela renvoie un statut 404 et rend la page personalisée 404 existante.

Mon code :

import express from 'express';
import { router } from './src/routers/index.router.js';

const app = express();

// Configuring static files and the template engine
app.use(express.static('public'));
app.set('view engine', 'ejs');
app.set('views', './src/views');

// Using the main router
app.use(router);

// Middleware to handle 404 errors (must be after all routes)
app.use((req, res, next) => {
  // If no route is found, return a 404 error
  res.status(404).render('404', { message: "Page non trouvée" });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

Réflexions après avoir lu la documentation :

Après avoir vérifié la documentation, il s'avère que cette solution était la bonne 😅. Je cherchais à forcément capturer une erreur afin de la renvoyer. Alors que la documentation précise que ce n'est pas nécessaire : how to handle 404 responses.
👉 In Express, 404 responses are not the result of an error, so the error-handler middleware will not capture them. This behavior is because a 404 response simply indicates the absence of additional work to do; in other words, Express has executed all middleware functions and routes, and found that none of them responded. All you need to do is add a middleware function at the very bottom of the stack (below all other functions) to handle a 404 response.

---

2️⃣ Journalisation des Visites

Objectif : Logger (journaliser) chaque requête avec :

• La date de la requête.
• L’adresse IP du visiteur.
• Le chemin accédé (ex: /movies/1).

👨‍💻 Solution proposée

J’ai exploré l’objet req pour trouver les informations nécessaires. Voici comment j’ai implémenté le middleware de logging :

Mon code :

request-logging.middleware.js in /src/middlewares/

export function requestLogging(req, res, next) {
  const timestamp = new Date().toISOString();
  const ipAddress = req.ip;
  const url = req.url;
  console.log(`${timestamp} ${ipAddress} ${url}`);
  next();
}

Import du middleware de logging dans index.js :

import express from 'express';
import { router } from './src/routers/index.router.js';
import { requestLogging } from './src/middlewares/request-logging.middleware.js';

const app = express();

// Configuring static files and the template engine
app.use(express.static('public'));
app.set('view engine', 'ejs');
app.set('views', './src/views');

// Using the logging middleware (must be before all routes)
app.use(requestLogging);

// Using the main router
app.use(router);

// Middleware to handle 404 errors (must be after all routes)
app.use((req, res, next) => {
  // If no route is found, return a 404 error
  res.status(404).render('404', { message: "Page non trouvée" });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

---

3️⃣ Bonus : Formatage Élégant des Logs

Objectif : Améliorer le format des logs pour qu’ils soient plus lisibles et exploitables.

👨‍💻 Solution proposée

J’ai ajusté le format des logs pour qu’ils suivent le format demandé : [date-iso ip] path.

Mon code mis à jour : (Insérer ici ton bloc de code pour le formatage élégant des logs. Par exemple :)

request-logging.middleware.js in /src/middlewares/

export function requestLogging(req, res, next) {
  const timestamp = new Date().toISOString();
  const ipAddress = req.ip;
  const url = req.url;
  console.log(`[${timestamp} ${ipAddress}] ${url}`);
  next();
}

---

💡 Ce Que J’ai Appris avec ce Challenge

1. Les middlewares sont le cœur d’Express : Ils permettent d’ajouter des fonctionnalités (logging, authentification, etc.) de manière modulaire.
2. L’ordre des middlewares est crucial :
3. Le middleware de logging doit être placé avant les routes pour capturer toutes les requêtes.
4. Le middleware 404 doit être placé après toutes les routes pour être exécuté en dernier recours.
5. L’objet req contient énormément informations utiles :
6. req.ip : Adresse IP du visiteur.
7. req.url : URL de la requête.
8. req.method : Méthode HTTP (GET, POST, etc.).
9. Le formatage des logs est important :
10. Un format clair ([date ip] path) permet de filtrer et analyser les logs facilement.