Atatus आज़माएं जो आधुनिक वेब ऐप्स के लिए उन्नत त्रुटि ट्रैकिंग और वास्तविक उपयोगकर्ता निगरानी प्रदान करता है।
https://www.atatus.com/
मुझे समझाएं कि स्टैकट्रैक्स कैसे प्राप्त करें जो सभी ब्राउज़रों में यथोचित रूप से पूर्ण हैं।
जावास्क्रिप्ट को संभालने में त्रुटि
मॉडर्न क्रोम और ओपेरा, एररइवेंट के लिए HTML 5 ड्राफ्ट स्पेस का पूरी तरह से समर्थन करते हैं और window.onerror । इन दोनों ब्राउज़रों में आप या तो उपयोग कर सकते हैं window.onerror, या 'त्रुटि' घटना को ठीक से बाँध सकते हैं :
// 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);
})
दुर्भाग्य से फ़ायरफ़ॉक्स, सफारी और IE अभी भी आसपास हैं और हमें उनका भी समर्थन करना होगा। जैसा कि स्टैकट्रेस उपलब्ध नहीं है, window.onerrorहमें थोड़ा और काम करना होगा।
यह पता चला है कि त्रुटियों से स्टैकट्रैक्स प्राप्त करने के लिए हम एक ही चीज कर सकते हैं कि हमारे सभी कोड को एक try{ }catch(e){ }ब्लॉक में लपेटें और फिर देखेंe.stack । हम एक फ़ंक्शन के साथ प्रक्रिया को कुछ आसान बना सकते हैं जिसे रैप कहा जाता है जो एक फ़ंक्शन लेता है और अच्छी त्रुटि से निपटने के साथ एक नया फ़ंक्शन देता है।
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;
};
यह काम। किसी भी फ़ंक्शन जिसे आप मैन्युअल रूप से लपेटते हैं, उसमें अच्छी त्रुटि से निपटने में मदद मिलेगी, लेकिन यह पता चलता है कि हम वास्तव में ज्यादातर मामलों में स्वचालित रूप से आपके लिए कर सकते हैं।
वैश्विक परिभाषा को बदलकर addEventListenerताकि यह स्वचालित रूप से कॉलबैक को लपेटे हम स्वचालित रूप से सम्मिलित कर सकते हैंtry{ }catch(e){ } अधिकांश कोड के आसपास । इससे मौजूदा कोड काम करना जारी रखता है, लेकिन उच्च गुणवत्ता वाले अपवाद ट्रैकिंग को जोड़ता है।
var addEventListener = window.EventTarget.prototype.addEventListener;
window.EventTarget.prototype.addEventListener = function (event, callback, bubble) {
addEventListener.call(this, event, wrap(callback), bubble);
}
हमें यह भी सुनिश्चित करने की आवश्यकता है कि removeEventListenerकाम करता रहे। फिलहाल ऐसा नहीं होगा क्योंकि तर्क addEventListenerबदल दिया गया है। फिर से हमें केवल prototypeऑब्जेक्ट पर इसे ठीक करने की आवश्यकता है :
var removeEventListener = window.EventTarget.prototype.removeEventListener;
window.EventTarget.prototype.removeEventListener = function (event, callback, bubble) {
removeEventListener.call(this, event, callback._wrapped || callback, bubble);
}
अपने बैकएंड में त्रुटि डेटा संचारित करें
आप निम्नानुसार छवि टैग का उपयोग करके त्रुटि डेटा भेज सकते हैं
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;
}
अस्वीकरण: मैं https://www.atatus.com/ पर एक वेब डेवलपर हूं ।
