[트러블슈팅] MSW unhandled request 에러 해결

문제 상황

MSW에서 다음과 같은 에러를 주었다.

하지만 MSW handler에 분명히 해당 endpoint와 method를 구현해주었는데, 왜 이렇게 나오는지 원인을 찾지 못했다.

console.error
      [MSW] Error: intercepted a request without a matching request handler:
      
        • POST /templates
      
      If you still wish to intercept this unhandled request, please create a request handler for it.
      Read more: https://mswjs.io/docs/getting-started/mocks

 

원인 파악

우선 원인을 파악해보고자 했다.

handler는 있지만 정확히 들어가지 않는다는 것은 URL이 제대로 들어가는지부터 확인을 하고 싶었다.

 

MSW 공식문서에서 MSW server를 listen해줄 때 `onUnhandledRequest`라는 옵션을 찾았다. 이는 처리되지 않은 request에 대해 warn, error, bypass 옵션으로 줄 수 있다.

이 중, 인자로 request를 받을 수 있고, unhandled된 request를 console에 찍어볼 수 있음을 확인했다.

server.listen({
  onUnhandledRequest(request) {
    console.log('Unhandled %s %s', request.method, request.url)
  },
})

 

아래와 같이 찍어보니 해당 URL이 확실히 unhandled 되고 있음을 파악했다. 

 

하지만 뭔가 이상함을 느꼈다. 우리는 process.env에서 백엔드로 가는 URL을 넣어주는데 해당 값이 보이질 않았다.

또 다른 곳에서는 http://localhost/undefined/templates 로 보내는 요청이 있는 것 아니겠는가?

 

해결방안

이번에 fetch단을 리팩토링하면서 다음과 같은 코드를 썼다.

const API_URL = process.env.REACT_APP_API_URL ?? '';

// 이후 API_URL/{endpoint} 식으로 요청을 보냄

 

리팩토링 이전 코드는 다음과 같았다

const API_URL = process.env.REACT_APP_API_URL;

// 이후 API_URL/{endpoint} 식으로 요청을 보냄

 

MSW의 요청이 언제는 `http://localhost/undefined/templates`로 가고, 언제는 `http://localhost/templates`로 가는 것이 이 차이였다.

따라서 API_URL이 null일때는 빈 문자열을 넣도록 해주었더니 트러블슈팅을 할 수 있었다.

 

이 에러는 github actions에서 CI로 테스트할 때 발생한 문제였다.

로컬에서 테스트를 돌릴 때는 env가 있어서 문제가 없었던 것 같다.

 

따라서 근본적으로 이 에러를 해결하기 위해선 CI 스크립트에서 env를 생성하여 `API_URL`이 undefined가 되는 일이 없도록 하는 방법이 있을 것 같다.