console.error ne fait pas tout — l'Output Console attrape les erreurs invisibles
L'Output Console de JustZix montre ce qu'une page écrit dans la console — sans ouvrir les DevTools. Mais pendant longtemps, elle n'affichait que ce que le code appelait explicitement via console.log. Or la moitié de ce que vous voyez dans les DevTools ne vient pas du tout de console.log. Depuis la version 2.13.86, cela a changé.
console.error n'est pas la même chose qu'une erreur
Il est facile de confondre deux choses :
console.error('quelque chose')— le code journalise délibérément quelque chose au niveau erreur.throw new Error('quelque chose')— le code a planté. Personne n'a appeléconsole.error. Et pourtant les DevTools affichent une entrée rouge avec une stack trace.
Chrome attrape les plantages lui-même et les montre dans la console. Si l'Output Console n'enveloppe que console.*, ces plantages lui échappent — et ce sont souvent les choses les plus importantes, car ce sont elles qui cassent la page.
Ce qui est capturé maintenant
1. Les exceptions non interceptées
Un throw non intercepté, une erreur de syntaxe, une erreur d'exécution — Chrome dispatche alors un événement error sur l'objet window. L'Output Console écoute cet événement et enregistre le message avec la stack trace et un emplacement fichier:ligne:colonne.
2. Les rejets de promesses non gérés
Un someAsync().then(...) sans .catch, ou un await qui a levé une erreur que personne n'a interceptée — Chrome dispatche un événement unhandledrejection. L'Output Console l'écoute et affiche la raison du rejet comme entrée erreur préfixée de « Unhandled promise rejection ».
Pourquoi la phase de capture
Les deux listeners sont attachés en phase de capture. La raison : la page peut aussi avoir son propre handler error ou unhandledrejection qui appelle preventDefault() ou stopPropagation(). La phase de capture s'exécute avant la phase de bouillonnement, donc l'Output Console voit l'événement avant que le code de la page puisse le faire taire.
Un test de 30 secondes
Ouvrez une JS Console (ou une TEMP JS Console via Ctrl+Alt+J) et tapez :
throw new Error('test boom')Une entrée rouge avec une stack trace devrait apparaître dans l'Output Console. Maintenant :
Promise.reject('async boom')« Unhandled promise rejection: async boom » devrait apparaître. Si vous voyez les deux — la capture d'erreurs fonctionne.
Ce que nous n'attrapons toujours PAS — et pourquoi
- Les violations CSP. Elles ont un événement
securitypolicyviolationdistinct — ajoutable plus tard, hors périmètre pour l'instant. - Les erreurs réseau 4xx/5xx. Un
fetchéchoué avec un 404 ou 500 est une réponse terminée avec succès — Chrome la montre dans l'onglet Network, pas dans la console. On ne l'attrape que si votre code lève lui-même une erreur après avoir vérifiéresponse.ok. - Les avertissements internes de Chrome. Les messages comme « Autofocus processing was blocked » sont générés par le navigateur lui-même — ils ne peuvent pas être interceptés au niveau de la page.
- Les échecs de chargement de ressources. Un
<img>ou<script>échoué est parfois attrapé par le listenererroren phase de capture, mais pas toujours — cela dépend du type de ressource.
Ce sont des limites délibérées, pas des manques. L'Output Console montre les erreurs JavaScript de la page — ce que vous voulez généralement voir — pas tout le bruit de diagnostic du navigateur.
Cas d'usage — surveillance de production sans DevTools
Snappez une Output Console au bord de l'onglet et laissez-la. Vous ouvrez votre propre site après un déploiement — si quelque chose plante, vous le voyez immédiatement, même si l'erreur ne vient pas de votre console.error. Pour un testeur QA, c'est la différence entre « la page a l'air OK » et « la page a l'air OK, mais un TypeError non intercepté se déclenche en arrière-plan ».
À voir aussi
- Output Console — le descriptif complet de la fenêtre
- TEMP panes — Output Console sous le raccourci Ctrl+Alt+K
- Injecter sur des pages à CSP strict — comment le hook de la console fonctionne
Installez JustZix — et voyez les erreurs de la page avant vos utilisateurs.
Notez cet article
Aucune note — soyez le premier.