[Перевод] API ReportingObserver: взгляд на код веб-страниц с новой точки зрения25.10.2018 15:34

Материал, перевод которого мы публикуем сегодня, посвящён API ReportingObserver — механизму, который позволяет узнать об использовании устаревших возможностей, и о том, что в работу кода страницы вмешивается браузер. ReportingObserver является частью этой спецификации W3C.

Зачем это нужно?

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

Посетитель сайта, вполне возможно, ничего не знает о веб-разработке, поэтому, когда сайт начинает странно вести себя, он вряд ли заглянет в консоль для того, чтобы попытаться разобраться в проблеме, которая выражается в виде сообщения, начинающегося с [Intervention] или [Deprecation].

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

Вот как выглядит работа с ReportingObserver:

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

observer.observe();

Поговорим о том, как пользоваться этим API.

Структура API ReportingObserver

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

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

const observer = new ReportingObserver((reports, observer) => {
  for (const report of reports) {
    // → report.id === 'XMLHttpRequestSynchronousInNonWorkerOutsideBeforeUnload'
    // → report.type === 'deprecation'
    // → report.url === 'https://reporting-observer-api-demo.glitch.me'
    // → report.body.message === 'Synchronous XMLHttpRequest is deprecated...'
  }
}});

observer.observe();

При работе c ReportingObserver можно фильтровать отчёты. Например вот конструкция, которая позволяет получать лишь отчёты об использовании устаревших возможностей:

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

Если, при создании объекта ReportingObserver, передать ему свойство buffered: true, это даст возможность увидеть отчёты, сгенерированные до создания такого объекта:

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

Для того чтобы прекратить наблюдение за отчётами об использовании устаревших возможностей или о вмешательствах браузера в работу кода, можно отключить объект-наблюдатель:

observer.disconnect();

Пример использования API ReportingObserver

Вот пример использования объекта-наблюдателя ReportingObserver. Здесь показана схема организации отправки отчёта на сервер:

const report = new ReportingObserver((reports, observer) => {
   for (const report of reports) {
      const stringifiedReport = JSON.stringify(report.body);
      // Отправка на сервер
      sendReport(stringifiedReport);
  }
}, { types: [‘deprecation’], buffered: true });

Итоги

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

Подробности о ReportingObserver можно почитать здесь и здесь.

Уважаемые читатели! Что вы думаете об API ReportingObserver?

© Habrahabr.ru