console.error to nie wszystko — Output Console łapie błędy, których nie widać
Output Console w JustZix pokazuje, co strona wypisuje do konsoli — bez otwierania DevTools. Ale przez długi czas pokazywała tylko to, co kod jawnie wywołał przez console.log. A połowa tego, co widać w DevTools, nie pochodzi z console.log wcale. Od wersji 2.13.86 to się zmieniło.
console.error to nie to samo co błąd
Łatwo pomylić dwie rzeczy:
console.error('coś')— kod świadomie coś loguje na poziomie error.throw new Error('coś')— kod się wysypał. Nikt nie wołałconsole.error. A jednak w DevTools widać czerwony wpis ze stack trace.
Chrome sam wyłapuje wysypki i pokazuje je w konsoli. Jeśli Output Console opakowuje tylko console.*, te wysypki jej umykają — a to często najważniejsze rzeczy, bo to one psują stronę.
Co teraz jest łapane
1. Uncaught exceptions
Niezłapany throw, błąd składni, błąd runtime — Chrome dispatchuje wtedy zdarzenie error na obiekcie window. Output Console nasłuchuje tego zdarzenia i zapisuje komunikat wraz ze stack trace oraz lokalizacją plik:linia:kolumna.
2. Unhandled promise rejections
someAsync().then(...) bez .catch, albo await, który rzucił i nikt go nie złapał — Chrome dispatchuje zdarzenie unhandledrejection. Output Console je nasłuchuje i pokazuje powód odrzucenia jako wpis error z prefiksem „Unhandled promise rejection".
Dlaczego faza capture
Oba listenery są podpięte w fazie capture. Powód: strona też może mieć własny handler error czy unhandledrejection, który wywoła preventDefault() albo stopPropagation(). Faza capture biegnie przed fazą bubbling, więc Output Console widzi zdarzenie, zanim kod strony zdąży je wyciszyć.
Test w 30 sekund
Otwórz JS Console (albo TEMP JS Console przez Ctrl+Alt+J) i wpisz:
throw new Error('test boom')W Output Console powinien pojawić się czerwony wpis ze stack trace. Teraz:
Promise.reject('async boom')Powinno pojawić się „Unhandled promise rejection: async boom". Jeśli widzisz oba — łapanie błędów działa.
Czego nadal NIE łapiemy — i dlaczego
- Naruszenia CSP. Mają osobne zdarzenie
securitypolicyviolation— możliwe do dodania w przyszłości, na razie poza zakresem. - Błędy sieciowe 4xx/5xx. Nieudany
fetchz kodem 404 czy 500 to poprawnie zakończona odpowiedź — Chrome pokazuje ją w zakładce Network, nie w konsoli. Złapiemy ją tylko, jeśli Twój kod sam rzuci po sprawdzeniuresponse.ok. - Wewnętrzne ostrzeżenia Chrome. Komunikaty typu „Autofocus processing was blocked" generuje sama przeglądarka — nie da się ich przechwycić z poziomu strony.
- Błędy ładowania zasobów. Nieudany
<img>czy<script>bywa łapany przezerrorw fazie capture, ale nie zawsze — zależy od typu zasobu.
To świadome granice, nie niedoróbki. Output Console pokazuje błędy JavaScriptu strony — tego, co zwykle chcesz zobaczyć — a nie cały szum diagnostyczny przeglądarki.
Use case — monitoring produkcji bez DevTools
Przypnij Output Console do brzegu karty i zostaw. Wchodzisz na własną stronę po deployu — jeśli coś się wysypie, zobaczysz to od razu, nawet jeśli błąd nie pochodzi z Twojego console.error. Dla testera QA to różnica między „strona wygląda OK" a „strona wygląda OK, ale w tle leci niezłapany TypeError".
Zobacz też
- Output Console — pełny opis okna
- TEMP panes — Output Console pod skrótem Ctrl+Alt+K
- Injekcja na stronach z surowym CSP — jak działa hook konsoli
Zainstaluj JustZix — i wyłapuj błędy strony, zanim zobaczy je użytkownik.
Oceń ten wpis
Brak ocen — oceń jako pierwszy.