Signatur
Beschreibung
toJSON() ist der Standard-Serializer der Schnittstelle PerformanceLongTaskTiming. Die Methode gibt ein einfaches JavaScript-Objekt zurück, keinen JSON-String. Es enthält die Eigenschaften des Eintrags: name, entryType (immer "longtask"), startTime, duration und attribution. Letzteres ist ein Array mit serialisierten TaskAttributionTiming-Objekten.
Sie brauchen die Methode vor allem, wenn Sie lange Tasks (Hauptthread-Blockaden über 50 ms) erfassen und an einen Analyse- oder Monitoring-Server schicken wollen (Real User Monitoring). Die eigentlichen Einträge sind Host-Objekte, deren Eigenschaften als Getter am Prototyp liegen. Ein direkter Aufruf von JSON.stringify(entry) funktioniert nur, weil JSON.stringify intern automatisch toJSON() aufruft. Ohne diese Methode käme nur {} heraus.
Meist rufen Sie toJSON() gar nicht selbst auf, sondern verwenden JSON.stringify(). Ein direkter Aufruf lohnt sich, wenn Sie das Objekt vor dem Versand noch ändern, filtern oder mit eigenen Daten anreichern wollen.
Rückgabewert
name, entryType, startTime, duration und attribution (Array aus serialisierten TaskAttributionTiming-Einträgen).Beispiele
Lange Tasks beobachten und als Objekt ausgeben
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log(entry.toJSON());
}
});
observer.observe({ type: "longtask", buffered: true });
// Einen langen Task künstlich erzeugen (ca. 120 ms Blockade)
const start = performance.now();
while (performance.now() - start < 120) {}Direkt als JSON-String serialisieren
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
// JSON.stringify ruft intern entry.toJSON() auf
console.log(JSON.stringify(entry));
}
});
observer.observe({ type: "longtask", buffered: true });Angereicherte Daten per sendBeacon an einen Monitoring-Server senden
const buffer = [];
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
buffer.push({
...entry.toJSON(),
page: location.pathname,
userAgent: navigator.userAgent
});
}
});
if (PerformanceObserver.supportedEntryTypes?.includes("longtask")) {
observer.observe({ type: "longtask", buffered: true });
}
// Beim Verlassen bzw. Verstecken der Seite gesammelte Einträge senden
document.addEventListener("visibilitychange", () => {
if (document.visibilityState === "hidden" && buffer.length > 0) {
navigator.sendBeacon("/rum/longtasks", JSON.stringify(buffer));
buffer.length = 0;
}
});// Wichtig · Fallstricke
- Rückgabewert ist kein String:
toJSON()liefert ein Objekt. Einen JSON-String bekommen Sie erst mitJSON.stringify(). - Browser-Unterstützung: Die Long Tasks API gibt es nur in Chromium-Browsern (Chrome, Edge, Opera). Firefox und Safari unterstützen
PerformanceLongTaskTimingnicht. Prüfen Sie das vorher mitPerformanceObserver.supportedEntryTypes.includes("longtask"). - Spread und
Object.assign:{ ...entry }ergibt ein leeres Objekt, weil die Eigenschaften Getter am Prototyp sind. Verwenden Sie deshalb{ ...entry.toJSON() }. - Eingeschränkte Zuordnung:
attributionenthält meist nur einen Eintrag mit wenig Aussagekraft (oftname: "unknown"). Genauere Angaben zu Skripten liefert die neuere Long Animation Frames API (PerformanceLongAnimationFrameTiming). - Datenschutz: Bei Tasks aus fremden Frames enthalten Felder wie
containerSrceventuell URLs. Bedenken Sie das, bevor Sie die Daten an Dritte senden.