Signatur
Beschreibung
Response.error() ist eine statische Fabrikmethode der Response-Schnittstelle. Sie liefert eine Antwort, die für einen Netzwerkfehler steht: type ist "error", status ist 0, statusText ist ein leerer String, ok ist false, die Header sind leer und unveränderlich (immutable) und es gibt keinen Body (body ist null).
Gebraucht wird die Methode vor allem in Service Workern. Gibt ein fetch-Event-Handler über event.respondWith() ein Response.error() zurück, schlägt der ursprüngliche fetch()-Aufruf der Seite mit einem TypeError fehl – genau so wie bei einem echten Netzwerkfehler. So lassen sich Anfragen gezielt blockieren, etwa Tracking-Skripte oder im Offline-Modus nicht verfügbare Ressourcen.
Auch in Tests und Mocks ist die Methode praktisch: Wer fetch durch eine eigene Funktion ersetzt, kann mit Response.error() ein realistisches Fehlerobjekt nachbilden, damit sich die Fehlerbehandlung der Anwendung prüfen lässt.
Wichtig: Response.error() ist keine HTTP-Fehlerantwort wie 404 oder 500. Brauchst du einen HTTP-Status, nimm new Response(body, { status: 500 }).
Rückgabewert
Response-Objekt mit type: "error", status: 0, leerem statusText, unveränderlichen leeren Headern und body: null.Beispiele
Eigenschaften einer Fehler-Response prüfen
const res = Response.error();
console.log(res.type); // Art der Antwort
console.log(res.status); // immer 0
console.log(res.ok); // false
console.log(res.statusText === '');
console.log(res.body);Service Worker: Tracking-Anfragen blockieren
// sw.js
const BLOCKED_HOSTS = ['tracker.example.com', 'ads.example.net'];
self.addEventListener('fetch', (event) => {
const url = new URL(event.request.url);
if (BLOCKED_HOSTS.includes(url.hostname)) {
// Die Seite erhält einen TypeError, als wäre das Netzwerk ausgefallen
event.respondWith(Response.error());
}
});Service Worker: Offline-Fallback mit Cache
// sw.js
self.addEventListener('fetch', (event) => {
event.respondWith((async () => {
try {
return await fetch(event.request);
} catch {
const cached = await caches.match(event.request);
// Nichts im Cache: echten Netzwerkfehler weiterreichen
return cached ?? Response.error();
}
})());
});fetch in Tests mocken, um die Fehlerbehandlung zu prüfen
const originalFetch = globalThis.fetch;
// Mock: simuliert, wie der Browser Netzwerkfehler meldet
globalThis.fetch = async () => {
const res = Response.error();
if (res.type === 'error') throw new TypeError('Failed to fetch');
return res;
};
const loadUser = async (id) => {
try {
const res = await fetch(`/api/users/${id}`);
return await res.json();
} catch (err) {
return { error: err.message };
}
};
console.log(await loadUser(42));
globalThis.fetch = originalFetch;// Wichtig · Fallstricke
- Kein HTTP-Fehler:
Response.error()hat immer den Status0. Für 4xx/5xx-Antworten nimmnew Response(null, { status: 503 }). Einen Status 0 kannst du mit dem Konstruktor nicht setzen, das löst einenRangeErroraus. - Unveränderliche Header:
res.headers.set(...)auf einer Fehler-Response wirft einenTypeError. - Verhalten außerhalb von Service Workern: Direkt im Code erzeugt, ist das Objekt nur eine gewöhnliche Response ohne Body. Erst über
event.respondWith()führt es dazu, dass dasfetch()-Promise der Seite mitTypeErrorabgelehnt wird.res.json()auf einer Fehler-Response wirft einenSyntaxError, weil der Body leer ist. - Statische Methode: Aufruf nur als
Response.error(), nicht auf einer Instanz. - Kompatibilität: Wird in allen modernen Browsern unterstützt (Chrome 43+, Firefox 39+, Safari 10.1+), außerdem in Node.js ab 18 und in Deno. Im Internet Explorer gibt es die Methode nicht.