অ্যাটাসাস চেষ্টা করুন যা আধুনিক ওয়েব অ্যাপ্লিকেশনগুলির জন্য উন্নত ত্রুটি ট্র্যাকিং এবং রিয়েল ব্যবহারকারী পর্যবেক্ষণ সরবরাহ করে provides
https://www.atatus.com/
সমস্ত ব্রাউজারে যুক্তিসঙ্গতভাবে সম্পূর্ণ স্ট্যাকট্রেসগুলি কীভাবে পাবেন তা আমাকে ব্যাখ্যা করতে দিন।
জাভাস্ক্রিপ্টে পরিচালনা করার সময় ত্রুটি
আধুনিক ক্রোম এবং অপেরা ত্রুটিযুক্ত এবং এর জন্য এইচটিএমএল 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);
})
দুর্ভাগ্যক্রমে ফায়ারফক্স, সাফারি এবং আইই এখনও রয়েছে এবং তাদেরও আমাদের সমর্থন করতে হবে। স্ট্যাকট্রেস না থাকায় window.onerrorআমাদের আরও কিছুটা কাজ করতে হবে do
দেখা যাচ্ছে যে ত্রুটি থেকে স্ট্যাকট্রেসগুলি পেতে আমরা যা করতে পারি তা হ'ল আমাদের সমস্ত কোডকে একটি 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/ এ ওয়েব বিকাশকারী ।
