Как перехватить ошибку XMLHttpRequest

[Shitbox2]

Сторонняя js-библиотека делает запрос с помощью XMLHttpRequest, доступа к ее коду нет. Как перехватить ошибку запроса (4xx, 5xx, ...)?

window.onerror не перехватывает, хотя в консоли ошибка видна

[Malleys]

window.onerror не перехватывает, хотя в консоли ошибка видна

Почему оно должно перехватывать? Ведь происходящая ошибка связана с экземпляром класса XMLHttpRequest.

Вы можете отслеживать при помощи события fetch все исходящие запросы, выбирать из них те, которые связаны с той сторонней js-библиотекой, и если с таким запросом что-то пойдёт не так, например сервер возвратит статус 400, то составить свой запрос со статусом 200 и возвратить его!

Вот пример, файл service-worker.js

addEventListener("fetch", function (event) {
	if(new URL(event.request.url).host === "picsum.photos") {
		var promise = fetch(event.request).then(function(response) {
			if(response.status >= 400 && response.status < 599) {
				throw new Error("Not found");
			}
			
			console.log(response);
			return response;
		}).catch(function(error) {
			var response = new Response(error.message);
			response.headers.set("Content-Type", "text/plain;charset=UTF-8");
			return response;
		});
		
		event.respondWith(promise);
	}
});

Скрипт работает так: когда в случае запроса на picsum.photos, сервер отвечает со статусом 400-599, то ответ сервера заменяется на ответ, составленный вручную (текст Not found)

Скрипт можно подключить так...

navigator.serviceWorker.register("service-worker.js", {
  scope: "."
});

[Rise]

Как перехватить ошибку запроса (4xx, 5xx, ...)?

В XMLHttpRequest событие ошибки считается по-другому, там либо есть ответ, либо это network error, а у нее status всегда 0. Пруф. Гипотетически можно так:

var XMLHttpRequest = function(XHR, type, listener) {
	return function() {
		var xhr = new XHR;
		xhr.addEventListener(type, listener);
		return xhr;
	};
}(XMLHttpRequest, 'loadend', function(e) {
	if (this.status == 0) {
		console.log(e.type, 'network error');
	} else {
		console.log(e.type, this.status);
	}
});

// js-library code...

[Shitbox2]

Да, я как раз и сделал, переопределив XMLHttpRequest, что костыль, конечно. Про fetch не думал, проверю этот способ тоже. СпасибО!