Wypróbuj Atatus, który zapewnia zaawansowane śledzenie błędów i monitorowanie rzeczywistych użytkowników w nowoczesnych aplikacjach internetowych.
https://www.atatus.com/
Pozwól, że wyjaśnię, jak uzyskać ślady stosu, które są w miarę kompletne we wszystkich przeglądarkach.
Błąd obsługi w JavaScript
Nowoczesne Chrome i Opera w pełni obsługują specyfikację wersji roboczej HTML 5 dla ErrorEvent i window.onerror. W obu tych przeglądarkach można odpowiednio użyć window.onerrorlub powiązać zdarzenie „błąd”:
// Only Chrome & Opera pass the error object.
window.onerror = function (message, file, line, col, error) {
console.log(message, "from", error.stack);
// You can send data to your server
// sendError(data);
};
// Only Chrome & Opera have an error attribute on the event.
window.addEventListener("error", function (e) {
console.log(e.error.message, "from", e.error.stack);
// You can send data to your server
// sendError(data);
})
Niestety Firefox, Safari i IE są nadal dostępne i my też musimy je wspierać. Ponieważ stacktrace nie jest dostępny wwindow.onerror musimy wykonać trochę więcej pracy.
Okazuje się, że jedyne, co możemy zrobić, aby uzyskać ślady stosu z błędów, to owinąć cały nasz kod w try{ }catch(e){ }blok, a następnie spojrzeć e.stack. Możemy nieco ułatwić ten proces dzięki funkcji o nazwie wrap, która przyjmuje funkcję i zwraca nową funkcję z dobrą obsługą błędów.
function wrap(func) {
// Ensure we only wrap the function once.
if (!func._wrapped) {
func._wrapped = function () {
try{
func.apply(this, arguments);
} catch(e) {
console.log(e.message, "from", e.stack);
// You can send data to your server
// sendError(data);
throw e;
}
}
}
return func._wrapped;
};
To działa. Każda funkcja, którą ręcznie zawijasz, będzie dobrze obsługiwać błędy, ale okazuje się, że w większości przypadków możemy to zrobić automatycznie.
Zmieniając globalną definicję addEventListenertak, aby automatycznie zawijała wywołanie zwrotne, możemy automatycznie wstawiać try{ }catch(e){ }większość kodu. Dzięki temu istniejący kod nadal działa, ale dodaje wysokiej jakości śledzenie wyjątków.
var addEventListener = window.EventTarget.prototype.addEventListener;
window.EventTarget.prototype.addEventListener = function (event, callback, bubble) {
addEventListener.call(this, event, wrap(callback), bubble);
}
Musimy również upewnić się, że removeEventListenernadal działa. W tej chwili tak się nie stanie, ponieważ argument do addEventListenerzostał zmieniony. Znów musimy tylko to naprawić na prototypeobiekcie:
var removeEventListener = window.EventTarget.prototype.removeEventListener;
window.EventTarget.prototype.removeEventListener = function (event, callback, bubble) {
removeEventListener.call(this, event, callback._wrapped || callback, bubble);
}
Prześlij dane błędu do swojego zaplecza
Dane o błędach można wysyłać za pomocą znacznika obrazu w następujący sposób
function sendError(data) {
var img = newImage(),
src = 'http://yourserver.com/jserror&data=' + encodeURIComponent(JSON.stringify(data));
img.crossOrigin = 'anonymous';
img.onload = function success() {
console.log('success', data);
};
img.onerror = img.onabort = function failure() {
console.error('failure', data);
};
img.src = src;
}
Oświadczenie: Jestem programistą internetowym na https://www.atatus.com/ .
