Як збирати помилки фронтенду з продакшену і що в звіті справді корисне?

Помилки фронтенду відбуваються в браузерах користувачів, а не на вашому сервері: якщо їх не збирати, про них дізнаються зі скарг (або не дізнаються взагалі).

Джерела помилок:

• window подія error - необроблені винятки, а також помилки завантаження ресурсів (зображення, скрипти) при підписці з capture: true;
• unhandledrejection - необроблені відхилення Promise;
• явні виклики report(error) у catch, де помилку обробили, але про неї треба знати;
• обробники помилок фреймворків: app.config.errorHandler у Vue, error boundaries у React - вони ловлять помилки рендеру, які інакше лише покажуть порожній екран.

Готові рішення - Sentry, Bugsnag, Flare (від авторів Ignition, з інтеграцією з Laravel): SDK підписується на всі ці події, групує однакові помилки й показує частоту.

Що робить звіт корисним:

• читабельний стек - з source maps, завантаженими в систему моніторингу при деплої (самі карти на сервер не публікують);
• версія релізу - щоб розуміти, в якому деплої з'явилася помилка і чи виправив її новий;
• «хлібні крихти» (breadcrumbs) - що відбувалося перед помилкою: кліки, переходи, мережеві запити, повідомлення консолі. Найчастіше саме вони пояснюють, як відтворити проблему;
• контекст: сторінка, браузер, ОС, користувач (ідентифікатор, а не персональні дані);
• зв'язок з бекендом - ідентифікатор запиту (trace id), щоб знайти відповідний запис у логах Laravel.

Шум, який треба фільтрувати:

• помилки розширень браузера й вбудованих скриптів (стек вказує на chrome-extension://);
• Script error. без деталей - скрипти з інших доменів без crossorigin;
• ResizeObserver loop completed with undelivered notifications - зазвичай нешкідливе попередження;
• помилки мережі при закритті вкладки, AbortError від свідомо скасованих запитів;
• помилки завантаження частин після деплою (Failed to fetch dynamically imported module): старі вкладки просять файли, яких уже немає. Це треба обробляти (запропонувати оновити сторінку), а не лише рахувати.

Обсяг і ціна:

• вибірка (sampling) - на великому трафіку надсилати частину однакових помилок, а не всі;
• обмеження частоти з одного браузера - одна помилка в циклі рендеру може згенерувати тисячі звітів за хвилину;
• конфіденційність: не відправляти вміст полів форм, токени, повні URL з персональними даними в параметрах.

Метрика, на яку дивитися: не загальна кількість помилок, а кількість користувачів, які зіткнулися з кожною помилкою, і помилки, що з'явилися в останньому релізі.

Докладніше в документації: Подія error