프론트엔드의 Web3 에러 핸들링

SUNG JUN LEE·2022년 12월 21일
0

Web3

목록 보기
3/3

우선 이더리움상에서 대표적인 지갑인 메타마스크의 사용이라는 기준으로 작성된 게시글이다.

이더리움과 연결된 프론트엔드 사이드에서 일어날 수 있는 에러종류는 아래와 같다.

  1. JSON-RPC
  2. Provider
  3. EVM

JSON-RPC(EIP-1474)

지갑을 통해서 서비스를 이용한다면 애초에 Provider 및 JSON-RPC가 제대로 제공되어서 일어날 확률이 극히 적은 에러이나 모바일 환경에서는 RPC주소를 직접 넣어주어야 하기 때문에 충분히 발생가능한 부분이다.

EIP-1474
Github EIP-1474
JSON-RPC spectification

연결된 링크를 통하면 에러코드 및 디스크립션을 볼 수 있으니, 에러처리가 별도로 필요하다면 code 넘버를 통해서 처리하면 될것이다.

Provider(EIP-1193)

지갑을 이용할 시 쉽게 제공되며, Provider는 보통 지갑이 설치되어 있다면 자연스럽게 제공된다. 주로 지갑 설치 유무를 이 Provider 체크를 통해서 한다.

지갑을 통해서 에러가 발생했을시 Provider 관련 문서의 에러코드를 통해서 에러핸들링을 하면 된다.

대표적인 에러 발생 상황은 유저가 TX 날리는 것을 거부했을때, 4001을 뱉는다.

EIP-1193
MetaMask Docs

EVM

컨트랙트나 이더리움 상에서 발생하는 에러이다. 이 에러의 객체는 에러코드를 가지고 있지 않기 때문에 에러가 발생하지 않기 위해 컴포넌트 단에서 막아주는편이 우선 적이다. 화면단에서 실수로 인하여 발생되었다면, 에러상황을 알려주는 대표적인 문자열로 처리해주어야 될거로 생각된다.

대표적으로 NFT 구입 시 이미 판매가 종료되거나 이미 판매된 NFT 구입시 볼 수 있다.



참고사항

  • 위 3가지 대표적인 에러종류로 나뉘고, 지갑을 통한다면 JSON-RPC 와 Provider 에러는 지갑을 통해서 뱉어주지만 JS 내부 Error 객체에 속하지 않기 때문에 별도로 에러객체를 만들어 구분해주어야 할 거 같다.
    + 2023.08.28 기준 Error 객체에 속한다. 허나 react-query 기준 onError 함수로 오지않고 onSettled 에서 처리해주어야 하는 문제가 있다.

  • EVM에서 발생한 에러는 Error 객체에 속하기 때문에 구분이 쉽지만, 상세한 에러메시지를 제공해주기 위해서는 어떠한 기준이 따로 필요할 거 같다.

  • 모바일의 경우 딥링크를 통한 지갑 어플을 직접 부르지 않고 진행하는 경우가 있기 때문에 그때는 JSON-RPC 및 Provider 에러를 꼼꼼하게 체크하고 핸들링이 필요할 거 같다.

profile
FE developer

0개의 댓글