Как узнать состояние кода с помощью ReportingObserver API

Найдите устаревшие API в рабочих версиях приложений.

ReportingObserver сообщает, когда ваш сайт использует устаревший API или сталкивается с вмешательством браузера. Базовая функциональность изначально появилась в Chrome 69. Начиная с Chrome 84, его можно использовать в рабочих процессах.

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

observer.observe();

Используйте обратный вызов, чтобы отправлять отчеты в серверную часть или поставщику аналитики для анализа.

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

Фон

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

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

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

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

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

API

ReportingObserver похож на другие API Observer, например 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();

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

Отчеты можно предварительно отфильтровать, чтобы просматривать только определенные типы отчетов. Сейчас доступно два типа отчетов: 'deprecation' и 'intervention'.

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

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

Чтобы посмотреть отчеты, созданные до экземпляра наблюдателя, используйте параметр buffered: true:

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

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

Прекратить наблюдение

Прекратите наблюдение с помощью метода disconnect():

observer.disconnect();

Примеры

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

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 для выявления всех типов проблем в JavaScript. Представьте себе API, который отслеживает все ошибки в вашем приложении:

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

Главное изображение: Sieuwert Otterloo на Unsplash.