مدیریت خطا با Angular – انجمن DEV

معرفی

در این وبلاگ با محبوب ترین راه حل های رسیدگی به خطا در Angular آشنا می شویم. قبل از اینکه به موضوع بپردازیم، بیایید تصور کنیم که چرا ممکن است در برنامه هایمان خطا داشته باشیم؟ چرا نمی توانیم از روی مشخصات همیشه روشن کد بنویسیم؟ برای درک ساده این موضوع، انسان‌ها نرم‌افزاری را ایجاد می‌کنند و ما در معرض خطر اشتباه هستیم. برخی از دلایل خطاها می توانند عبارتند از:

• پیچیدگی کاربرد
• ارتباط بین ذینفعان
• اشتباهات توسعه دهندگان
• فشار زمان
• عدم انجام تست و غیره

این لیست همینطور ادامه می یابد. با در نظر گرفتن این موضوع، زمانی فرا می رسد که اتفاقات غیرمنتظره رخ می دهد و یک اشتباه محاسبه می شود.

چرا با خطاها برخورد می کنیم؟

مهمترین جنبه توسعه برنامه مدیریت خطا است. این نقص ها مانع تلاش ما می شود. زمانی که مشکلی پیش بیاید، برنامه با خطا مواجه می شود. Angular مشکلات را حل می کند، اما کار دیگری جز نوشتن آنها در کنسول انجام نمی دهد. این هم برای کاربر و هم برای توسعه دهنده ناخوشایند است. خطاهای شگفت‌انگیز در هر زمان رخ می‌دهد، به‌صورت یک شکست ارتباط، استثنای تهی، عدم دسترسی خالص، کاربر غیرمجاز Associate in Nursing، یا جلسه نامعتبر.

2 نوع مکانیسم رسیدگی به خطا در Angular وجود دارد.

• خطاهای HTTP
• خطاهای سمت مشتری

خطاهای HTTP

هنگامی که از ماژول مشتری HTTP برای ارسال درخواست HTTP استفاده می کنید، خطاهای HTTP ظاهر می شوند. در اینجا دو نوع خطا وجود دارد. یکی از این رویدادها یک رویداد ایجاد شده توسط سرور است، مانند یک کاربر غیرمجاز، انقضای جلسه یا خرابی سرور. هنگامی که مشتری سعی می کند درخواست HTTP را بازیابی کند، عکس آن ایجاد می شود. این مشکلات می تواند ناشی از یک خطای شبکه، مشکل تولید درخواست یا چیز دیگری باشد.

خطاهای HTTP سمت کلاینت

خطاهای HTTP سمت کلاینت مربوط به تمام خطاهایی است که در نتیجه یک واحد کد رخ می دهد. این نشان می دهد که یک نقص در کد وجود دارد.

بهترین راه برای مقابله با چنین خطاهایی چیست؟

در Angular دو راه برای رسیدگی به این مشکلات وجود دارد.

1. پیش‌فرض مدیریت خطا
2. مدیریت خطای جهانی

پیش‌فرض مدیریت خطا

ما ممکن است به سادگی از مکانیسم try-catch برای مقابله با اشتباه در این تکنیک استفاده کنیم. این یک روش امتحان شده و واقعی برای مقابله با اشتباهات است.

نحو

  handelerror()
  {
    try
    {
      // Your code here
    }  
    Catch(error)
    {
      // handle error here
    } 
  }

مدیریت خطا در مقیاس جهانی

همانطور که در بخش قبل مشخص شد، دسته GlobalErrorHandler به عنوان یک ارائه دهنده در ERP ثبت شده است. هنگامی که یک خطا در فواصل زمانی اعمال می شود، این رویکرد به عنوان شناخته می شود. خطا به عنوان یک پارامتر ارائه می شود و باید به صورت شخصی در فواصل زمانی تکنیک ارائه شود. در سناریوی ما، یک دیالوگ به درستی نگاه می کند که در آن پیام خطا باید مجبور شود نمایش داده شود، و علاوه بر این اشکال در بازه های زمانی کنسول مرورگر ثبت می شود.

بیشتر بخوانید: راهنمای کامل کتابخانه Angular Rxjs

پنجره دیالوگ بسته می‌شود، علی‌رغم اینکه خطا در خارج از ngZone پرتاب شده است یا نه، زیرا در نتیجه باز شدن آن در هنگام درخواست از zone.run. این اغلب مورد است، به عنوان مثال، اگر یک خطای اتصال چرخه حیات مانند ngOnInit انجام در طول یک قطعه اتفاق می افتد.

global-error-handler.ts

  @Injectable()
export class GlobalErrorHandler implements ErrorHandler {
  constructor(private errorDialogService: ErrorDialogService, private zone: NgZone) {}
  handleError(error: Error) {
    this.zone.run(() =>
      this.errorDialogService.openDialog(
        error.message || "Undefined client error"
    ));
    console.error("Error from global error handler", error);
  }
}

در مثال ما، روشی در AppComponent به نام localError وجود دارد که خطا می‌دهد:

  localError() {
    throw Error("The app component has thrown an error!");
  }

بنابراین، اگر دکمه اصلی فشار داده شود، این مکانیسم نامگذاری می شود و GlobalErrorHandler مشکلی را که با نمایش این گفتگو ایجاد شده است برطرف می کند:

سپس کاربر بر روی دکمه Close کلیک می کند تا گفتگوی خطا را رد کرده و به برنامه بازگردد. در واقع، مکانیسم یک خطا ممکن است از موردی به مورد دیگر متفاوت باشد و نیاز به اقدامات بیشتری داشته باشد. به عنوان مثال، یادداشت کردن پیغام خطا در گزارش حرکت در پایان، مرور برنامه در صفحه دیگری، یا تنظیم مجدد وضعیت خاصی هنگام مشاهده عملکردها، اغلب مفید است. در این مورد، ما معمولا فقط گفتگوی خطا را نشان می دهیم.

رهگیر خطای HTTP

کاردانی در رده جنگنده پروتکل انتقال فرامتن پرستاری، رهگیری اشتباهات پروتکل انتقال ابرمتن را تکمیل می کند. رهگیری متد توسط کلاس HttpErrorInterceptor ارائه می شود که رابط HttpInterceptor را پیاده سازی می کند. این روش به صورت مکانیکی برای هر درخواست پروتکل انتقال ابرمتن ایجاد شده توسط برنامه ما، صرف نظر از اینکه سه تاج باشد یا نه، اعمال می شود. این همچنین این امکان را برای ایالات متحده فراهم می کند که یک اسپینر بارگیری را تراز کند. اولین مرحله فراخوانی سرویسی است که گفتگوی Loading Spinner را نمایش می دهد:

this.loadingDialogService.openDialog();

صفحه خطا
گفتگوی آپلود چرخشی باز می شود و به کاربر اطلاع می دهد که تعامل با قسمت پشتی در حال حاضر مدتی طول می کشد:

در حال بارگذاری صفحه
پس از آن، روال پروتکل درخواست به پایان می رسد، که در اصل با یک پروتکل کنترل کننده مانند زیر انجام می شود. پروتکل کنترل کننده راهی برای پردازش تمام درخواست ها و ارائه پاسخ RxJS فراهم می کند. در نتیجه به روش لوله اشاره می شود که به ایالات متحده این امکان را می دهد تا از برخی اپراتورهای RxJS برای رسیدگی به درخواست ها یک به یک استفاده کند.

می خواهید شرکت توسعه انگولار مورد اعتماد را استخدام کنید – همین امروز پرس و جو کنید.

ما عملگر catchError را قربانی خواهیم کرد، که هر زمان که اشتباهی به دلیل درخواست نامناسب به backend انجام شود، مرده است. این مشکل فقط به عنوان یک اقدام اولیه در کنسول در برنامه برنامه ثبت می شود. سرویس پنجره خطا با نام‌های «باز کردن پنجره با پیام خطا» و «کد ایستاده پاسخ خطا» نیز شناخته می‌شود (مثلاً 404). در نهایت، ما باید با اعلان خطا تولید شده توسط تابع business throwError که خطا را به عنوان ورودی دریافت می کند، مقابله کنیم. چه درخواست خطایی ارائه دهد یا نه، گفتگوی بارگذاری گردان یک بار دیگر با کمک قاتل دفن می شود. – یعنی catchError به عنوان – یا نه نامیده شد.

در برنامه نمونه ما می توانید ببینید که درخواست HTTP زیر نیازی به رسیدگی به خطای اضافی ندارد:

  failingRequest() {
    this.http.get("https://httpstat.us/404?sleep=2000").toPromise();
  }

گفتگوی خطا به شکل زیر خواهد بود:

گفتگوی خطا
در نهایت، لازم به ذکر است که کنترل کننده خطای جهان از نقص پروتکل انتقال متن قابل خواندن توسط ماشین آگاه شده است (شما می توانید این را در بازه های زمانی در کنسول مرورگر مشاهده کنید). با این حال، هیچ پنجره گفتگوی خطای جداگانه ای در طول این حالت ایجاد نشد زیرا سرویس گفتگوی خطا قبلاً توسط جنگنده خطای پروتکل انتقال متن قابل خواندن توسط ماشین فعال شده بود، که باز کردن گفتگوی دوم در زمان مشابه را ممنوع می کرد. معمولاً ممکن است نمونه‌هایی را در وب بیابید که از عملگر instanceOf در کنترل‌کننده خطا در سراسر جهان استفاده می‌کنند تا مشخص کنند که آیا خطای پروتکل انتقال متن قابل خواندن توسط دستگاه پرستاری است یا خیر. در سراسر این مورد، کل رسیدگی به خطا – همراه با خطاهای پروتکل انتقال متن قابل خواندن توسط ماشین – توسط کنترل کننده خطا در سراسر جهان مدیریت می شود. با این نسخه Angular (نسخه 10) این می تواند غیرقابل تصور باشد، زیرا هر اندازه مربع خطا صرفاً به عنوان “خطا” شناخته می شود، هیچ داده اضافی در مورد اینکه آیا این یک خطای پروتکل انتقال فرامتن است یا نه وجود ندارد. نه بنابراین این متن یک رویکرد جایگزین را برای دستیابی به مدیریت خطای مشابه نشان می‌دهد، اما با جداسازی آن در کنترل‌کننده خطا، که همه چیز Associate در Nursingd و fighter را می‌گیرد، که تنها از خطاهای پروتکل انتقال فرامتن مراقبت می‌کند.

نتیجه

در این وبلاگ با بروز خطاها، نحوه برخورد با خطاها، روش های مختلف رسیدگی به خطا آشنا می شویم. و چند کار راه اندازی اولیه وجود دارد، شما در درازمدت از مدیریت مداوم خطاها بهره مند خواهید شد، که دیگر نگران اضافه شدن ویژگی های جدید به برنامه در آینده نخواهید بود. اسپینر بارگیری که به صورت خودکار برای هر درخواست ظاهر می شود، یکسان است. البته اینها فقط موارد ضروری هستند. تغییرات و اصلاحات خاصی در این روش بسته به نیاز برنامه امکان پذیر است.