Hi~
메타마스크 로그인 기능을 구현하면서 겪었던 에러 중 하나를 공유합니다.
비슷한 에러로 해결책을 찾으시는 분들은 참고하시면 좋겠습니다.
실무에서 메타마스크 지갑으로 소셜로그인을 할 수 있도록 기능을 개발했는데, 간헐적으로 이런 에러가 발생하는 문제가 있었습니다.
이런 에러가 주로 발생하는 상황은 크게 2가지 였습니다.
Metamask github issue에서 관련된 이슈를 찾을 수 있었습니다.
참고: Github issue: MetaMask/metamask-extension - Already processing eth_requestAccounts
Describe the bug
When I close the unlock wallet popup while requesting eth accounts, I'm not getting any result. And when I request eth accounts again, I'm getting the following error
MetaMask - RPC Error: Already processing eth_requestAccounts. Please wait.
Steps to reproduce (REQUIRED)
window.web3 = new Web3(window.ethereum) const account = await window.ethereum.request({ method: 'eth_requestAccounts', })
- Have wallet locked
- Trigger request
- Close unlock popup
- Trigger request again
요약하자면 리포트된 버그는 다음과 같습니다.
지갑 잠금상태
⇒ 요청
⇒ 잠금해제 팝업 닫음
⇒ 다시 요청했을 경우 열려있는 팝업이 없더라도 해당 에러가 발생하며 아무런 액션이 없음
그리고 이에 대한 메타마스크 측 답변은 이 정도로 요약할 수 있을 것 같습니다.
리포트한 이슈에 대한 답변:
- 첫 연결 요청이 리턴한 프로미스가 pending상태인 것이 원인
- 익스텐션이 잠금해제되어 있을 때 반복된 요청 또한 해당 에러를 발생시킴
그래서 어떻게 할 것인가:
- 익스텐션이 잠겨있다는 것을 설명하는 에러를 별도로 리턴하는 것 또한 좋은 의견이라고 생각
- 혹은 팝업이 닫혀있다면 연결 요청에 의해 재 트리거되도록 만드는 것도 좋을 듯함
- 승인에 대한 시간 제한에 대해 소개하는 것을 고려중
(해당 시간 제한 이후에는 자동으로 요청이 거절되도록)
메타마스크 측에서도 이 이슈를 해결하기 위한 여러가지 방법을 고려 중이고, 아직까지 명확히 해결하지는 못한 상태였습니다.
그 외에 당장 시도해볼 수 있는 방법을 여러 개발자가 제안해두긴 했는데, 제 경우 시도해보아도 명확한 해결책이 되는 방법은 없었습니다.
어쩌라는 걸까요!!
프로덕트에서는 작동에 문제가 생기면 안되는데 말입니다~~!
사실 메타마스크 공식문서상에서는 이런 이슈 발생을 방지하기 위한 가이드를 이미 제공하고 있었긴 합니다.
메타마스크 공식문서: Access a user's accounts
You should only attempt to request the user's account in response to user
interaction, such as selecting a button.
If you fail to retrieve the user's account, you should encourage the user
to initiate the attempt.
While awaiting the call to eth_requestAccounts, you should disable
any buttons the user can select to initiate the request.
MetaMask rejects any additional requests while the first is still
pending.
메타마스크는 eth_requestAccounts메서드의 비동기 요청이 완료되기 전에 추가적인 요청이 반복되면 이 요청들을 reject합니다.
따라서 요청이 완료되기 전까지 해당 버튼을 disabled 시키도록 안내하고 있습니다.
이 가이드를 고려해 ux를 보완한다면 해당 이슈로 인해 사용자가 불편을 겪지 않도록 로그인 로직을 개선할 수 있습니다.
예를 들어, Premint라는 서비스에서는 이렇게 해결했습니다.
따라서 해당 익스텐션이 잠금되었을 경우 잠금해제를 하도록 유도할 수 있고, 익스텐션 팝업창이 다른 창들 아래로 사라져 숨겨졌을 경우에도 유저가 이 창을 찾아 요청을 완료하도록 할 수 있습니다.
저 또한 해당 레퍼런스와 이슈를 내부적으로 공유해 유사한 방식으로 ux를 보완해 해당 이슈를 해결했습니다.
유익한 글이었습니다.