تقنيات معالجة الأخطاء المتقدمة في TypeScript

إن التعامل الفعال مع الأخطاء أمر بالغ الأهمية لبناء تطبيقات TypeScript قوية. فبالإضافة إلى كتل try-catch الأساسية، يوفر TypeScript العديد من التقنيات المتقدمة للتعامل مع الأخطاء بسلاسة وضمان موثوقية الكود. تستكشف هذه المقالة بعض استراتيجيات التعامل مع الأخطاء المتقدمة هذه.

1. فئات الخطأ المخصصة

يتيح لك إنشاء فئات أخطاء مخصصة تمثيل أنواع مختلفة من الأخطاء بدقة أكبر. يمكن أن تتضمن الأخطاء المخصصة خصائص أو طرقًا إضافية، مما قد يساعد في تحديد المشكلات المحددة ومعالجتها.

class CustomError extends Error {
  constructor(public message: string, public code: number) {
    super(message);
    this.name = 'CustomError';
  }
}

function throwError() {
  throw new CustomError('Something went wrong', 500);
}

try {
  throwError();
} catch (error) {
  if (error instanceof CustomError) {
    console.error(`Error: ${error.message}, Code: ${error.code}`);
  } else {
    console.error('Unexpected error:', error);
  }
}

في هذا المثال، يقوم CustomError بتوسيع فئة Error المضمنة ويضيف خاصية code لتحديد رمز الخطأ.

2. معالجة الأخطاء في الكود غير المتزامن

غالبًا ما يتطلب الكود غير المتزامن معالجة خاصة للأخطاء. يمكن أن يؤدي استخدام async وawait مع كتل try-catch إلى تبسيط معالجة الأخطاء في العمليات غير المتزامنة.

async function fetchData(url: string): Promise {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new CustomError('Failed to fetch data', response.status);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    if (error instanceof CustomError) {
      console.error(`Error: ${error.message}, Code: ${error.code}`);
    } else {
      console.error('Unexpected error:', error);
    }
  }
}

fetchData('https://api.example.com/data');

يوضح هذا المثال كيفية التعامل مع الأخطاء الناتجة عن استدعاء fetch غير المتزامن باستخدام async وawait وtry-catch.

3. حدود الخطأ في React مع TypeScript

عند العمل مع React وTypeScript، تساعد حدود الأخطاء في اكتشاف الأخطاء في شجرة المكونات وعرض واجهة مستخدم بديلة. يضمن تنفيذ حدود الأخطاء مع TypeScript سلامة النوع والتعامل السليم مع الأخطاء.

import React, { Component, ErrorInfo } from 'react';

interface Props {}

interface State {
  hasError: boolean;
}

class ErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(): State {
    return { hasError: true };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
    console.error('Error caught by boundary:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

في مثال React هذا، يلتقط مكون ErrorBoundary الأخطاء في مكوناته الفرعية ويعرض واجهة مستخدم بديلة في حالة حدوث خطأ.

4. استخدام حراس النوع لأنواع الأخطاء

تساعد حراسة النوع في تضييق نطاق نوع الخطأ في TypeScript. وهذا مفيد بشكل خاص عند التعامل مع الأخطاء باستخدام أنواع مختلفة أو من مصادر مختلفة.

function isCustomError(error: any): error is CustomError {
  return error instanceof CustomError;
}

try {
  throw new CustomError('Example error', 400);
} catch (error) {
  if (isCustomError(error)) {
    console.error(`CustomError: ${error.message}, Code: ${error.code}`);
  } else {
    console.error('Unknown error:', error);
  }
}

وظيفة isCustomError عبارة عن حارس نوع يساعد في تحديد ما إذا كان الخطأ الذي تم التقاطه هو مثيل لـ CustomError.

5. معالجة الأخطاء المركزية

بالنسبة للتطبيقات الكبيرة، يمكن أن يؤدي التعامل المركزي مع الأخطاء إلى تبسيط إدارة الأخطاء وضمان الاتساق. ويمكن القيام بذلك باستخدام البرامج الوسيطة في Express.js أو معالجات الأخطاء العالمية في أطر عمل أخرى.

import express, { Request, Response, NextFunction } from 'express';

const app = express();

app.use((err: any, req: Request, res: Response, next: NextFunction) => {
  console.error('Centralized Error:', err.message);
  res.status(500).send('Internal Server Error');
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

يوضح هذا المثال معالج أخطاء مركزي لتطبيق Express.js. فهو يلتقط جميع الأخطاء ويستجيب برسالة عامة.

خاتمة

تعمل تقنيات معالجة الأخطاء المتقدمة في TypeScript على تعزيز قوة تطبيقاتك من خلال توفير المزيد من التحكم في إدارة الأخطاء. تعد فئات الأخطاء المخصصة، ومعالجة الأخطاء غير المتزامنة، واستخدام حدود الأخطاء في React، وحراس النوع، ومعالجة الأخطاء المركزية استراتيجيات أساسية لإدارة الأخطاء بشكل فعال. سيؤدي تنفيذ هذه التقنيات إلى إنشاء أكواد أكثر قابلية للصيانة وموثوقية.