Le Défi du Débogage sur Chrome OS
Lorsque vous développez des applications web complexes, le débogage est une étape incontournable. L'une des méthodes classiques pour les assistants IA ou les tests automatisés consiste à piloter un navigateur headless (comme Chromium via Puppeteer ou Playwright) afin de capturer les erreurs de la console (les fameux console.error).
Cependant, dans des environnements spécifiques comme Google Chrome OS Flex, l'utilisation de navigateurs Chromium en arrière-plan peut provoquer une instabilité du système, voire faire planter complètement votre terminal de développement.
L'objectif est clair : Comment sniffer les actions et la console pendant les tests produits, directement depuis le navigateur par défaut de l'utilisateur, de manière transparente et sûre ?
La Solution Native : L'Interception de Console (Console Sniffing)
Plutôt que d'essayer de piloter le navigateur depuis l'extérieur, la solution la plus élégante consiste à injecter un composant espion, un sniffer, directement dans le code frontal de l'application (ici en Next.js). Ce composant va "écouter" toutes les erreurs générées dans le navigateur et les envoyer instantanément à notre serveur de développement.
Voici les 3 démarches à mettre en place pour arriver à ce résultat :
1. Créer une API d'Ingestion des Logs
Dans Next.js, nous créons une simple Route API (/api/system/console) destinée à recevoir les erreurs. Ce point de terminaison n'est actif qu'en environnement de développement (sécurité oblige) et se charge d'afficher visuellement les logs dans le terminal de notre serveur Node.js.
// app/api/system/console/route.ts
import { NextResponse } from "next/server";
export async function POST(request: Request) {
if (process.env.NODE_ENV !== "development") {
return NextResponse.json({ error: "Not allowed in production" }, { status: 403 });
}
const { level, url, messages } = await request.json();
console.log(`\x1b[31m[BROWSER ${level.toUpperCase()}]\x1b[0m (${url})`);
// Affichage des messages
messages.forEach(console.log);
return NextResponse.json({ success: true });
}2. Le Composant ConsoleSniffer
Ensuite, nous créons un Client Component React qui intercepte les méthodes standards de l'objet console ainsi que les événements window.onerror.
// features/common/components/ConsoleSniffer.tsx
"use client";
import { useEffect } from "react";
export function ConsoleSniffer() {
useEffect(() => {
if (process.env.NODE_ENV !== "development") return;
const originalError = console.error;
// Remplacement de console.error
console.error = (...args) => {
// 1. On envoie au serveur
fetch("/api/system/console", {
method: "POST",
body: JSON.stringify({ level: "error", messages: args, url: window.location.href }),
keepalive: true
}).catch(console.warn);
// 2. On exécute le comportement d'origine pour le navigateur
originalError.apply(console, args);
};
return () => {
console.error = originalError;
};
}, []);
return null;
}3. L'Injection au Cœur de l'Application
Il ne reste plus qu'à placer ce composant invisible au niveau le plus haut de notre application, dans le RootLayout (le fichier app/layout.tsx). Ainsi, chaque page consultée par l'utilisateur (ou le testeur) bénéficiera de l'écoute active.
import { ConsoleSniffer } from "@/features/common/components/ConsoleSniffer";
export default function RootLayout({ children }) {
return (
<html lang="fr">
<body>
<ConsoleSniffer />
{children}
</body>
</html>
);
}Conclusion et Avantages
Grâce à cette approche dite de "Monkey Patching" contrôlée :
- Zéro instabilité : Votre terminal ne gère plus de processus Chromium lourds.
- Transparence totale : Vous naviguez sur votre vrai navigateur par défaut (Chrome OS).
- Temps réel : Dès qu'une erreur ou un console.warn surgit, il apparaît dans la console du serveur de développement, permettant aux agents IA de lire les logs et de réagir immédiatement.
C'est une démarche simple, souveraine et d'une efficacité redoutable pour maintenir une qualité de code exceptionnelle sans compromettre son environnement de travail !