Отчёт

Интерфейс Report API отчётов представляет собой отдельный отчёт.

К отчётам можно получить доступ несколькими способами:

• С помощью метода ReportingObserver.takeRecords() — он возвращает все отчёты в очереди наблюдателя и очищает очередь.
• С помощью параметра reports функции обратного вызова, переданной в конструктор ReportingObserver() при создании нового экземпляра наблюдателя. Он содержит список отчётов, которые в данный момент находятся в очереди наблюдателя.
• Отправляя запросы к конечным точкам, определённым через заголовок HTTP Reporting-Endpoints.

Report.body Только для чтения

Тело отчёта, которое является объектом ReportBody, содержащим подробную информацию об отчёте.

Report.type Только для чтения

Тип созданного отчёта, например, deprecation или intervention.

Report.url Только для чтения

URL документа, который сгенерировал отчёт.

У этого интерфейса нет определённых методов.

У этого интерфейса нет событий, которые срабатывают на нём.

В нашем примере deprecation_report.html мы создаём простой наблюдатель отчётов, чтобы отслеживать использование устаревших функций на нашей веб-странице:

const options = {
  types: ["deprecation"],
  buffered: true,
};

const observer = new ReportingObserver((reports, observer) => {
  reportBtn.onclick = () => displayReports(reports);
}, options);

Затем мы говорим ему начать наблюдение за отчётами с помощью ReportingObserver.observe(); это сообщает наблюдателю начать сбор отчётов в его очереди отчётов и выполняет функцию обратного вызова, указанную внутри конструктора:

observer.observe();

Благодаря обработчику событий, который мы настроили внутри конструктора ReportingObserver(), мы теперь можем нажать кнопку для отображения деталей отчёта.

Подробности отчёта отображаются с помощью функции displayReports(), которая принимает параметр reports обратного вызова наблюдателя в качестве параметра:

function displayReports(reports) {
  const outputElem = document.querySelector(".output");
  const list = document.createElement("ul");
  outputElem.appendChild(list);

  reports.forEach((report, i) => {
    let listItem = document.createElement("li");
    let textNode = document.createTextNode(
      `Report ${i + 1}, type: ${report.type}`,
    );
    listItem.appendChild(textNode);
    let innerList = document.createElement("ul");
    listItem.appendChild(innerList);
    list.appendChild(listItem);

    for (const key in report.body) {
      const innerListItem = document.createElement("li");
      const keyValue = report.body[key];
      innerListItem.textContent = `${key}: ${keyValue}`;
      innerList.appendChild(innerListItem);
    }
  });
}

Параметр reports содержит массив всех отчётов в очереди наблюдателя. Мы перебираем каждый отчёт с помощью цикла forEach(), затем перебираем каждый элемент в теле отчёта с помощью структуры for...in, отображая каждую пару ключ/значение в элементе списка.

• API отчётов
• Report-To HTTP заголовок