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

بر Suspense و Error Boundaries در React مسلط شوید تا مدیریت قوی وضعیت بارگذاری و خطایابی زیبا را پیاده‌سازی کنید. یاد بگیرید چگونه برنامه‌هایی پایدار و کاربرپسند بسازید.

Suspense و Error Boundaries در React: مدیریت پیشرفته بارگذاری و خطا

React Suspense و Error Boundaries ویژگی‌های قدرتمندی هستند که به توسعه‌دهندگان اجازه می‌دهند برنامه‌هایی مقاوم‌تر و کاربرپسندتر بسازند. آن‌ها روشی اعلانی (declarative) برای مدیریت وضعیت‌های بارگذاری و خطاهای غیرمنتظره فراهم می‌کنند که تجربه کاربری کلی را بهبود بخشیده و فرآیند توسعه را ساده‌تر می‌کند. این مقاله یک راهنمای جامع برای استفاده مؤثر از React Suspense و Error Boundaries ارائه می‌دهد و همه چیز را از مفاهیم پایه تا تکنیک‌های پیشرفته پوشش می‌دهد.

درک React Suspense

React Suspense مکانیزمی است برای «به تعویق انداختن» (suspending) رندر یک کامپوننت تا زمانی که یک شرط خاص، معمولاً در دسترس بودن داده از یک عملیات ناهمگام، برآورده شود. این ویژگی به شما امکان می‌دهد تا در حین انتظار برای بارگذاری داده، یک رابط کاربری جایگزین (fallback UI) مانند نشانگرهای بارگذاری نمایش دهید. Suspense مدیریت وضعیت‌های بارگذاری را ساده می‌کند، نیاز به رندر شرطی دستی را از بین می‌برد و خوانایی کد را بهبود می‌بخشد.

مفاهیم کلیدی Suspense

مرزهای Suspense (Suspense Boundaries): اینها کامپوننت‌های React هستند که کامپوننت‌هایی را که ممکن است به تعویق بیفتند، در بر می‌گیرند. آنها رابط کاربری جایگزین را برای نمایش در حین تعویق کامپوننت‌های دربرگرفته شده تعریف می‌کنند.
رابط کاربری جایگزین (Fallback UI): رابط کاربری که در حین تعویق یک کامپوننت نمایش داده می‌شود. این معمولاً یک نشانگر بارگذاری یا یک placeholder است.
واکشی ناهمگام داده: Suspense به طور یکپارچه با کتابخانه‌های واکشی داده ناهمگام مانند `fetch`، `axios` یا راه‌حل‌های سفارشی واکشی داده کار می‌کند.
تقسیم کد (Code Splitting): از Suspense همچنین می‌توان برای به تأخیر انداختن بارگذاری ماژول‌های کد استفاده کرد که امکان تقسیم کد و بهبود عملکرد بارگذاری اولیه صفحه را فراهم می‌کند.

پیاده‌سازی پایه‌ای Suspense

در اینجا یک مثال ساده از نحوه استفاده از Suspense برای نمایش یک نشانگر بارگذاری در حین واکشی داده آورده شده است:


import React, { Suspense } from 'react';

// شبیه‌سازی واکشی داده (مثلاً از یک API)
const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: 'John Doe', age: 30 });
    }, 2000);
  });
};

// ایجاد یک منبع که Suspense بتواند از آن استفاده کند
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise().then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }

      return result;
    },
  };
};

const userData = createResource(fetchData);

// کامپوننتی که از منبع داده می‌خواند
const UserProfile = () => {
  const data = userData.read();
  return (
    
      Name: {data.name}
      Age: {data.age}
    
  );
};

const App = () => {
  return (
    Loading user data...

}>
      
    
  );
};

export default App;

در این مثال:

`fetchData` یک عملیات واکشی داده ناهمگام را شبیه‌سازی می‌کند.
`createResource` منبعی ایجاد می‌کند که Suspense می‌تواند برای ردیابی وضعیت بارگذاری داده از آن استفاده کند.
`UserProfile` داده را از منبع با استفاده از متد `read` می‌خواند. اگر داده هنوز در دسترس نباشد، یک promise پرتاب می‌کند که کامپوننت را به تعویق می‌اندازد.
کامپوننت `Suspense` کامپوننت `UserProfile` را در بر می‌گیرد و یک پراپ `fallback` ارائه می‌دهد که رابط کاربری را برای نمایش در حین تعویق کامپوننت مشخص می‌کند.

Suspense با تقسیم کد (Code Splitting)

از Suspense می‌توان با React.lazy برای پیاده‌سازی تقسیم کد نیز استفاده کرد. این به شما امکان می‌دهد کامپوننت‌ها را فقط در صورت نیاز بارگذاری کنید و عملکرد بارگذاری اولیه صفحه را بهبود بخشید.


import React, { Suspense, lazy } from 'react';

// بارگذاری تنبل (lazy load) کامپوننت MyComponent
const MyComponent = lazy(() => import('./MyComponent'));

const App = () => {
  return (
    Loading component...}>
      
    
  );
};

export default App;

در این مثال:

`React.lazy` برای بارگذاری تنبل کامپوننت `MyComponent` استفاده می‌شود.
کامپوننت `Suspense` کامپوننت `MyComponent` را در بر می‌گیرد و یک پراپ `fallback` ارائه می‌دهد که رابط کاربری را برای نمایش در حین بارگذاری کامپوننت مشخص می‌کند.

درک Error Boundaries

Error Boundaries کامپوننت‌های React هستند که خطاهای جاوااسکریپت را در هر جای درخت کامپوننت‌های فرزند خود می‌گیرند (catch)، آن خطاها را ثبت (log) می‌کنند و به جای از کار افتادن کل برنامه، یک رابط کاربری جایگزین نمایش می‌دهند. آنها راهی برای مدیریت زیبای خطاهای غیرمنتظره فراهم می‌کنند، تجربه کاربری را بهبود می‌بخشند و برنامه شما را قوی‌تر می‌کنند.

مفاهیم کلیدی Error Boundaries

گرفتن خطا (Error Catching): Error Boundaries خطاها را در حین رندر، در متدهای چرخه حیات (lifecycle) و در سازنده‌های (constructors) کل درخت زیر خود می‌گیرند.
رابط کاربری جایگزین (Fallback UI): رابط کاربری که هنگام وقوع خطا نمایش داده می‌شود. این معمولاً یک پیام خطا یا یک placeholder است.
ثبت خطا (Error Logging): Error Boundaries به شما امکان می‌دهند خطاها را برای اهداف اشکال‌زدایی در یک سرویس یا کنسول ثبت کنید.
جداسازی درخت کامپوننت: Error Boundaries خطاها را به بخش‌های خاصی از درخت کامپوننت محدود می‌کنند و از از کار افتادن کل برنامه جلوگیری می‌کنند.

پیاده‌سازی پایه‌ای Error Boundaries

در اینجا یک مثال ساده از نحوه ایجاد یک Error Boundary آورده شده است:


import React, { Component } from 'react';

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

  static getDerivedStateFromError(error) {
    // به‌روزرسانی state تا رندر بعدی رابط کاربری جایگزین را نمایش دهد.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // همچنین می‌توانید خطا را در یک سرویس گزارش خطا ثبت کنید
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // می‌توانید هر رابط کاربری جایگزین سفارشی را رندر کنید
      return Something went wrong.;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

در این مثال:

کامپوننت `ErrorBoundary` متدهای `getDerivedStateFromError` و `componentDidCatch` را تعریف می‌کند.
`getDerivedStateFromError` زمانی فراخوانی می‌شود که خطایی در یک کامپوننت فرزند رخ دهد. این متد state را به‌روز می‌کند تا نشان دهد که خطایی رخ داده است.
`componentDidCatch` پس از گرفته شدن یک خطا فراخوانی می‌شود. این متد به شما امکان می‌دهد خطا را در یک سرویس یا کنسول ثبت کنید.
متد `render` وضعیت `hasError` را بررسی می‌کند و در صورت وقوع خطا، یک رابط کاربری جایگزین نمایش می‌دهد.

استفاده از Error Boundaries

برای استفاده از کامپوننت `ErrorBoundary`، به سادگی کامپوننت‌هایی را که می‌خواهید از آنها محافظت کنید، با آن در بر بگیرید:


import React from 'react';
import ErrorBoundary from './ErrorBoundary';

const MyComponent = () => {
  // شبیه‌سازی یک خطا
  throw new Error('An error occurred!');
};

const App = () => {
  return (
    
      
    
  );
};

export default App;

در این مثال، اگر خطایی در `MyComponent` رخ دهد، کامپوننت `ErrorBoundary` خطا را گرفته و رابط کاربری جایگزین را نمایش می‌دهد.

ترکیب Suspense و Error Boundaries

Suspense و Error Boundaries می‌توانند برای ارائه یک استراتژی جامع و قوی برای مدیریت خطاهای عملیات ناهمگام ترکیب شوند. با در بر گرفتن کامپوننت‌هایی که ممکن است به تعویق بیفتند با هر دو Suspense و Error Boundaries، می‌توانید هم وضعیت‌های بارگذاری و هم خطاهای غیرمنتظره را به زیبایی مدیریت کنید.

مثالی از ترکیب Suspense و Error Boundaries


import React, { Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';

// شبیه‌سازی واکشی داده (مثلاً از یک API)
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // شبیه‌سازی یک واکشی داده موفق
      // resolve({ name: 'John Doe', age: 30 });

      // شبیه‌سازی یک خطا در حین واکشی داده
      reject(new Error('Failed to fetch user data'));

    }, 2000);
  });
};

// ایجاد یک منبع که Suspense بتواند از آن استفاده کند
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise().then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }

      return result;
    },
  };
};

const userData = createResource(fetchData);

// کامپوننتی که از منبع داده می‌خواند
const UserProfile = () => {
  const data = userData.read();
  return (
    
      Name: {data.name}
      Age: {data.age}
    
  );
};

const App = () => {
  return (
    
      Loading user data...}>
        
      
    
  );
};

export default App;

در این مثال:

کامپوننت `ErrorBoundary` کامپوننت `Suspense` را در بر می‌گیرد.
کامپوننت `Suspense` کامپوننت `UserProfile` را در بر می‌گیرد.
اگر تابع `fetchData` با یک خطا reject شود، کامپوننت `Suspense` رد شدن promise را می‌گیرد و `ErrorBoundary` خطای پرتاب شده توسط Suspense را می‌گیرد.
سپس `ErrorBoundary` رابط کاربری جایگزین را نمایش می‌دهد.
اگر داده با موفقیت واکشی شود، کامپوننت `Suspense` کامپوننت `UserProfile` را نمایش می‌دهد.

تکنیک‌های پیشرفته و بهترین شیوه‌ها

بهینه‌سازی عملکرد Suspense

استفاده از Memoization: کامپوننت‌هایی که در مرزهای Suspense رندر می‌شوند را memoize کنید تا از رندرهای غیرضروری جلوگیری شود.
از درخت‌های عمیق Suspense اجتناب کنید: درخت Suspense را کم‌عمق نگه دارید تا تأثیر آن بر عملکرد رندر به حداقل برسد.
پیش‌واکشی داده (Prefetch): داده‌ها را قبل از نیاز پیش‌واکشی کنید تا احتمال تعویق کاهش یابد.

Error Boundaries سفارشی

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

رندر سمت سرور (SSR) با Suspense

از Suspense می‌توان با رندر سمت سرور (SSR) برای بهبود عملکرد بارگذاری اولیه صفحه استفاده کرد. هنگام استفاده از SSR، می‌توانید وضعیت اولیه برنامه خود را روی سرور پیش‌رندر کنید و سپس محتوای باقی‌مانده را به صورت جریانی (stream) به کلاینت ارسال کنید. Suspense به شما امکان می‌دهد واکشی داده ناهمگام را در حین SSR مدیریت کرده و در حین استریم شدن داده، نشانگرهای بارگذاری را نمایش دهید.

مدیریت سناریوهای مختلف خطا

این سناریوهای مختلف خطا و نحوه مدیریت آنها را در نظر بگیرید:

خطاهای شبکه: با نمایش یک پیام خطای آموزنده به کاربر، خطاهای شبکه را به زیبایی مدیریت کنید.
خطاهای API: با نمایش یک پیام خطا که مختص خطای رخ داده است، خطاهای API را مدیریت کنید.
خطاهای غیرمنتظره: با ثبت خطا و نمایش یک پیام خطای عمومی به کاربر، خطاهای غیرمنتظره را مدیریت کنید.

مدیریت خطای سراسری

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

مثال‌ها و موارد استفاده در دنیای واقعی

برنامه فروشگاه اینترنتی

در یک برنامه فروشگاه اینترنتی، از Suspense می‌توان برای نمایش نشانگرهای بارگذاری در حین واکشی داده‌های محصول استفاده کرد و از Error Boundaries برای مدیریت خطاهایی که در فرآیند پرداخت رخ می‌دهند، استفاده می‌شود. برای مثال، کاربری از ژاپن را تصور کنید که در حال مرور یک فروشگاه آنلاین واقع در ایالات متحده است. بارگذاری تصاویر و توضیحات محصول ممکن است کمی طول بکشد. Suspense می‌تواند یک انیمیشن بارگذاری ساده را در حین واکشی این داده‌ها از سروری که احتمالاً در نیمه دیگر جهان قرار دارد، نمایش دهد. اگر درگاه پرداخت به دلیل یک مشکل موقتی شبکه (که در زیرساخت‌های مختلف اینترنتی در سراسر جهان رایج است) از کار بیفتد، یک Error Boundary می‌تواند پیام کاربرپسندی را نمایش دهد که از او می‌خواهد بعداً دوباره تلاش کند.

پلتفرم رسانه اجتماعی

در یک پلتفرم رسانه اجتماعی، از Suspense می‌توان برای نمایش نشانگرهای بارگذاری در حین واکشی پروفایل کاربران و پست‌ها استفاده کرد و از Error Boundaries برای مدیریت خطاهایی که هنگام بارگذاری تصاویر یا ویدئوها رخ می‌دهند، استفاده می‌شود. کاربری که از هند در حال مرور است ممکن است زمان بارگذاری کندتری را برای رسانه‌های میزبانی شده بر روی سرورهای اروپایی تجربه کند. Suspense می‌تواند یک placeholder را تا زمان بارگذاری کامل محتوا نشان دهد. اگر داده‌های پروفایل یک کاربر خاص خراب شده باشد (که نادر اما ممکن است)، یک Error Boundary می‌تواند از از کار افتادن کل فید رسانه اجتماعی جلوگیری کرده و به جای آن یک پیام خطای ساده مانند «امکان بارگذاری پروفایل کاربر وجود ندارد» نمایش دهد.

برنامه داشبورد

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

نتیجه‌گیری

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

همانطور که React به تکامل خود ادامه می‌دهد، Suspense و Error Boundaries احتمالاً نقش مهم‌تری در ساخت برنامه‌های وب مدرن ایفا خواهند کرد. با تسلط بر این ویژگی‌ها، می‌توانید از دیگران پیشی بگیرید و تجربه‌های کاربری استثنایی ارائه دهید.