feat: (#158) ErrorBoundary 구현

frontend/src/components/post/PostListPage/index.tsx

@@ -4,6 +4,8 @@ import { AuthContext } from '@hooks/context/auth';
 import { useCategoryList } from '@hooks/query/category/useCategoryList';
 import { useDrawer } from '@hooks/useDrawer';
 
+import ErrorBoundary from '@pages/ErrorBoundary';
+
 import AddButton from '@components/common/AddButton';
 import Dashboard from '@components/common/Dashboard';
 import Drawer from '@components/common/Drawer';
@@ -40,9 +42,11 @@ export default function PostListPage() {
  />
  </Drawer>
  </S.DrawerWrapper>
- <Suspense fallback={<Skeleton />}>
- <PostList />
- </Suspense>
+ <ErrorBoundary fallback={<div>에러발생</div>}>
+ <Suspense fallback={<Skeleton />}>
+ <PostList />
+ </Suspense>
+ </ErrorBoundary>
  <S.ButtonContainer>
  <UpButton onClick={scrollToTop} />
  <S.AddButtonWrapper to={PATH.POST_WRITE}>

frontend/src/pages/ErrorBoundary.tsx

@@ -0,0 +1,39 @@
+import { Component, ErrorInfo, ReactNode } from 'react';
+
+interface ErrorBoundaryProps {
+ children: ReactNode;
+ fallback: ReactNode;
+}
+
+interface ErrorBoundaryState {
+ hasError: boolean;
+}
+
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+ #errorMessage = '';
+
+ constructor(props: ErrorBoundaryProps) {
+ super(props);
+ this.state = { hasError: false };
+ }
+
+ static getDerivedStateFromError(error: Error) {
+ return { hasError: true };
+ }
+
+ componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+ // You can also log the error to an error reporting service
+ window.console.log(error, errorInfo);
+ this.#errorMessage = error.message;
+ }
+
+ render() {
+ if (this.state.hasError) {
+ return <div>{this.#errorMessage}</div>;
+ }
+
+ return this.props.children;
+ }
+}
+
+export default ErrorBoundary;