PerformanceResourceTiming.responseStatus — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceResourceTiming.responseStatus

Beschreibung

Die schreibgeschützte Eigenschaft responseStatus eines PerformanceResourceTiming-Eintrags enthält den HTTP-Statuscode der Antwort, mit der eine Ressource geladen wurde, zum Beispiel 200 für Erfolg, 404 für „nicht gefunden“ oder 500 für Serverfehler.

Bisher kam man über die Resource-Timing-API nur an Zeitmessungen und Größen. Mit responseStatus lassen sich fehlgeschlagene Ladevorgänge von Bildern, Skripten, Stylesheets, Schriften oder fetch()-Aufrufen erkennen, ohne jede Anfrage selbst abzufangen. Das ist besonders für Real User Monitoring (RUM) nützlich: Man sammelt fehlerhafte Ressourcen im Feld und schickt sie an einen Analyse-Endpunkt.

Da PerformanceNavigationTiming von PerformanceResourceTiming erbt, gibt es die Eigenschaft auch für das Hauptdokument. So lässt sich zum Beispiel feststellen, ob eine Seite selbst mit einem 404-Status ausgeliefert wurde.

Wichtig: Bei ursprungsübergreifenden Ressourcen ohne CORS ist der Wert 0, damit keine Informationen über fremde Server nach außen gelangen.

Rückgabewert

Typ

number

Beschreibung

Der HTTP-Statuscode als ganze Zahl (z. B. 200, 301, 404). 0, wenn der Status nicht offengelegt werden darf (ursprungsübergreifend ohne CORS) oder kein HTTP-Status vorliegt.

Beispiele

Statuscodes aller geladenen Ressourcen auflisten

const entries = performance.getEntriesByType('resource');

for (const entry of entries) {
  console.log(`${entry.responseStatus} ${entry.name}`);
}

200 https://example.com/app.js 200 https://example.com/style.css 404 https://example.com/img/fehlt.png

Fehlerhafte Ressourcen per PerformanceObserver melden

const observer = new PerformanceObserver((list) => {
  const failed = list.getEntries().filter(
    (e) => e.responseStatus >= 400
  );

  for (const entry of failed) {
    navigator.sendBeacon('/rum/errors', JSON.stringify({
      url: entry.name,
      status: entry.responseStatus,
      type: entry.initiatorType
    }));
  }
});

observer.observe({ type: 'resource', buffered: true });

Status des Hauptdokuments prüfen (mit Fallback)

const [nav] = performance.getEntriesByType('navigation');

if (nav && 'responseStatus' in nav) {
  if (nav.responseStatus === 404) {
    console.warn('Seite wurde mit 404 ausgeliefert');
  } else {
    console.log('Dokument-Status:', nav.responseStatus);
  }
} else {
  console.log('responseStatus wird nicht unterstützt');
}

Dokument-Status: 200

Ursprungsübergreifende Ressourcen ohne CORS erkennen

const opaque = performance
  .getEntriesByType('resource')
  .filter((e) => e.responseStatus === 0);

console.log(`${opaque.length} Ressourcen ohne sichtbaren Status`);
opaque.forEach((e) => console.log(e.name));

2 Ressourcen ohne sichtbaren Status https://cdn.fremd.example/widget.js https://tracker.example/pixel.gif

// Wichtig · Fallstricke

Browser-Unterstützung: Bisher nur in Chromium-Browsern (Chrome, Edge, Opera ab Version 109). Firefox und Safari unterstützen die Eigenschaft derzeit nicht. Vor der Nutzung mit 'responseStatus' in entry prüfen, denn sonst ist der Wert undefined.
Wert 0: Bei ursprungsübergreifenden Ressourcen ohne CORS-Freigabe liefert die Eigenschaft 0. Dort hilft auch Timing-Allow-Origin nicht, denn der Status wird nur offengelegt, wenn die Antwort den CORS-Check besteht (z. B. <img crossorigin> plus Access-Control-Allow-Origin). 0 bedeutet also nicht automatisch einen Netzwerkfehler.
Netzwerkfehler: Scheitert eine Anfrage ganz (DNS-Fehler, Verbindungsabbruch), gibt es je nach Browser gar keinen Eintrag oder einen mit Status 0. Für eine vollständige Fehlererkennung sollte man zusätzlich error-Events oder fetch-Fehlerbehandlung nutzen.
Weiterleitungen und Cache: Angegeben wird der Status der endgültigen Antwort nach allen Weiterleitungen. Kommt die Ressource aus dem HTTP-Cache, steht dort in der Regel der gespeicherte Status (meist 200).
Puffergröße: Der Puffer für Resource-Timing-Einträge ist begrenzt (Standard: 250 Einträge). Bei vielen Ressourcen PerformanceObserver verwenden oder mit performance.setResourceTimingBufferSize() vergrößern.

Siehe auch

Response.status PerformanceResourceTiming.encodedBodySize PerformanceResourceTiming.responseStart PerformanceResourceTiming.responseEnd PerformanceResourceTiming.requestStart