import React, { Suspense } from 'react';

// Simulate fetching data (e.g., from an API)
const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: 'John Doe', age: 30 });
    }, 2000);
  });
};

// Create a resource that Suspense can use
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);

// Component that reads from the resource
const UserProfile = () => {
  const data = userData.read();
  return (
    

      
Name: {data.name}
      
Age: {data.age}
    
  );
};

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

בדוגמה זו:

• `fetchData` מדמה פעולה אסינכרונית לשליפת נתונים.
• `createResource` יוצר משאב ש-Suspense יכול להשתמש בו כדי לעקוב אחר מצב הטעינה של הנתונים.
• `UserProfile` קורא נתונים מהמשאב באמצעות הפונקציה `read`. אם הנתונים עדיין לא זמינים, הוא זורק הבטחה, אשר משעה את הרכיב.
• הרכיב `Suspense` עוטף את `UserProfile` ומספק את ה-prop `fallback`, אשר מציין את ממשק המשתמש שיוצג בזמן שהרכיב מושעה.

Suspense עם חלוקת קוד

ניתן להשתמש ב-Suspense גם עם React.lazy כדי ליישם חלוקת קוד. זה מאפשר לך לטעון רכיבים רק כאשר הם נחוצים, ולשפר את ביצועי טעינת הדף הראשונית.

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

// Lazy load the MyComponent component
const MyComponent = lazy(() => import('./MyComponent'));

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

export default App;

בדוגמה זו:

• `React.lazy` משמש לטעינה עצלה של הרכיב `MyComponent`.
• הרכיב `Suspense` עוטף את `MyComponent` ומספק את ה-prop `fallback`, אשר מציין את ממשק המשתמש שיוצג בזמן שהרכיב נטען.

הבנת Error Boundaries

Error Boundaries הם רכיבי React שתופסים שגיאות JavaScript בכל מקום בעץ הרכיבים הצאצא שלהם, מתעדים את השגיאות הללו ומציגים ממשק משתמש חלופי במקום לקרוס את כל היישום. הם מספקים דרך לטפל בחן בשגיאות בלתי צפויות, לשפר את חוויית המשתמש ולהפוך את היישום שלך לחזק יותר.

מושגי מפתח של Error Boundaries

• Error Catching: Error Boundaries תופסים שגיאות במהלך הרינדור, בשיטות מחזור חיים ובבנאים של כל העץ שמתחתם.
• Fallback UI: ממשק המשתמש המוצג כאשר מתרחשת שגיאה. זהו בדרך כלל הודעת שגיאה או מציין מיקום.
• Error Logging: Error Boundaries מאפשרים לך לתעד שגיאות לשירות או לקונסולה למטרות ניפוי באגים.
• Component Tree Isolation: 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) {
    // 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
    console.error(error, errorInfo);
  }

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

    return this.props.children; 
  }
}

export default ErrorBoundary;

בדוגמה זו:

• הרכיב `ErrorBoundary` מגדיר את הפונקציות `getDerivedStateFromError` ואת `componentDidCatch`.
• `getDerivedStateFromError` נקרא כאשר מתרחשת שגיאה ברכיב צאצא. הוא מעדכן את הסטייט כדי לציין שהתרחשה שגיאה.
• `componentDidCatch` נקרא לאחר שתפיסת שגיאה. זה מאפשר לך לתעד את השגיאה לשירות או לקונסולה.
• הפונקציה `render` בודקת את הסטייט `hasError` ומציגה ממשק משתמש חלופי אם התרחשה שגיאה.

שימוש ב-Error Boundaries

כדי להשתמש ברכיב `ErrorBoundary`, פשוט עטוף את הרכיבים שברצונך להגן עליהם בעזרתו:

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

const MyComponent = () => {
  // Simulate an error
  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';

// Simulate fetching data (e.g., from an API)
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // Simulate a successful data fetch
      // resolve({ name: 'John Doe', age: 30 });

      // Simulate an error during data fetching
      reject(new Error('Failed to fetch user data'));

    }, 2000);
  });
};

// Create a resource that Suspense can use
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);

// Component that reads from the resource
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` דוחה עם שגיאה, הרכיב `Suspense` יתפוס את דחיית ההבטחה, והרכיב `ErrorBoundary` יתפוס את השגיאה שנזרקה על ידי Suspense.
• אז הרכיב `ErrorBoundary` יציג את ממשק המשתמש החלופי.
• אם הנתונים נשלפים בהצלחה, הרכיב `Suspense` יציג את הרכיב `UserProfile`.

טכניקות מתקדמות ושיטות עבודה מומלצות

אופטימיזציה של ביצועי Suspense

• השתמש בממויזציה: ממויזציה של רכיבים המעובדים בתוך גבולות Suspense כדי למנוע רינדורים מחדש מיותרים.
• הימנע מעצי Suspense עמוקים: שמור על עץ Suspense רדוד כדי למזער את ההשפעה על ביצועי הרינדור.
• טען מראש נתונים: טען מראש נתונים לפני שהם נחוצים כדי להפחית את הסבירות להשעיה.

Error Boundaries מותאמים אישית

אתה יכול ליצור Error Boundaries מותאמים אישית כדי לטפל בסוגים ספציפיים של שגיאות או כדי לספק הודעות שגיאה אינפורמטיביות יותר. לדוגמה, אתה יכול ליצור Error Boundary שמציג ממשק משתמש חלופי שונה בהתבסס על סוג השגיאה שהתרחשה.

Server-Side Rendering (SSR) עם Suspense

ניתן להשתמש ב-Suspense עם Server-Side Rendering (SSR) כדי לשפר את ביצועי טעינת הדף הראשונית. בעת שימוש ב-SSR, אתה יכול לעבד מראש את המצב הראשוני של היישום שלך בשרת ולאחר מכן להזרים את שאר התוכן ללקוח. Suspense מאפשר לך לטפל בשליפת נתונים אסינכרונית במהלך SSR ולהציג מחווני טעינה בזמן שהנתונים מוזרמים.

טיפול בתרחישי שגיאה שונים

שקול את תרחישי השגיאה השונים הללו וכיצד לטפל בהם:

• Network Errors: טפל בשגיאות רשת בחן על ידי הצגת הודעת שגיאה אינפורמטיבית למשתמש.
• API Errors: טפל בשגיאות API על ידי הצגת הודעת שגיאה ספציפית לשגיאה שהתרחשה.
• Unexpected Errors: טפל בשגיאות בלתי צפויות על ידי תיעוד השגיאה והצגת הודעת שגיאה גנרית למשתמש.

Global Error Handling

יישם מנגנון טיפול בשגיאות גלובלי כדי לתפוס שגיאות שלא נתפסות על ידי Error Boundaries. ניתן לעשות זאת על ידי שימוש במטפל שגיאות גלובלי או על ידי עטיפת כל היישום ב-Error Boundary.

דוגמאות ותרחישי שימוש בעולם האמיתי

אפליקציית מסחר אלקטרוני

באפליקציית מסחר אלקטרוני, ניתן להשתמש ב-Suspense כדי להציג מחווני טעינה בזמן שליפת נתוני מוצר, וניתן להשתמש ב-Error Boundaries כדי לטפל בשגיאות המתרחשות במהלך תהליך התשלום. לדוגמה, דמיין משתמש מיפן שגולש בחנות מקוונת הממוקמת בארצות הברית. ייתכן שיחלף זמן מה עד שתיטענו תמונות המוצר והתיאורים. Suspense יכול להציג אנימציית טעינה פשוטה בזמן שנתונים אלה נשלפים משרת שאולי נמצא בחצי השני של העולם. אם שער התשלום נכשל עקב בעיית רשת זמנית (הנפוצה בתשתיות אינטרנט שונות ברחבי העולם), Error Boundary יכול להציג הודעה ידידותית למשתמש שתבקש מהם לנסות שוב מאוחר יותר.

פלטפורמת מדיה חברתית

בפלטפורמת מדיה חברתית, ניתן להשתמש ב-Suspense כדי להציג מחווני טעינה בזמן שליפת פרופילי משתמשים ופוסטים, וניתן להשתמש ב-Error Boundaries כדי לטפל בשגיאות המתרחשות בעת טעינת תמונות או סרטונים. משתמש הגולש מהודו עשוי לחוות זמני טעינה איטיים יותר עבור מדיה המתארחת בשרתים באירופה. Suspense יכול להציג מציין מיקום עד שהתוכן נטען במלואו. אם נתוני פרופיל של משתמש מסוים פגומים (נדיר אך אפשרי), 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 יהיה תפקיד חשוב יותר ויותר בבניית יישומי אינטרנט מודרניים. על ידי שליטה בתכונות אלה, תוכל להקדים את העקומה ולספק חוויות משתמש יוצאות דופן.