ReportingObserver: знайте здоровье своего кода

Филип Уолтон

ТЛ;ДР

В городе новый наблюдатель! ReportingObserver — это новый API, который позволяет вам узнать, когда ваш сайт использует устаревший API или сталкивается с вмешательством браузера :

const observer = new ReportingObserver(
  (reports, observer) => {
    for (const report of reports) {
      console.log(report.type, report.url, report.body);
    }
  },
  {buffered: true}
);

observer.observe();

Обратный вызов можно использовать для отправки отчетов серверной части или поставщику аналитики для дальнейшего анализа.

Почему это полезно? До сих пор предупреждения об устаревании и вмешательстве были доступны только в DevTools в виде консольных сообщений. В частности, вмешательства инициируются только различными реальными ограничениями, такими как состояние устройства и сети. Таким образом, вы можете даже никогда не увидеть эти сообщения при локальной разработке/тестировании сайта. ReportingObserver предлагает решение этой проблемы. Когда пользователи сталкиваются с потенциальными проблемами в реальной жизни, мы можем быть уведомлены о них.

Введение

Некоторое время назад я написал сообщение в блоге (« Наблюдение за вашим веб-приложением »), потому что меня поразило количество API-интерфейсов для мониторинга «вещей», происходящих в веб-приложении. Например, существуют API, которые могут наблюдать за информацией о DOM: ResizeObserver , IntersectionObserver , MutationObserver . Существуют API для сбора показателей производительности: PerformanceObserver . Другие API, такие как window.onerror и window.onunhandledrejection даже сообщают нам, если что-то идет не так.

Однако существуют другие типы предупреждений, которые не фиксируются этими существующими API. Когда ваш сайт использует устаревший API или сталкивается с вмешательством браузера , DevTools первым сообщает вам об этом:

Предупреждения консоли DevTools об устаревании и вмешательствах.
Предупреждения, инициируемые браузером, в консоли DevTools.

Естественно, можно подумать, что window.onerror фиксирует эти предупреждения. Это не так! Это связано с тем, что window.onerror не срабатывает при предупреждениях, сгенерированных непосредственно самим пользовательским агентом. Он срабатывает при ошибках времени выполнения (исключения JS и синтаксические ошибки), вызванных выполнением вашего кода.

ReportingObserver восполняет эту слабость. Он обеспечивает программный способ получения уведомлений о предупреждениях браузера, таких как прекращение поддержки и вмешательство . Вы можете использовать его в качестве инструмента отчетности и меньше терять сон, задаваясь вопросом, не сталкиваются ли пользователи с неожиданными проблемами на вашем действующем сайте.

API

Этот API мало чем отличается от других API-интерфейсов «наблюдателей», таких как IntersectionObserver и ResizeObserver . Вы выполняете обратный вызов; оно дает вам информацию. Информация, которую получает обратный вызов, представляет собой список проблем, вызванных страницей:

const observer = new ReportingObserver((reports, observer) => {
  for (const report of reports) {
    // → report.type === 'deprecation'
    // → report.url === 'https://reporting-observer-api-demo.glitch.me'
    // → report.body.id === 'XMLHttpRequestSynchronousInNonWorkerOutsideBeforeUnload'
    // → report.body.message === 'Synchronous XMLHttpRequest is deprecated...'
    // → report.body.lineNumber === 11
    // → report.body.columnNumber === 22
    // → report.body.sourceFile === 'https://reporting-observer-api-demo.glitch.me'
    // → report.body.anticipatedRemoval === <JS_DATE_STR> or null
  }
});

observer.observe();

Отфильтрованные отчеты

Отчеты могут быть предварительно отфильтрованы для просмотра только определенных типов отчетов:

const observer = new ReportingObserver((reports, observer) => {
  ...
}, {types: ['deprecation']});

Буферизованные отчеты

Параметр buffered: true действительно полезен, если вы хотите просмотреть отчеты, созданные до создания наблюдателя:

const observer = new ReportingObserver((reports, observer) => {
  ...
}, {types: ['intervention'], buffered: true});

Он отлично подходит для таких ситуаций, как отложенная загрузка библиотеки, использующей ReportingObserver . Наблюдатель добавляется поздно, но вы не упускаете ничего из того, что произошло ранее при загрузке страницы .

Хватит наблюдать

Ага! У него есть метод disconnect :

observer.disconnect(); // Stop the observer from collecting reports.

Примеры

Пример . Сообщите о вмешательствах браузера поставщику аналитики:

const observer = new ReportingObserver(
  (reports, observer) => {
    for (const report of reports) {
      sendReportToAnalytics(JSON.stringify(report.body));
    }
  },
  {types: ['intervention'], buffered: true}
);

observer.observe();

Пример . Получайте уведомления об удалении API:

const observer = new ReportingObserver((reports, observer) => {
  for (const report of reports) {
    if (report.type === 'deprecation') {
      sendToBackend(`Using a deprecated API in ${report.body.sourceFile} which will be
                     removed on ${report.body.anticipatedRemoval}. Info: ${report.body.message}`);
    }
  }
});

observer.observe();

Заключение

ReportingObserver предоставляет вам дополнительный способ обнаружения и мониторинга потенциальных проблем в вашем веб-приложении. Это даже полезный инструмент для понимания состояния вашей кодовой базы (или ее отсутствия). Отправляйте отчеты на серверную часть, узнавайте о реальных проблемах, с которыми пользователи сталкиваются на вашем сайте, обновляйте код и получайте прибыль!

Будущая работа

Я надеюсь, что в будущем ReportingObserver станет фактическим API для выявления всех типов проблем в JS. Представьте себе один API, который будет ловить все, что идет не так в вашем приложении:

Я также в восторге от инструментов, интегрирующих ReportingObserver в их рабочие процессы. Lighthouse — это пример инструмента, который уже помечает устаревшие браузеры при запуске аудита « Избегает устаревших API »:

Аудит Lighthouse на предмет использования устаревших API может использовать ReportingObserver.
Аудит Lighthouse на предмет использования устаревших API может использовать ReportingObserver.

В настоящее время Lighthouse использует протокол DevTools для очистки сообщений консоли и сообщения об этих проблемах разработчикам. Вместо этого было бы интересно переключиться на ReportingObserver поскольку он содержит хорошо структурированные отчеты об устаревании и дополнительные метаданные, такие как anticipatedRemoval дата удаления.

Дополнительные ресурсы :