Add error boundary to FollowersCollection. For #2811

web/components/ui/followers/FollowerCollection/FollowerCollection.tsx

@@ -1,9 +1,11 @@
 import { FC, useEffect, useState } from 'react';
 import { Col, Pagination, Row, Skeleton } from 'antd';
+import { ErrorBoundary } from 'react-error-boundary';
 import { Follower } from '../../../../interfaces/follower';
 import { SingleFollower } from '../SingleFollower/SingleFollower';
 import styles from './FollowerCollection.module.scss';
 import { FollowButton } from '../../../action-buttons/FollowButton';
+import { ComponentError } from '../../ComponentError/ComponentError';
 
 export type FollowerCollectionProps = {
   name: string;
@@ -67,27 +69,38 @@ export const FollowerCollection: FC<FollowerCollectionProps> = ({ name, onFollow
   }
 
   return (
-    <div className={styles.followers} id="followers-collection">
+    <ErrorBoundary
-      <Row wrap gutter={[10, 10]} className={styles.followerRow}>
+      // eslint-disable-next-line react/no-unstable-nested-components
-        {followers.map(follower => (
+      fallbackRender={({ error, resetErrorBoundary }) => (
-          <Col key={follower.link}>
+        <ComponentError
-            <SingleFollower key={follower.link} follower={follower} />
+          componentName="FollowerCollection"
-          </Col>
+          message={error.message}
-        ))}
+          retryFunction={resetErrorBoundary}
-      </Row>
+        />
+      )}
+    >
+      <div className={styles.followers} id="followers-collection">
+        <Row wrap gutter={[10, 10]} className={styles.followerRow}>
+          {followers.map(follower => (
+            <Col key={follower.link}>
+              <SingleFollower key={follower.link} follower={follower} />
+            </Col>
+          ))}
+        </Row>
 
-      <Pagination
+        <Pagination
-        className={styles.pagination}
+          className={styles.pagination}
-        current={page}
+          current={page}
-        pageSize={ITEMS_PER_PAGE}
+          pageSize={ITEMS_PER_PAGE}
-        defaultPageSize={ITEMS_PER_PAGE}
+          defaultPageSize={ITEMS_PER_PAGE}
-        total={total}
+          total={total}
-        showSizeChanger={false}
+          showSizeChanger={false}
-        onChange={p => {
+          onChange={p => {
-          setPage(p);
+            setPage(p);
-        }}
+          }}
-        hideOnSinglePage
+          hideOnSinglePage
-      />
+        />
-    </div>
+      </div>
+    </ErrorBoundary>
   );
 };