campaign-edianeh-98

آموزش مدیریت خطا یا Error handling در Javascript



visibility  
mode_comment   ۲

آموزش مدیریت خطا یا Error handling در Javascriptدر این مطلب قصد دارم مدیریت خطا یا Error handling در Javascript رو بهتون آموزش بدم تا با استفاده از اون بتونین کدهایی بهتر نوشته و مشکلات کدنویسی خودتون رو کاهش بدین.

هر برنامه‌نویس دلش میخواد کدهایی بنویسه که بدون مشکل کار کنند. Error یا خطاها باعث میشن که برنامه شما اونجور که انتظار دارید اجرا نشن. بعضی وقتها خطاها در Javascript خیلی پیچیده میشن و این خطا به خود شما برمیگرده و نمیتونین هیچ کس رو جز خودتون سرزنش کنید.

اگر بتونیم که همه این Error ها رو پیدا کرده و اونا رو مشخص کنیم و نزاریم که بار دیگر رخ بدهند، خیلی عالی خواهد بود.

در این مقاله فرض شده که شما با Javascript مقدار کمی آشنایی دارید. اگر میخواید بیشتر در مورد Javascript اطلاعات داشته باشید و حرفه‌ای بشید میتونین در دوره Javascript سون لرن شرکت کنید.

دسته‌بندی‌های خطا

معمولا خطاها در Javascript به 2 دسته کلی مشکلات واقعی و اشتباهات برنامه‌نویس تقسیم میشن. مشکلات واقعی چیزایی هستند که برنامه‌نویس نمیتونه از وقوع اونا جلوگیری کنه و در دنیای واقعی پیش میان. مثلا فرض کنید که شما میخواید کاربر در فرم ورود، اطلاعاتش رو وارد کنه ولی یک رشته خالی رو قرار میده و این کار باعث به وجود اومدن یک Error یا خطا میشه.

اشتباهات برنامه‌نویس خطاهایی هستند که در زمان نوشتن کد توسط برنامه‌نویس به وجود میان. این خطاها میتونن بصورت زیر تقسیم‌بندی بشن:

Syntax Error

این مورد ساده‌ترین نوع خطا می‌باشد و اونا رو به عنوان Parsing error نیز میشناسن. در زبانهای برنامه‌نویسی که نیاز به کامپایل دارند، در زمان کامپایل و در Javascript در زمان تفسیر یا اجرا در مرورگر، این ارورها خودشون رو نشون میدن. کد زیر رو ببینید:

در خط آخر کد بالا یک Syntax error وجود داره چون در انتها پرانتز رو نبستیم. معمولا زمانی که یک Syntax error در Javascript رخ میده، بقیه کدهایی که در Thread های دیگه هستند اگر به کدی که خطا در اون رخ داده وابسته نباشند، بصورت کامل اجرا خواهند شد و اجرای کدهای اون Thread متوقف میشه.

Runtime Errors یا خطاهای زمان اجرا

به این موارد Exception هم گفته میشه و این خطاها در زمان اجرا شدن برنامه رخ میدن. کد زیر رو ببینید:

تابع openPopup باعث به وجود اومدن یک Runtime Error میشه. همونطور که میبینید هیچ خطایی از نظر Syntax یا Parsing error وجود نداره. در زمان اجرا، Runtime سعی میکنه که متد openObject رو از شئ سراسری window فراخوانی کنه و از اونجایی که چنین متدی وجود نداره، یک خطا از نوع Runtime error رخ میده.

Logical Error یا خطاهای منطقی

پیچیده‌ترین خطا در میان این سه دسته، خطاهای منطقی هستند. Logical Error زمانی رخ میدن که شما اشتباه کردید و یا منطق کدنویسی شما مشکل داره و همه حالات رو تحت پوشش قرار ندادین. این اشتباه و مشکلات باعث میشه که خروجی کدهای شما اونی که میخواید نباشه و رفتارهای عجیبی از خودش نشون بده. برای پیدا کردن این مشکلات باید زمان بیشتری رو نسبت به خطاهای قبل در نظر بگیریم. کد زیر رو ببینید:

اگر یک نفر کد بالا رو با ورودی‌های (``"``JavaScript``"``, 10) فراخوانی کنه، چه اتفاقی میوفته؟ در مورد (5, 0.2) چی؟ اگر نگاهی به تابع بالا بندازید متوجه خواهید شد که توانهای کسری در اون پشتیبانی نمیشن. در این موارد شما میتونین با مشخص کردن نوع ورودی‌ها در comment و همچنین با استفاده از input validation، تا حدودی جلوی این خطاها رو بگیرید.

بهترین روشها برای مدیریت خطا یا Error handling

یک انتقادی که همیشه به Javascript میشه اینه که چرا با استفاده از Callback ها ارورها رو مدیریت میکنه. الگویی که کد زیر نوشته شده رو مشاهده کنید:

مورد خوبی که در الگوی بالا میشه از اون یاد کرد اینه که برنامه‌نویس رو مجبور میکنه که خطاها رو مدیریت کنه. به عنوان برنامه‌نویس شما همیشه میخواید بفهمید که یک عملیات چه موقع با خطا مواجه میشه. مخصوصا زمانی که کدها Asynchronous باشند.

مورد بدی که در الگوی بالا وجود داره اینه که بصورت خوبی نوشته نشده و اگر قسمتی از کد شکست بخوره، کل عملیات شکست خواهد خورد.

خوشبختانه روشهایی وجود داره که با استفاده از اونا میتونین خطاها رو به خوبی مدیریت کنید. حالا میخوایم این موارد رو بررسی کنیم.

try...catch...finally

با استفاده از try...catch...finally میتونین به راحتی کدهای خودتون که احتمال میدین خطا در اونا به وجود بیاد رو مدیریت کنید. این روش خطاهای Logical و Runtime رو پشتیبانی میکنه و در Catch اونا رو مدیریت میکنه ولی خطاهای Syntax در اون پشتیبانی نمیشن. Syntax این روش بصورت زیر می‌باشد:

در بلاک try کدهایی که میخوایم اجرا بشن رو قرار میدیم. اگر خطایی در این بخش رخ بدهد، خطای مورد نظر در آرگومان e مربوط به بخش catch قرار میگیره و میتونین در بخش Catch خطا رو مدیریت کنید. اگر خطایی رخ نده هم بخش catch اصلا وارد کار نمیشه. بخش finally جدیدا به Javascript اضافه شده و استفاده از اون دلخواه هست و میتونین ازش استفاده نکنید. کدهایی که در این قسمت قرار میدین، هم در زمان وجود خطا و هم در زمان وجود نداشتن خطا، اجرا میشن.

Throw statement

با استفاده از کلمه کلیدی Throw میتونین یک exception رو اونجوری که مدنظرتون هست تعریف کنید. در زمان اجرا شدن کدها، وقتی که مفسر به throw برخورد میکنه، اجرای برنامه متوقف میشه و وارد اولین Catch در Call stack میشیم. اگر هیچ Catch در کدهای ما وجود نداشته باشه و برای اون فکری نکرده باشیم، در زمان خطا یا Throw کردن، ارور مورد نظر مدیریت نمیشه و باعث میشه که برنامه متوقف بشه و سرور Down بشه. مثال زیر رو ببینید:

استفاده از متد onerror

با استفاده از متد onerror میتونین به سادگی خطاهای مورد نظرتون رو مدیریت کنید. اینکار معمولا با استفاده از window.onerror انجام میشه. اینکار باعث میشه که متد onerror زمانی که خطایی در زمان اجرا شدن برنامه در مرورگر رخ بده، اجرا بشه. مثال زیر رو ببینید: کار دیگه‌ای که با استفاده از onerror معمولا انجام میدن، مدیریت لود نشدن تصاویر هست. بصورت زیر:

ویژگی Call stack

ویژگی stack یکی از ویژگی‌های مربوط به شئ سراسری Error می‌باشد. این ویژگی ترتیب فراخوانی شدن توابع رو به همراه اطلاعاتی دقیق از اونا در اختیارتون قرار میده که خیلی بدردتون خواهد خورد. مثال زیر رو ببینید:

فرض کنید که کد رو در مسیر C:\stackoverflow.js ذخیره کنیم. حالا اگر اون رو اجرا کنیم، بصورت زیر خواهد بود:

ویژگی Stack هنوز بصورت استاندارد در نیومده و نباید از اون در Production استفاده کنید و فقط میتونین در Development برای پیدا کردن مشکلات از اون بهره ببرید.

مدیریت خطاها در کدهای Asynchronous

معمولا مدیریت خطاها در کدهای Asynchronous با استفاده از if...else های زیادی انجام میشه. با استفاده از Promise ها میتونین به راحتی خطاها رو مدیریت کنید. وقتی که خطایی برای یک Promise به وجود بیاد، بلاک catch فراخوانی میشه و کارهای مورد نظر انجام میشه. مثال زیر رو ببینید:

همونطور که مشاهده میکنید یک Promise جدید ساختیم و در متغیر p1 قرار دادیم و در اون Promise رو با مقدار success بصورت resolve در آوردیم. با اینکار متد then مربوط به p1 فراخوانی میشه و کدهای درون اون اجرا میشن و success در console چاپ میشه. خط بعد از اون یک متن throw شده و باعث میشه که متد  catch فراخوانی بشه و oh, no در console چاپ بشه. خروجی کد بالا بصورت زیر خواهد بود:

نتیجه‌گیری

دیدیم که چطور میتونیم به روشهای مختلف، کدهامون رو خطایابی کنیم و بهتره که در این زمینه حرفه‌ای بشید تا بتونین خطاها رو تا جایی که میشه کم کرده و همه اونا رو مدیریت کنید.

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back
comment دیدگاه کاربران
تور پاتایا replyپاسخ

مفید بود مرسی

محمد اسفندیاری

موفق باشید دوست عزیز

add_circle ارسال دیدگاه

خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :