feat [GSW-912] create a general error-boundary component for handling…

… errors for async loaded components

packages/web/src/components/common/error-boundary/ErrorBoundary.tsx

@@ -0,0 +1,39 @@
+import { Component, ErrorInfo, ReactNode } from "react";
+import { NextRouter, withRouter } from "next/router";
+
+interface ErrorBoundaryProps {
+  router: NextRouter;
+
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+}
+
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    this.setState({ hasError: true });
+
+    console.error("Error caught by ErrorBoundary:", error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) return this.props.fallback;
+
+      this.props.router.push("/500");
+      return;
+    }
+
+    return this.props.children;
+  }
+}
+
+export default withRouter(ErrorBoundary);

packages/web/src/layouts/leaderboard-list-layout/LeaderboardListLayout.tsx

@@ -4,6 +4,7 @@ import LeaderboardListHeaderContainer from "@containers/leaderboard-list-header-
 import { Suspense } from "react";
 import LeaderboardTableContainer from "@containers/leaderboard-table-container/LeaderboardTableContainer";
 import LeaderboardTableSkeletonContainer from "@containers/leaderboard-table-skeleton-container/LeaderboardTableSkeletonContainer";
+import ErrorBoundary from "@components/common/error-boundary/ErrorBoundary";
 
 export const TABLE_HEAD = {
   INDEX: "Rank",
@@ -27,9 +28,11 @@ export default function LeaderboardListLayout() {
     <Wrapper>
       <LeaderboardListHeaderContainer />
 
-      <Suspense fallback={<LeaderboardTableSkeletonContainer />}>
-        <LeaderboardTableContainer />
-      </Suspense>
+      <ErrorBoundary>
+        <Suspense fallback={<LeaderboardTableSkeletonContainer />}>
+          <LeaderboardTableContainer />
+        </Suspense>
+      </ErrorBoundary>
     </Wrapper>
   );
 }