Report
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Das Report
-Interface der Reporting API stellt einen einzelnen Bericht dar.
Berichte können auf verschiedene Weise abgerufen werden:
- Über die Methode
ReportingObserver.takeRecords()
— diese gibt alle Berichte in der Berichtswarteschlange eines Observers zurück und leert dann die Warteschlange. - Über den
reports
-Parameter der Callback-Funktion, die beim Erstellen einer neuen Observer-Instanz in den KonstruktorReportingObserver()
übergeben wird. Dies enthält die Liste der Berichte, die sich derzeit in der Berichtswarteschlange des Observers befinden. - Durch Senden von Anfragen an die Endpunkte, die über den
Reporting-Endpoints
HTTP-Header definiert wurden.
Instanzeigenschaften
Report.body
Schreibgeschützt-
Der Inhalt des Berichts, der ein
ReportBody
-Objekt ist, das die detaillierten Berichtsinformationen enthält. Report.type
Schreibgeschützt-
Der Typ des erzeugten Berichts, z.B.
deprecation
oderintervention
. Report.url
Schreibgeschützt-
Die URL des Dokuments, das den Bericht erzeugt hat.
Instanzmethoden
Dieses Interface hat keine definierten Methoden.
Ereignisse
Dieses Interface hat keine Ereignisse, die darauf ausgelöst werden.
Beispiele
In unserem deprecation_report.html Beispiel erstellen wir einen einfachen Reporting-Observer, um die Nutzung von veralteten Funktionen auf unserer Webseite zu beobachten:
const options = {
types: ["deprecation"],
buffered: true,
};
const observer = new ReportingObserver((reports, observer) => {
reportBtn.onclick = () => displayReports(reports);
}, options);
Wir weisen ihn dann an, mit der Beobachtung von Berichten zu beginnen, indem wir ReportingObserver.observe()
verwenden; dies teilt dem Observer mit, mit dem Sammeln von Berichten in seiner Warteschlange zu beginnen und die im Konstruktor spezifizierte Callback-Funktion auszuführen:
observer.observe();
Aufgrund des Ereignishandlers, den wir im ReportingObserver()
-Konstruktor eingerichtet haben, können wir nun auf die Schaltfläche klicken, um die Berichtdetails anzuzeigen.
Die Berichtdetails werden über die Funktion displayReports()
angezeigt, die den reports
-Parameter des Observer-Callbacks als seinen Parameter verwendet:
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);
}
});
}
Der reports
-Parameter enthält ein Array aller Berichte in der Warteschlange des Observers. Wir iterieren über jeden Bericht mit einer forEach()
-Schleife und über jeden Eintrag im Berichtskörper mit einer for...in
-Struktur, wobei wir jedes Schlüssel/Wert-Paar innerhalb eines Listenelements anzeigen.
Spezifikationen
Specification |
---|
Reporting API # dom-report |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Reporting API
Report-To
HTTP-Header