Hãy thử Atatus cung cấp tính năng Theo dõi lỗi nâng cao và Giám sát người dùng thực cho các ứng dụng web hiện đại.
https://www.atatus.com/
Hãy để tôi giải thích làm thế nào để có được stacktraces hoàn thành hợp lý trong tất cả các trình duyệt.
Xử lý lỗi trong JavaScript
Chrome và Opera hiện đại hỗ trợ đầy đủ thông số dự thảo HTML 5 cho ErrorEvent và window.onerror. Trong cả hai trình duyệt này, bạn có thể sử dụng window.onerrorhoặc liên kết đúng với sự kiện 'lỗi':
// 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);
})
Thật không may, Firefox, Safari và IE vẫn còn và chúng tôi cũng phải hỗ trợ chúng. Vì stacktrace không có sẵn nên window.onerrorchúng tôi phải làm thêm một chút.
Nó chỉ ra rằng điều duy nhất chúng ta có thể làm để nhận stacktraces từ các lỗi là bọc tất cả các mã của chúng ta trong một try{ }catch(e){ }khối và sau đó xem xét e.stack. Chúng ta có thể làm cho quá trình dễ dàng hơn với một hàm gọi là hàm lấy hàm và trả về một hàm mới với khả năng xử lý lỗi tốt.
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;
};
Những công việc này. Bất kỳ chức năng nào bạn bọc thủ công sẽ xử lý lỗi tốt, nhưng hóa ra chúng tôi thực sự có thể tự động làm điều đó cho bạn trong hầu hết các trường hợp.
Bằng cách thay đổi định nghĩa toàn cầu addEventListenerđể nó tự động kết thúc cuộc gọi lại, chúng ta có thể tự động chèn try{ }catch(e){ }xung quanh hầu hết mã. Điều này cho phép mã hiện có tiếp tục hoạt động, nhưng thêm theo dõi ngoại lệ chất lượng cao.
var addEventListener = window.EventTarget.prototype.addEventListener;
window.EventTarget.prototype.addEventListener = function (event, callback, bubble) {
addEventListener.call(this, event, wrap(callback), bubble);
}
Chúng tôi cũng cần đảm bảo rằng removeEventListenertiếp tục làm việc. Tại thời điểm này, nó sẽ không vì đối số addEventListenerđược thay đổi. Một lần nữa chúng ta chỉ cần sửa lỗi này trên prototypeđối tượng:
var removeEventListener = window.EventTarget.prototype.removeEventListener;
window.EventTarget.prototype.removeEventListener = function (event, callback, bubble) {
removeEventListener.call(this, event, callback._wrapped || callback, bubble);
}
Truyền dữ liệu lỗi đến phụ trợ của bạn
Bạn có thể gửi dữ liệu lỗi bằng thẻ hình ảnh như sau
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;
}
Tuyên bố miễn trừ trách nhiệm: Tôi là nhà phát triển web tại https://www.atatus.com/ .
