[Feat] 에러바운더리 이용하여 에러 선언적으로 처리하기

[yonghyeun]

목적- 추가하고자 하는 기능을 설명해주세요ㅈ

현재 발생 가능한 에러

1. chrome.storage.sync 의 용량을 넘어서는 레퍼런스를 저장하는 경우
2. chrome.storage.sync 의 분당 쓰기 시간을 초과하여 조작하는 경우
3. velog.io/write 페이지에 접근하였으나 콘텐트 스크립트가 삽입되지 않은 경우

현재 3번 에러 같은 경우에는 다음과 같이 조건부 렌더링을 통해 에러를 처리하고 있습니다.

import { useChromeStorage, useTab } from "@/shared/store";
import {
  AutoConvertingToggle,
  AttachedReferenceList,
} from "@/features/reference/ui";
import { ContentScriptErrorButton } from "@/features/utils/ui";

export const AttachedReferenceContainer = () => {
  ...
  const isError =
    tab?.url.includes("https://velog.io/write") && !isContentScriptEnabled;

  return (
    <section
      className={`h-1/2 flex flex-col gap-2 ${
        isUnAttachedReferenceVisible ? "" : "flex-grow"
      }`}
    >
     ...
  {isError && <ContentScriptErrorButton tab={tab} />}
    </section>
  );
};

모든 에러 처리를 조건부 렌더링으로 하는 것 보다 에러 바운더리를 통한 선언적으로 에러를 처리하도록 합니다.

에러 페이지의 일관성을 위해서라도 필요 할 거라 생각듭니다.

• UnExpectedErrorBoundary
  

Given-When-Then 유저 시나리오

• 에러 처리하지 못한 런타임 에러
• chrome.storage.sync 의 용량을 넘어서는 레퍼런스를 저장하는 경우
• chrome.storage.sync 의 분당 쓰기 시간을 초과하여 조작하는 경우
• velog.io/write 페이지에 접근하였으나 콘텐트 스크립트가 삽입되지 않은 경우

레퍼런스 이슈 (Optional)