Error Boundary(feat. React)

class ErrorBoundary extends React.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, info) {
    // optional
    // Example "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    // ex) logErrorToMyService(error, info.componentStack);
  }

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

    return this.props.children;
  }
}

import { ErrorBoundary } from './ErrorBoundary';
import { Temp } from './Temp';

export default function App() {
  return (
    <div className="App">
      <ErrorBoundary>
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <Temp />
      </ErrorBoundary>
    </div>
  );
}

import React from 'react';

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

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    console.log('error: ', error);
    console.log('info: ', info);
  }

  render() {
    if (this.state.hasError) {
      return <div>에러입니다!!!</div>;
    }

    return this.props.children;
  }
}

export const Temp = () => {
  throw new Error('고의적인 에러 발생!');

  return <div>Temp Component입니다.</div>;
};

import { useEffect } from 'react';

export const Temp = () => {
  useEffect(() => {
    async function temp() {
      throw new Error('고의적인 에러 발생!');
    }
    temp();
  }, []);
  return <div>Temp Component입니다.</div>;
};

import { useEffect, useState } from 'react';

export const Temp = () => {
  const [isError, setIsError] = useState(false);
  useEffect(() => {
    async function temp() {
      try {
        throw new Error('고의적인 에러 발생!');
      } catch (error) {
        setIsError(true);
      }
    }
    temp();
  }, []);

  if (isError) throw new Error('여기도 고의적인 에러 발생!');
  return <div>Temp Component입니다.</div>;
};

import { useEffect, useState } from 'react';

export const Temp = () => {
  const [isError, setIsError] = useState(false);
  useEffect(() => {
    async function temp() {
      try {
        throw new Error('고의적인 에러 발생!');
      } catch (error) {
        setIsError(true);
      }
    }
    temp();
  }, []);

  if (isError) return <div>에러입니다!!!</div>;

  return <div>Temp Component입니다.</div>;
};

let router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        path: '',
        element: <Outlet />,
        errorElement: <RootErrorBoundary />, // RootErrorBoundary 컴포넌트를 통해 에러를 잡아낸다.
        children: [
          {
            path: 'projects/:projectId',
            element: <Project />,
            errorElement: <ProjectErrorBoundary />, // ProjectErrorBoundary 컴포넌트를 통해 에러를 잡아낸다.
            loader: projectLoader,
          },
        ],
      },
    ],
  },
]);

export default function App() {
  return <RouterProvider router={router} fallbackElement={<Fallback />} />;
}

export function RootErrorBoundary() {
  let error = useRouteError() as Error;
  return (
    <div>
      <h1>Uh oh, something went terribly wrong 😩</h1>
      <pre>{error.message || JSON.stringify(error)}</pre>
      <button onClick={() => (window.location.href = "/")}>
        Click here to reload the app
      </button>
    </div>
  );
}

export function ProjectErrorBoundary() {
  let error = useRouteError();

  // We only care to handle 401's at this level, so if this is not a 401
  // ErrorResponse, re-throw to let the RootErrorBoundary handle it
  if (!isRouteErrorResponse(error) || error.status !== 401) {
    throw error;
  }

  return (
    <>
      <h1>You do not have access to this project</h1>
      <p>
        Please reach out to{' '}
        <a href={`mailto:${error.data.contactEmail}`}>{error.data.contactEmail}</a> to obtain
        access.
      </p>
    </>
  );
}