Start · Sprachen · JavaScript · Referenz · Window.crashReport

Window.crashReport

Eigenschaft

Gibt ein <code>CrashReportContext</code>-Objekt zurück, mit dem man Schlüssel-Wert-Daten für den aktuellen obersten Browsing-Kontext speichert, die bei einem Absturz mitgesendet werden.

seit JavaScript Experimentell: nur Chromium-basierte Browser (ca. Kategorie: webapi

Signatur

readonly Window.crashReport

Beschreibung

Die schreibgeschützte Eigenschaft window.crashReport liefert ein CrashReportContext-Objekt. Darüber kann eine Anwendung beliebige Kontextdaten als Schlüssel-Wert-Paare hinterlegen, z. B. die aktuelle Route, eine Build-Version oder den Zustand eines Editors. Stürzt der Tab bzw. Renderer-Prozess ab, fügt der Browser diese Daten dem Crash-Report bei, der über die Reporting API an den im Header Reporting-Endpoints konfigurierten Endpunkt geschickt wird.

Das Besondere: Bei einem echten Absturz kann kein JavaScript mehr laufen, man kann also nicht „im letzten Moment“ Diagnosedaten senden. crashReport löst dieses Problem, indem der Browser die Daten vorab in einem eigenen Speicherbereich außerhalb des abstürzenden Prozesses vorhält.

Typischer Ablauf:

  • crashReport.initialize(bytes) reserviert einmalig Speicher (in Bytes) und gibt ein Promise zurück.
  • crashReport.set(key, value) legt einen String-Wert unter einem Schlüssel ab oder überschreibt ihn.
  • crashReport.delete(key) entfernt einen Schlüssel wieder.

Die Daten gelten für den obersten Browsing-Kontext (das Top-Level-Dokument) und werden nur im Absturzfall übertragen, nicht bei normalem Schließen der Seite.

Rückgabewert

Typ
CrashReportContext
Beschreibung
Das zum Fenster gehörende CrashReportContext-Objekt mit den Methoden initialize(), set() und delete(). Die Eigenschaft selbst ist schreibgeschützt.

Beispiele

Feature-Erkennung und Initialisierung

// Nur nutzen, wenn der Browser die API unterstützt
const initCrashContext = async () => {
  if (!('crashReport' in window)) {
    console.log('Crash-Report-Kontext wird nicht unterstützt');
    return false;
  }
  // 4 KiB Speicher für Kontextdaten reservieren
  await window.crashReport.initialize(4096);
  window.crashReport.set('app_version', '3.8.1');
  window.crashReport.set('build', 'prod-2024-11-02');
  console.log('Crash-Kontext bereit');
  return true;
};

initCrashContext();
Crash-Kontext bereit

Aktuelle Route in einer Single-Page-App mitführen

const ready = 'crashReport' in window
  ? window.crashReport.initialize(2048).then(() => true).catch(() => false)
  : Promise.resolve(false);

const trackRoute = async (path) => {
  if (!(await ready)) return;
  window.crashReport.set('route', path);
  window.crashReport.set('route_changed_at', new Date().toISOString());
};

// z. B. im Router-Hook aufrufen
trackRoute(location.pathname);
window.addEventListener('popstate', () => trackRoute(location.pathname));

Zustand einer speicherintensiven Operation markieren

const renderLargeChart = async (points) => {
  const ctx = window.crashReport;
  ctx?.set('operation', 'renderLargeChart');
  ctx?.set('point_count', String(points.length));
  try {
    // ... aufwendiges Rendering ...
  } finally {
    // Nach erfolgreichem Abschluss nicht mehr relevant
    ctx?.delete('operation');
    ctx?.delete('point_count');
  }
};

// Voraussetzung: crashReport.initialize() wurde vorher abgeschlossen
renderLargeChart(new Array(1_000_000).fill(0));

Server-Header für den Empfang der Crash-Reports

// Node.js (Express): Endpunkt für Reporting API konfigurieren
import express from 'express';
const app = express();

app.use((req, res, next) => {
  res.set('Reporting-Endpoints', 'default="https://example.com/reports"');
  next();
});

app.post('/reports', express.json({ type: 'application/reports+json' }), (req, res) => {
  for (const report of req.body) {
    if (report.type === 'crash') console.log('Crash:', report.body);
  }
  res.sendStatus(204);
});

app.listen(3000);
Crash: { ... reason, Kontextdaten ... }

// Wichtig · Fallstricke

  • Experimentell und nicht standardisiert: Die API stammt aus einem WICG-Entwurf und ist nur in Chromium-basierten Browsern verfügbar. Firefox und Safari unterstützen sie nicht, deshalb immer per 'crashReport' in window prüfen. Namen und Verhalten der Methoden können sich noch ändern.
  • Erst initialize(), dann set(): Ruft man set() oder delete() auf, bevor das Promise von initialize() erfüllt ist, führt das zu einem Fehler. Der reservierte Speicher ist begrenzt; zu große Datenmengen werden abgelehnt.
  • Nur Strings: Schlüssel und Werte sind Zeichenketten. Zahlen und Objekte vorher mit String() bzw. JSON.stringify() umwandeln und kompakt halten.
  • Datenschutz: Keine personenbezogenen Daten, Tokens oder Passwörter speichern. Die Daten landen im Klartext auf dem Report-Endpunkt.
  • Kein Report ohne Endpunkt: Ohne gültigen Reporting-Endpoints-Header (Endpunkt default oder crash-reporting) werden keine Crash-Reports verschickt. Die Zustellung erfolgt verzögert, oft erst beim nächsten Browserstart.
  • Die API ist vermutlich auf sichere Kontexte (HTTPS) beschränkt und gilt nur für das Top-Level-Dokument, nicht für einzelne iframes.