PerformanceServerTiming.toJSON() — Methode · JavaScript-Referenz

Signatur

PerformanceServerTiming.prototype.toJSON()

Beschreibung

Die Methode toJSON() des Interfaces PerformanceServerTiming ist ein Serialisierer. Sie gibt ein einfaches JavaScript-Objekt zurück, kein JSON-String. Das Objekt enthält die Werte aus dem HTTP-Header Server-Timing: name, duration und description.

Das ist nötig, weil die Eigenschaften von PerformanceServerTiming als Getter am Prototyp liegen. Ohne toJSON() würde JSON.stringify() nur {} liefern. JSON.stringify() ruft toJSON() automatisch auf, deshalb lassen sich Server-Timing-Daten direkt serialisieren.

Typische Anwendung: Man liest in Real User Monitoring (RUM) die Server-Metriken aus PerformanceResourceTiming.serverTiming oder PerformanceNavigationTiming.serverTiming aus und schickt sie mit navigator.sendBeacon() oder fetch() an einen Analyse-Endpunkt.

Rückgabewert

Typ

{ name: string, duration: number, description: string }

Beschreibung

Ein einfaches Objekt, das die Eigenschaften name, duration (Millisekunden, 0 wenn im Header nicht angegeben) und description (leerer String, wenn nicht angegeben) enthält.

Beispiele

Server-Timing der Navigation serialisieren

// Server sendet z. B.: Server-Timing: db;dur=53.2;desc="Datenbank", cache;desc="HIT"
const [nav] = performance.getEntriesByType('navigation');

for (const entry of nav.serverTiming) {
  console.log(entry.toJSON());
}

{ name: 'db', duration: 53.2, description: 'Datenbank' } { name: 'cache', duration: 0, description: 'HIT' }

Implizite Nutzung durch JSON.stringify()

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

// JSON.stringify ruft toJSON() automatisch für jedes Element auf
const json = JSON.stringify(nav.serverTiming);
console.log(json);

[{"name":"db","duration":53.2,"description":"Datenbank"},{"name":"cache","duration":0,"description":"HIT"}]

Server-Metriken aller Ressourcen per Beacon melden

const observer = new PerformanceObserver((list) => {
  const payload = list.getEntries()
    .filter((entry) => entry.serverTiming.length > 0)
    .map((entry) => ({
      url: entry.name,
      serverTiming: entry.serverTiming.map((st) => st.toJSON()),
    }));

  if (payload.length > 0) {
    navigator.sendBeacon('/rum', JSON.stringify(payload));
  }
});

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

// Wichtig · Fallstricke

Gibt ein Objekt zurück, keinen String: Für einen JSON-String zusätzlich JSON.stringify() verwenden.
Cross-Origin: Bei Ressourcen von anderen Origins ist serverTiming ein leeres Array, außer der Server sendet den Header Timing-Allow-Origin.
Nur in sicheren Kontexten (HTTPS): In aktuellen Browsern werden Server-Timing-Daten nur in einem Secure Context bereitgestellt.
Datenschutz: Server-Timing-Header sind für jedes Skript auf der Seite lesbar. Keine sensiblen Infos (interne Hostnamen, Abfragen, Benutzerdaten) in desc schreiben.
Fehlende Werte im Header ergeben duration: 0 bzw. description: '', nicht undefined.
Safari unterstützt die API erst ab Version 16.4. Bei älteren Browsern vorher prüfen, ob serverTiming vorhanden ist.

Siehe auch

JSON.stringify() PerformanceEventTiming.toJSON() PerformanceScriptTiming.toJSON() PerformanceElementTiming.toJSON() PerformancePaintTiming.toJSON()