💥 « Ça marche en local, mais ça a explosé en production » – Histoires

La réalité Local ≠ Prod (douloureuse, drôle et instructive)

Le parcours professionnel d’un développeur passe généralement par trois étapes :

• Junior : « Ça marche 🎉 »
• Intermédiaire : « Et s’il y avait un edge case ? 🤔 »
• Senior : « Qu’est-ce que ça va donner en production ? 😐 »

Cet article est là pour te faire passer de l’étape 2 à l’étape 3.
On va rire, dire « oh non… », et apprendre des pratiques qui sauvent vraiment des vies en production.

Si tu es prêt, on commence 👇
Prends ton café ☕ et ferme les logs de production (pour l’instant).

🧪 1️⃣ Le syndrome des variables d’environnement

« Ça existait en local… mais en prod, t’es qui ? »

🎭 L’histoire

L’appel API fonctionne parfaitement en local.
Tu déploies en production… BOOM 💣
Erreur 500 – Internal Server Error.

❌ Code problématique

const apiKey = process.env.API_KEY;

fetch(`https://api.example.com/data?key=${apiKey}`);

🧠 Que se passe-t-il ici ?

• Le code attend API_KEY
• Mais en production, cette variable n’est pas définie
• L’API est appelée avec undefined
• L’API répond :

« Elle est où la clé, mon ami ? »

😇 Pourquoi ça marchait en local ?

Parce que tu avais un fichier .env :

API_KEY=super-secret-key

Réalité en production :

• Pas de .env
• Ou au mauvais endroit
• Ou avec un mauvais nom

✅ Solution solide

const apiKey = process.env.API_KEY;

if (!apiKey) {
  throw new Error("API_KEY n’est pas définie ! La production pleure 😭");
}

🛠️ Astuce pratique

• Valide les variables d’environnement au démarrage de l’application
• Ne laisse pas l’explosion arriver en runtime

🧠 Règle d’or

« Une application qui tourne avec des variables d’environnement manquantes est une bombe à retardement. »

📁 2️⃣ La catastrophe des chemins de fichiers

Windows est indulgent. Linux est impitoyable.

🎭 L’histoire

Local : Windows
Production : Linux
Résultat : fichier introuvable…

❌ Mauvais code

const filePath = "uploads\\image.png";

😇 Local (Windows)

« Pas de souci, j’ai compris. »

😈 Production (Linux)

« Un backslash ? Mauvais univers. » ❌

✅ Bonne approche

import path from "path";

const filePath = path.join("uploads", "image.png");

🧠 Qu’a-t-on gagné ?

• On a ignoré les différences d’OS
• Le code est devenu portable
• Un bug de plus enterré 🪦

🧠 Règle d’or

N’écris jamais les chemins de fichiers à la main. Utilise path.

🔠 3️⃣ Sensibilité à la casse (majuscules/minuscules)

Le local pardonne. La production jamais.

🎭 L’histoire

Après le déploiement :

Cannot find module './services/userService'

❌ Code

import UserService from "./services/userService";

📁 Fichier réel :

UserService.js

😇 Local (Mac / Windows)

« Je vois ce que tu veux dire. »

😈 Production (Linux)

« Non. Mauvaise casse. Salut. » 👋

✅ Solution

• Les noms de fichiers doivent être exacts
• Les imports doivent correspondre à l’identique
• Utilise un linter automatique

import UserService from "./services/UserService";

🧠 La production, c’est Linux.

Accepte-le, et la vie sera plus simple.

⏱️ 4️⃣ Les illusions de timing et d’asynchrone

« C’était rapide en local… »

❌ Code dangereux

let user;

setTimeout(() => {
  user = { name: "Cansu" };
}, 100);

console.log(user.name);

😇 Local

• CPU tranquille
• Event loop rapide
• La chance est avec toi 🎲

😈 Production

• Trafic élevé
• Serveur chargé
• user est toujours undefined 💥

✅ Logique correcte

setTimeout(() => {
  const user = { name: "Cansu" };
  console.log(user.name);
}, 100);

🧠 Qu’a-t-on appris ?

• Ne jamais faire confiance au timing
• Faire confiance au scope
• Utiliser correctement callbacks ou async/await

🧠 Règle d’or

Un code qui fait confiance au timing sera seul en production.

🌐 5️⃣ CORS : ange en local, démon en prod 😈

🎭 L’histoire

L’API fonctionne en local.
En production, le navigateur hurle :

Blocked by CORS policy

😇 Local

• Proxy activé
• Navigateur tolérant
• La vie est belle 🌈

😱 Production

• Vrai domaine
• Vraie sécurité
• Vraies règles

❌ Configuration serveur manquante

✅ Solution Express

import cors from "cors";

app.use(cors({
  origin: "https://yourdomain.com",
  methods: ["GET", "POST"]
}));

🧠 Astuce

• Ouvrir CORS avec * = laisser la porte grande ouverte
• Ne fais jamais ça au hasard en production

🔥 6️⃣ Le mensonge du console.log

« Mais je l’ai vu en local… »

❌ Habitude locale

console.log("User:", user);

😇 Local

• Terminal ouvert
• Sous tes yeux

😈 Production

• Logs ailleurs
• Ou pas collectés
• Ou personne ne les regarde

✅ Vrai logging

logger.info("User loaded", {
  userId: user.id,
  role: user.role
});

🧠 Pourquoi c’est important ?

• L’historique des erreurs est conservé
• Le debug devient possible
• Le stress diminue 😌

🧠 console.log = roue de vélo

Production = voiture 🚗

🧨 7️⃣ L’anatomie de « Ça marche chez moi »

Cette phrase ne signifie pas :

• Que le code est correct
• Que le système est solide

Elle signifie en réalité :

• Que les environnements sont différents

Local ≠ Production parce que :

• L’OS est différent
• La version de Node est différente
• Le trafic est différent
• La sécurité est différente
• Les utilisateurs sont impatients 😅

✅ Checklist salvatrice avant la production

• Toutes les variables .env sont-elles présentes ?
• Les versions de Node sont-elles identiques ?
• La sensibilité à la casse Linux a-t-elle été testée ?
• Un vrai système de logs est-il en place ?
• La gestion des erreurs est-elle implémentée ?
• Quelqu’un a-t-il dit « ça marche chez moi » ?

🎬 Grande métaphore de conclusion

• Local : scène de répétition 🎭
• Production : diffusion en direct 📺

Tu peux faire des erreurs pendant les répétitions.
Mais en direct… tout le monde regarde 😄

🏁 Mot de la fin

La production demande une chose :

« Écris-moi pour le pire des scénarios. »

Le local, lui, dit :

« Je peux gérer. »

Et souviens-toi :

Le véritable examen de ton code, c’est la production.
Le local n’est que la bande-annonce 🎞️