۲۸ مرداد ۱۴۰۴فارسی

یاد بگیرید چگونه از محدوده های خطای React برای مدیریت خطاهای زیبا، جلوگیری از خرابی برنامه و ارائه تجربه کاربری بهتر استفاده کنید. شامل بهترین روش ها و مثال های عملی.

محدوده های خطا در React: راهنمای قدرتمند برای مدیریت خطاها

در دنیای توسعه وب، ساخت برنامه های قوی و انعطاف پذیر بسیار مهم است. کاربران انتظار یک تجربه یکپارچه را دارند و خطاهای غیرمنتظره می تواند منجر به ناامیدی و رها شدن شود. React، یک کتابخانه محبوب جاوا اسکریپت برای ساخت رابط های کاربری، یک مکانیسم قدرتمند برای مدیریت خطاهای زیبا ارائه می دهد: محدوده های خطا.

این راهنما به مفهوم محدوده های خطا می پردازد و هدف، پیاده سازی، بهترین روش ها و چگونگی بهبود قابل توجه ثبات و تجربه کاربری برنامه های React شما را بررسی می کند.

محدوده های خطای React چه هستند؟

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

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

چرا باید از محدوده های خطا استفاده کنیم؟

مزایای استفاده از محدوده های خطا بسیار زیاد است:

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

پیاده سازی محدوده های خطا: یک راهنمای گام به گام

ایجاد یک محدوده خطا در React نسبتاً ساده است. شما باید یک کامپوننت کلاس را تعریف کنید که متدهای چرخه عمر static getDerivedStateFromError() یا componentDidCatch() (یا هر دو) را پیاده سازی کند.

1. کامپوننت Error Boundary را ایجاد کنید

ابتدا، بیایید یک کامپوننت Error Boundary پایه ایجاد کنیم:


class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    logErrorToMyService(error, errorInfo);
    console.error("Caught error: ", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return (
        
          Something went wrong.
          
            {this.state.error && this.state.error.toString()}
            

            {this.state.errorInfo && this.state.errorInfo.componentStack}
          
        
      );
    }

    return this.props.children; 
  }
}

توضیحات:

constructor(props): حالت کامپوننت را با hasError: false مقداردهی اولیه می کند.
static getDerivedStateFromError(error): این متد چرخه عمر پس از پرتاب یک خطا توسط یک کامپوننت descendent فراخوانی می شود. این خطا را که به عنوان یک آرگومان پرتاب شده است دریافت می کند و مقداری را برای به روز رسانی حالت برمی گرداند. در این حالت، hasError را روی true تنظیم می کند.
componentDidCatch(error, errorInfo): این متد چرخه عمر پس از پرتاب یک خطا توسط یک کامپوننت descendent فراخوانی می شود. این دو آرگومان را دریافت می کند: خطایی که پرتاب شده است و یک شی حاوی اطلاعاتی در مورد اینکه کدام کامپوننت خطا را پرتاب کرده است (errorInfo.componentStack). این جایی است که معمولاً خطا را در یک سرویس گزارش خطا ثبت می کنید.
render(): اگر this.state.hasError برابر true باشد، یک رابط کاربری جایگزین (در این مورد، یک پیام خطای ساده) را ارائه می دهد. در غیر این صورت، فرزندان خود را با استفاده از this.props.children ارائه می دهد.

2. کامپوننت های خود را با Error Boundary بپیچید

اکنون که کامپوننت Error Boundary خود را دارید، می توانید هر درخت کامپوننت را با آن بپیچید. به عنوان مثال:

اگر MyComponent یا هر یک از descendent های آن یک خطا پرتاب کند، ErrorBoundary آن را می گیرد و رابط کاربری جایگزین را ارائه می دهد.

3. ثبت خطاها

ثبت خطاها که توسط Error Boundaries گرفته شده اند بسیار مهم است تا بتوانید مشکلات برنامه خود را شناسایی و برطرف کنید. متد componentDidCatch() مکان ایده آل برای انجام این کار است.

شما می توانید از سرویس های گزارش خطای مختلفی مانند Sentry، Bugsnag یا Rollbar برای ردیابی خطاها در محیط تولید خود استفاده کنید. این سرویس ها ویژگی هایی مانند تجمیع خطا، تجزیه و تحلیل پشته خطا و جمع آوری بازخورد کاربر را ارائه می دهند.

مثال با استفاده از یک تابع فرضی logErrorToMyService():


componentDidCatch(error, errorInfo) {
  logErrorToMyService(error, errorInfo);
  console.error("Caught error: ", error, errorInfo);
}

بهترین روش ها برای استفاده از Error Boundaries

برای استفاده موثر از Error Boundaries، این بهترین روش ها را در نظر بگیرید:

دانه بندی: در مورد سطح دانه بندی مناسب برای Error Boundaries خود تصمیم بگیرید. پیچیدن کل بخش هایی از برنامه شما ممکن است خیلی گسترده باشد، در حالی که پیچیدن هر کامپوننت ممکن است خیلی دقیق باشد. برای تعادل بین جداسازی موثر خطاها بدون ایجاد سربار غیر ضروری، تلاش کنید. یک رویکرد خوب این است که بخش های مستقل رابط کاربری را بپیچید.
رابط کاربری جایگزین: یک رابط کاربری جایگزین کاربرپسند طراحی کنید که اطلاعات مفیدی را به کاربر ارائه می دهد. از نمایش جزئیات فنی یا پشته های خطا خودداری کنید، زیرا بعید است که اینها برای کاربر متوسط مفید باشند. در عوض، یک پیام خطای ساده ارائه دهید و اقدامات احتمالی، مانند بارگیری مجدد صفحه یا تماس با پشتیبانی را پیشنهاد دهید. به عنوان مثال، یک سایت تجارت الکترونیک ممکن است پیشنهاد دهد در صورت شکست کامپوننت پرداخت، یک روش پرداخت متفاوت را امتحان کنید، در حالی که یک برنامه رسانه های اجتماعی می تواند پیشنهاد دهد فید را در صورت بروز خطای شبکه تازه کنید.
گزارش خطا: همیشه خطاهایی را که توسط Error Boundaries گرفته شده اند در یک سرویس گزارش خطا ثبت کنید. این به شما امکان می دهد خطاها را در محیط تولید خود ردیابی کرده و زمینه های بهبود را شناسایی کنید. اطمینان حاصل کنید که اطلاعات کافی، مانند پیام خطا، پشته خطا، و زمینه کاربر را در گزارش های خطای خود گنجانده اید.
مکان: Error Boundaries را به صورت استراتژیک در درخت کامپوننت خود قرار دهید. کامپوننت هایی را که مستعد خطا هستند، مانند آنهایی که داده ها را از API های خارجی واکشی می کنند یا ورودی کاربر را مدیریت می کنند، در نظر بگیرید. شما معمولاً کل برنامه را در یک Error Boundary واحد نمی پیچید، بلکه چندین boundary را در جایی که بیشتر مورد نیاز هستند قرار می دهید. به عنوان مثال، ممکن است یک کامپوننت را که پروفایل های کاربر را نمایش می دهد، یک کامپوننت که فرم های ارسالی را مدیریت می کند یا یک کامپوننت که یک نقشه شخص ثالث را ارائه می دهد، بپیچید.
تست: Error Boundaries خود را به طور کامل آزمایش کنید تا اطمینان حاصل کنید که آنها مطابق انتظار کار می کنند. خطاها را در کامپوننت های خود شبیه سازی کنید و تأیید کنید که Error Boundary آنها را می گیرد و رابط کاربری جایگزین را نمایش می دهد. ابزارهایی مانند Jest و React Testing Library برای نوشتن تست های واحد و ادغام برای Error Boundaries شما مفید هستند. شما می توانید خطاهای API یا ورودی داده های نامعتبر را برای ایجاد خطا شبیه سازی کنید.
برای هندلرهای رویداد استفاده نکنید: Error Boundaries خطاها را در داخل هندلرهای رویداد نمی گیرند. هندلرهای رویداد خارج از درخت ارائه React اجرا می شوند. شما باید از بلوک های try...catch سنتی برای مدیریت خطاها در هندلرهای رویداد استفاده کنید.
از کامپوننت های کلاس استفاده کنید: Error Boundaries باید کامپوننت های کلاس باشند. کامپوننت های تابعی نمی توانند Error Boundaries باشند زیرا متدهای چرخه عمر ضروری را ندارند.

چه زمانی نباید از Error Boundaries استفاده کرد

در حالی که Error Boundaries فوق العاده مفید هستند، درک محدودیت های آنها مهم است. آنها برای مدیریت طراحی نشده اند:

هندلرهای رویداد: همانطور که قبلاً ذکر شد، خطاها در هندلرهای رویداد به بلوک های try...catch نیاز دارند.
کد ناهمزمان: خطاها در عملیات ناهمزمان (به عنوان مثال، setTimeout، requestAnimationFrame) توسط Error Boundaries گرفته نمی شوند. از بلوک های try...catch یا .catch() در Promises استفاده کنید.
ارائه سمت سرور: Error Boundaries در محیط های ارائه سمت سرور متفاوت عمل می کنند.
خطاها در خود Error Boundary: خطایی در خود کامپوننت Error Boundary توسط همان Error Boundary گرفته نخواهد شد. این از حلقه های بی نهایت جلوگیری می کند.

Error Boundaries و مخاطبان جهانی

هنگام ساخت برنامه هایی برای مخاطبان جهانی، اهمیت مدیریت خطای قوی افزایش می یابد. در اینجا نحوه مشارکت Error Boundaries آمده است:

مشکلات محلی سازی: مناطق مختلف ممکن است فرمت های داده یا مجموعه کاراکترهای متفاوتی داشته باشند. Error Boundaries می توانند خطاهای ناشی از داده های محلی سازی غیرمنتظره را به خوبی مدیریت کنند. به عنوان مثال، اگر یک کتابخانه قالب بندی تاریخ با یک رشته تاریخ نامعتبر برای یک منطقه خاص مواجه شود، یک Error Boundary می تواند یک پیام کاربرپسند را نمایش دهد.
تفاوت های API: اگر برنامه شما با چندین API که تفاوت های ظریفی در ساختارهای داده یا پاسخ های خطای آنها دارند ادغام می شود، Error Boundaries می توانند به جلوگیری از خرابی های ناشی از رفتار غیرمنتظره API کمک کنند.
بی ثباتی شبکه: کاربران در نقاط مختلف جهان ممکن است سطوح مختلفی از اتصال شبکه را تجربه کنند. Error Boundaries می توانند خطاهای ناشی از زمان های تلف شده شبکه یا خطاهای اتصال را به خوبی مدیریت کنند.
ورودی کاربر غیرمنتظره: برنامه های جهانی بیشتر احتمال دارد ورودی کاربر غیرمنتظره یا نامعتبر را به دلیل تفاوت های فرهنگی یا موانع زبانی دریافت کنند. Error Boundaries می توانند به جلوگیری از خرابی های ناشی از ورودی نامعتبر کمک کنند. یک کاربر در ژاپن ممکن است شماره تلفنی را با فرمتی متفاوت از کاربر در ایالات متحده وارد کند و برنامه باید هر دو را به خوبی مدیریت کند.
دسترسی: حتی نحوه نمایش پیام های خطا نیز باید برای دسترسی در نظر گرفته شود. اطمینان حاصل کنید که پیام های خطا واضح و مختصر هستند و برای کاربران دارای معلولیت قابل دسترسی هستند. این ممکن است شامل استفاده از ویژگی های ARIA یا ارائه متن جایگزین برای پیام های خطا باشد.

مثال: مدیریت خطاهای API با Error Boundaries

بیایید بگوییم شما یک کامپوننت دارید که داده ها را از یک API جهانی واکشی می کند. در اینجا نحوه استفاده از یک Error Boundary برای مدیریت خطاهای احتمالی API آمده است:


import React, { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (e) {
        setError(e);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [userId]);

  if (loading) {
    return Loading user profile...;
  }

  if (error) {
    throw error; // Throw the error to the ErrorBoundary
  }

  if (!user) {
    return User not found.;
  }

  return (
    
      {user.name}
      Email: {user.email}
      Location: {user.location}
    
  );
}

function App() {
  return (
    
      
    
  );
}

export default App;

در این مثال، کامپوننت UserProfile داده های کاربر را از یک API واکشی می کند. اگر API یک خطا (به عنوان مثال، 404 Not Found، 500 Internal Server Error) برگرداند، کامپوننت یک خطا را پرتاب می کند. کامپوننت ErrorBoundary این خطا را می گیرد و رابط کاربری جایگزین را ارائه می دهد.

جایگزین های Error Boundaries

در حالی که Error Boundaries برای مدیریت خطاهای غیرمنتظره عالی هستند، رویکردهای دیگری نیز برای جلوگیری از خطاها در وهله اول وجود دارد:

بررسی نوع (TypeScript, Flow): استفاده از بررسی نوع می تواند به شما کمک کند خطاهای مربوط به نوع را در حین توسعه، قبل از اینکه به تولید برسند، بگیرید. TypeScript و Flow تایپ استاتیک را به جاوا اسکریپت اضافه می کنند و به شما امکان می دهند انواع متغیرها، پارامترهای تابع و مقادیر بازگشتی را تعریف کنید.
Linting (ESLint): لینترها مانند ESLint می توانند به شما در شناسایی مسائل بالقوه کیفیت کد و اجرای استانداردهای کدنویسی کمک کنند. ESLint می تواند خطاهای رایج مانند متغیرهای استفاده نشده، نقطه ویرگول های از دست رفته و آسیب پذیری های امنیتی احتمالی را بگیرد.
تست واحد: نوشتن تست های واحد برای کامپوننت های خود می تواند به شما کمک کند تأیید کنید که آنها به درستی کار می کنند و خطاها را قبل از استقرار بگیرید. ابزارهایی مانند Jest و React Testing Library نوشتن تست های واحد را برای کامپوننت های React آسان می کنند.
بررسی کد: داشتن توسعه دهندگان دیگر که کد شما را بررسی می کنند می تواند به شما در شناسایی خطاهای احتمالی و بهبود کیفیت کلی کد کمک کند.
برنامه نویسی دفاعی: این شامل نوشتن کدی است که خطاهای احتمالی را پیش بینی می کند و آنها را به خوبی مدیریت می کند. به عنوان مثال، می توانید از عبارات شرطی برای بررسی مقادیر null یا ورودی نامعتبر استفاده کنید.

نتیجه

React Error Boundaries یک ابزار ضروری برای ساخت برنامه های وب قوی و انعطاف پذیر هستند، به خصوص آنهایی که برای مخاطبان جهانی طراحی شده اند. با گرفتن خطاها به خوبی و ارائه یک رابط کاربری جایگزین، آنها تجربه کاربری را به طور قابل توجهی بهبود می بخشند و از خرابی برنامه جلوگیری می کنند. با درک هدف، پیاده سازی و بهترین روش های آنها، می توانید از Error Boundaries برای ایجاد برنامه های پایدارتر و قابل اعتمادتر استفاده کنید که می توانند پیچیدگی های وب مدرن را مدیریت کنند.

به یاد داشته باشید که Error Boundaries را با سایر تکنیک های پیشگیری از خطا مانند بررسی نوع، linting و تست واحد ترکیب کنید تا یک استراتژی جامع مدیریت خطا ایجاد کنید.

با اتخاذ این تکنیک ها، می توانید برنامه های React را بسازید که قوی تر، کاربرپسندتر و مجهزتر برای مقابله با چالش های یک مخاطب جهانی هستند.