msw 404 Not Found (from service worker) 오류

문제상황

msw를 업그레이드 했다 (프로젝트 내부에서 기존 msw 1.xx 버전을 2.31로 업그레이드함)
Migration guideline 에 따라 코드 migration을 했는데 개발 환경에서 실행하는 msw의 모킹API의 응답이 자꾸 404 (Not Found)가 떨어졌다. 그래서 페이지가 아예 안뜨는 문제가 있었다.

 

 디버깅

페이지가 렌더링되면서 api를 호출하지 않고 사용자 이벤트를 받아야지만 api가 호출되는 페이지들은 정상적으로 msw의 mocking 응답을 잘 주었다.
문제는 페이지를 띄우면서 바로 api를 호출하는 페이지에서만 해당 404 에러가 발생했다.

https://mswjs.io/docs/getting-started#step-2-describe

Getting started

위의 공식문서대로 install도 잘 되어있고, 핸들러도 잘 작성했다.
 
mocks>handlers>index.ts

async function initMocks() {
  const { worker } = await import('./browser');
  worker.start();
}

export default initMocks;

 

브라우저 환경에서 네트워크 요청을 가로챌 수 있게 설정

src>main.tsx

if (import.meta.env.MODE === 'development') {
  await initMocks();
}

createRoot(document.getElementById('root') as Element).render(
  <React.StrictMode>
      <App />
  </React.StrictMode>,

 

개발모드에서만 활성화되도록 서비스워커를 호출

 

 

위 상태로 다른 부분에 대한 디버깅을 거의 며칠동안? 했는데 .. 해결되는게 없었다.

console에 [MSW] mocking enabled이 가장 먼저 찍히는걸 봐서는 워커 실행이 가장 먼저 잘 되는데 왜 모킹 api 요청에서 계속 에러가 나는 것인지... 

 

해결

답은 공식문서에 있었다.

https://mswjs.io/docs/integrations/browser#conditionally-enable-mocking

Browser integration

 

서비스워커를 호출하기 위해 쓰는 `worker.start()` 코드는 서비스워커가 요청을 가로챌 준비가 완료되면 프라미스를 반환한다. 

따라서 앱의 렌더링이 일어나기 전까지 `worker.start()`의 프라미스를 await로 프라미스가 처리 완료될때까지 기다리도록 한다. 다시말해 등록한 프라미스가 리졸브될때까지 앱의 렌더링을 지연시키는 거다. 

왜냐면 서비스워커를 등록하는 로직은 비동기라서 await로 프라미스를 리졸빙하는걸 실패하게되면, 서비스워커의 등록과 앱에서 초기에 api를 요청하는 로직이 race condition 경쟁 상태로 동시에 일어날 수도 있기 때문이다. 

 

결국 위의 기존 코드는 서비스워커를 등록한 코드와 앱의 실행이 동시에 일어나면서났던 문제로 파악되었다.

아래와 같이 서비스 워커를 호출하도록 짜놓은 함수 내부에 worker.start() 코드 자체에 await 키워드를 넣어주니 어이없게도 바로 문제가 해결되었다. 

 

async function initMocks() {
  const { worker } = await import('./browser');
  await worker.start(); //<--- await 추가
}

export default initMocks;

 

Additional Ref 

https://www.techtarget.com/searchstorage/definition/race-condition