في هذه المقالة ، سأفكر في مسألة تحديد ومعالجة الأخطاء التي تحدث في الواجهة الأمامية (المتصفح أو عرض الويب).على الواجهة الأمامية ، يتم تنفيذ كود JS في المتصفح. جافا سكريبت ليست لغة مجمعة ، لذلك هناك دائمًا فرصة لخطأ في الأداء عند استخدام البرنامج مباشرة. يمنع خطأ التنفيذ التعليمات البرمجية الموجودة بعد مكان الخطأ ، ويواجه مستخدمو البرنامج خطر البقاء مع شاشة تطبيق غير فعالة لا يمكن إعادة تحميلها أو إغلاقها. ولكن هناك طرق للكشف عن الأخطاء ومرافقتها الآمنة ، لتجنب مثل هذه المواقف.1. أدوات JavaScript
حاول / قبض كتل
قد يتم لف الوظائف التي قد تفشل في كتل المحاولة / الالتقاط. أولاً ، يحاول البرنامج تنفيذ التعليمات البرمجية في كتلة المحاولة. إذا تم كسر تنفيذ التعليمات البرمجية لسبب ما ، ينتقل البرنامج إلى كتلة الالتقاط ، حيث تتوفر ثلاث معلمات:- الاسم - الاسم الموحد للخطأ ؛
- رسالة - رسالة حول تفاصيل الخطأ ؛
- مكدس - مكدس الاستدعاء الحالي الذي حدث فيه الخطأ.
بمعنى آخر:try {
callFunc();
} catch (e) {
console.log(e.name)
console.log(e.message)
console.log(e.stack)
}
بالنسبة للمطور ، الشيء الرئيسي هو أن البرنامج سيكون قادرًا على متابعة التنفيذ بعد حظر الصيد. وبالتالي ، لن يتم قطع تفاعل المستخدم.باستخدام كتلة المحاولة / الالتقاط ، يمكنك أيضًا التسبب في الأخطاء الخاصة بك ، على سبيل المثال ، عند التحقق من البيانات:const user = {
name : «Mike»
};
try {
if (!user.age) throw new SyntaxError(«User age is absent!»);
} catch (e) {
console.log(e.name)
console.log(e.message)
console.log(e.stack)
}
أخيرًا ، يمكنك تمديد هذا البيان مع كتلة واحدة أخرى - أخيرًا ، والتي يتم تنفيذها دائمًا: سواء في حالة عدم وجود خطأ في المحاولة ، وفي حالة تمرير عنصر التحكم إلى كتلة الالتقاط:try {
callFunc();
} catch (e) {
console.log(e)
} finally {
...
}
في بعض الأحيان يستخدمون العبارة try / وأخيرا (بدون الالتقاط) بحيث يمكنك الاستمرار في استخدام الرمز دون معالجة أخطاء معينة.حدث Window.onerror
غالبًا ما يكون من المفيد معرفة أن البرنامج النصي على الصفحة قد تعطل ، حتى إذا تم كسر البرنامج وانتهت جلسة المستخدم دون جدوى. عادة ما يتم استخدام هذه المعلومات في أنظمة تسجيل الأخطاء.يحتوي كائن النافذة العمومية على حدث onerror ( استخدمه بعناية: قد يختلف التنفيذ في متصفحات مختلفة! ):window.onerror = function(message, url, line, col, error) {
console.log(`${message}\n ${line}:${col} ${url}`);
};
إذا قمت بوضع هذا الرمز في بداية البرنامج النصي أو تحميله في برنامج نصي منفصل في المقام الأول ، فعند أي خطأ أدناه ، سيتوفر المطور معلومات تفصيلية حوله.ومع ذلك ، تتوفر المعلومات الكاملة فقط للنصوص البرمجية التي تم تنزيلها من نفس المجال. إذا تم تحميل البرنامج النصي المكسور من مجال آخر ، فسيعمل window.onerror ، ولكن لن تكون هناك تفاصيل للخطأ.مكونات الإطار
تقدم بعض أطر JS ( React ، Vue) حلول معالجة الأخطاء الخاصة بها. على سبيل المثال ، سيتمكن React من رسم تخطيط خاص في موقع الكتلة التي حدث فيها الخطأ:class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
logErrorToMyService(error, errorInfo);
}
render() {
if (this.state.hasError) {
return <h1>- .</h1>;
}
return this.props.children;
}
}
<ErrorBoundary>
<MyWidget />
</ErrorBoundary>
في الواقع ، يتم تغليف مكون React في مكون خاص يعالج الأخطاء. هذا مشابه لوظائف الالتفاف مع بنية المحاولة / الالتقاط.2. أدوات تجميع المشروع
عادة ما يتم نقل نصوص JS الحديثة. أي أن التطوير يتم باستخدام أحدث المعايير البيئية والاجتماعية (ES). ثم يتم تحويل رمز المطور الذي يستخدم أداة إنشاء المشروع (مثل Webpack) إلى رمز يضمن العمل في العدد المحدد من المستعرضات.في مرحلة البناء ، يتم التحقق من الكود الصحيح. قوس مفتوح أو تعيين غير صحيح لحقل فئة سيؤدي على الفور إلى حدوث خطأ أثناء التجميع ، ولن يتم تجميع الحزمة ببساطة. سيتعين على المطور إصلاح هذه الأخطاء على الفور من أجل مواصلة العمل.أيضا ، قد يقترح المجمع أن بعض أجزاء الكود لا يتم استخدامها عند تنفيذ البرنامج. ربما يدفع هذا المطور إلى التفكير في دراسة أعمق للشفرة ، والتي قد تؤثر بشكل غير مباشر على تحديد الأخطاء الجديدة.3. الاختبار
طريقة أخرى لمنع الأخطاء في التعليمات البرمجية هي اختباره. هناك أدوات في الواجهة الأمامية للاستخدام الفعال لاختبارات الوحدة. عادة ، يتم استخدام أطر مثل Jest و Karma و Mocha و Jasmine. إلى جانب أطر الاختبار ، غالبًا ما يستخدمون ملحقات مثل Enzyme و React Testing Library و Sinon وغيرها ، والتي تتيح اختبارات إثراء بمساعدة السخرية ووظائف التجسس وغيرها من الأدوات.عند البحث عن أخطاء ، تكون الاختبارات مفيدة في المقام الأول لتحميل مجموعة متنوعة من البيانات التي يمكن أن تؤدي إلى أخطاء في التنفيذ. لذا ، فإن الكود التالي سيمرر التحقق من بناء الجملة ويعمل كما هو متوقع:const func = (data) => {
return JSON.parse(data)
}
func('{«a»:1}')
ومع ذلك ، فسوف ينكسر إذا أعطيته القيمة الخاطئة:func()
يمر هذا الرمز أيضًا بالتحقق من الصحة أثناء التجميع:const obj = {
outer : {
last : 9
}
}
if (obj.outer.inner.last) {
console.log(«SUCCESS»)
}
ومع ذلك ، سيتم قطعه أثناء التنفيذ. بعد الاختبار ، من المحتمل أن يجري المطور عمليات فحص إضافية:if (obj.outer?.inner?.last) {
console.log(«SUCCESS»)
}
غالبًا ما تحدث مثل هذه الأخطاء عند استقبال البيانات من الخادم (على سبيل المثال ، مع طلب AJAX) مع تحليلها اللاحق. يسمح لك اختبار الرمز بتحديد الحالات التي قد ينقطع فيها الرمز أثناء التنفيذ في متصفح العميل وإزالته.4. تسجيل الدخول
لنفترض أننا اتخذنا جميع التدابير الممكنة لمنع الأخطاء أثناء تطوير وتجميع المشروع. ومع ذلك ، لا يزال من الممكن اختراق الأخطاء رمز الإنتاج. نحتاج إلى حد ما لمعرفة وجودهم واتخاذ تدابير تصحيحية فورية. إن مطالبة المستخدمين بفتح وحدة تحكم في المتصفح والتقاط لقطات شاشة ليس الخيار الأفضل. لذلك ، من الجيد ربط تسجيل الخطأ بالمشروع.المعنى بسيط: لكل حدث window.onerror أو كل انتقال لتنفيذ التعليمات البرمجية إلى كتلة الالتقاط ، يتم تقديم طلب AJAX بسيط إلى عنوان خادم مخصص خصيصًا ، يتم وضع معلومات الخطأ في نصه. بعد ذلك ، ستحتاج إلى أداة ستبلغ الدعم الفني والمطورين بسرعة بوجود أخطاء جديدة وتسمح لك بالعمل معهم بفعالية. أكثر أدوات الواجهة الأمامية شيوعًا هي Sentry.يتيح لك نظام تسجيل الحراسة تجميع الأخطاء وعرضها وعرضها في الوقت الفعلي. هناك تجميعات للغات مختلفة ، بما في ذلك JavaScript. يوفر المشروع وصولًا مدفوعًا بميزات متقدمة للأعمال ، ومع ذلك ، يمكنك تجربة ميزاته الرئيسية على حساب تجريبي مجاني.يمكن توصيل Sentry إما مباشرة في ملف HTML ، أو في المكونات التي يتم تنفيذها على أحد الأطر الشائعة: React و Vue و Angular و Ember وغيرها.لتوصيل إمكانيات التسجيل مباشرة في المتصفح في القسم ، قم بتحميل البرنامج النصي:<script
src=«https:
integrity=«sha384-ePH2Cp6F+/PJbfhDWeQuXujAbpil3zowccx6grtsxOals4qYqJzCjeIa7W2UqunJ»
crossorigin="anonymous"></script>
بعد ذلك ، في كود JS ، نقوم بتهيئة:Sentry.init({
dsn: 'https://<your account key here>@sentry.io/<your project id here>'
});
الكل. في حالة حدوث خطأ في التعليمات البرمجية أسفل هذا السطر وعند حدوثه ، يقوم Sentry بتسجيله. سيتم تسجيل السجلات حتى عند حدوث الخطأ بسبب خطأ البرامج النصية من المجالات الأخرى:لدى Sentry فرصة كبيرة لتحليل مجموعة من رسائل الخطأ وتكوين الإشعارات. من الممكن أيضًا تجميع سجلات الأخطاء حسب إصدارات منتجك:Sentry.init({
dsn: 'https://<your account key here>@sentry.io/<your project id here>',
release: '2020.03.06.1'
});
باستخدام Sentry ، يمكن استخدام الإحصائيات لنقل سياق الخطأ ، على سبيل المثال ، معلومات العميل ، بصمة الإصبع ، مستوى الخطأ (فادح ، خطأ ، تحذير ، معلومات ، تصحيح) ، والعلامة.من الممكن تسجيل أحداث المستخدم في الإحصائيات. على سبيل المثال ، يمكنك ضبط التتبع لتغيير حجم نافذة المتصفح أو تقديم طلب AJAX. يحتوي Sentry أيضًا على عنصر واجهة المستخدم الخاص به مع نافذة ملاحظات ، والتي يمكن عرضها للمستخدم في حالة حدوث خطأ. سيوفر هذا معلومات إضافية للتحقيق في ملابسات الخطأ.لنشر Sentry مع الأطر ، ما عليك سوى تثبيت الحزمة والاتصال:# Using yarn
yarn add @sentry/browser
# Using npm
npm install @sentry/browser
نقوم بالتهيئة في البرنامج النصي الرئيسي للمشروع (للتفاعل والزاوية):import * as Sentry from «@sentry/browser»;
Sentry.init({ dsn: 'https://<your account key here>@sentry.io/<your project id here>' });
بالنسبة إلى Vue و Ember ، فإننا نمر بخط تكوين آخر مطلوب:# Vue
Sentry.init({
dsn: '<your account key here>@sentry.io/<your project id here>',
integrations: [new Integrations.Vue({Vue, attachProps: true})],
});
# Ember
Sentry.init({
dsn: '<your account key here>@sentry.io/<your project id here>',
integrations: [new Integrations.Ember()]
});
يتم تثبيت حزمة التكامل بشكل منفصل:# Using yarn
yarn add @sentry/integrations
# Using npm
npm install @sentry/integrations
لمنع التعارضات وتكرار المعلومات عند توصيل برامج نصية متعددة في مشروع واحد ، يتيح لك Sentry إنشاء عميل منفصل لكل تهيئة تسجيل:import { BrowserClient } from «@sentry/browser»;
const client = new BrowserClient({
dsn: '<your account key here>@sentry.io/<your project id here>',
});
client.captureException(new Error('example'));
يحتوي موقع المشروع على وثائق مفصلة مع أمثلة للاستخدام: https://docs.sentry.io .تم إعداد هذه المقالة بدعم من منصة السحابة السحابية Mail.ru Cloud Solutions .ماذا تقرأ عن هذا الموضوع:- مكونات رد الفعل القابلة للتفاعل: كيفية التوقف عن كتابة نفس الشيء .
- كيفية تجنب الأخطاء عند التطوير على React .
- - .