[MSW] Warning: intercepted a request without a matching request handler: 경고 해결

 

msw를 쓰는데 자꾸  Warning: intercepted a request without a matching request handler: 이런 경고가 떴다.

MSW가 요청을 채가서 뜨는것 같은데 오류가 너무 많아서 개발하는데 불편함이 있었다..

 

MSW 공식문서에 해당 오류를 복사하니 바로 위에 해결책이 있었다.

 

 

import { delay, http } from 'msw'
import { adminHandlers } from './admin'
import { authHandlers } from './auth/index'

// 여러 handler를 한 곳에 묶어서 return
export const handlers = [
  // 처음에 구글, cdn등의 경고가 뜨는걸 막기위해 해당 응답들에대한 지연추가
  http.all('*', async () => {
    await delay(100)
  }),
  ...authHandlers,
  ...adminHandlers,
]

안내대로 지연요청을 추가했더니 오류가 사라지고 클린한 콘솔창을 갖게되었다.

 

 

 

GPT한테 물어본 이유

1. 경고가 발생하지 않는 이유

MSW는 Mock Service Worker로, 개발 중에 API 요청을 가로채고 가짜 응답을 제공하여 테스트하거나 개발할 수 있게 해줍니다. 

MSW는 요청을 가로채고 처리할 핸들러를 설정하는 방식으로 동작합니다. 

핸들러는 특정 URL 패턴 또는 메소드(GET, POST 등)에 대한 요청을 처리하는 함수입니다. 

경고가 발생하는 이유 요청 핸들러의 부재: MSW가 요청을 가로챘을 때, 해당 요청에 대한 핸들러가 등록되어 있지 않으면 경고가 발생합니다. 

 

즉, MSW는 요청을 가로채면서 핸들러가 있는지 확인하고, 없으면 경고를 표시합니다. 

 

2.지연 추가로 경고가 사라지는 이유

http.all('*') 핸들러에 지연을 추가하면 모든 요청에 대해 기본적으로 지연이 발생합니다.

이 경우 MSW는 모든 요청에 대해 기다려야 하는 상황이 생기므로, 경고를 발생시키지 않습니다.

이는 사실상 MSW가 모든 요청에 대해 일종의 "기본 처리 방침"을 가지고 있다고 볼 수 있습니다.

경고가 왜 안 뜨는지 원리 기본 처리 방침: http.all('*')와 같은 핸들러는 모든 요청에 대해 적용되는 일종의 기본 처리 방침을 설정하는 것입니다.

MSW는 요청을 가로채고 나서 핸들러를 찾지 못했을 때 경고를 발생시키지만, 이 경우 모든 요청에 대해 처리가 지연되므로 경고가 발생하지 않습니다.

 

3. 우선순위

MSW에서는 등록된 핸들러의 우선순위가 중요합니다.

먼저 등록된 핸들러가 먼저 처리되며, http.all('*')와 같이 모든 요청을 처리하는 핸들러가 먼저 실행됩니다.

이후에 특정 URL 패턴에 대한 핸들러가 있으면 그것이 우선적으로 처리됩니다.

따라서 지연을 추가한 경우 MSW는 모든 요청에 대해 기다리는 시간을 가지게 되어 경고가 발생하지 않습니다.

이는 MSW의 작동 원리와 핸들러 등록의 순서, 그리고 기본 처리 방침을 이해하는 데 중요한 점입니다.

---

지피티한테도 물어보고 문서도 읽어보고 내린 결과는 해당 요청들은 MSW핸들러에 없던 요청들이었는데 위 코드를 추가함으로 인해 모든요청에 대해 지연이 추가됨으로써 경고가 사라진게 아닐까 추측해본다 ㅇ_ㅇ..

 

 

 

참고

- https://mswjs.io/docs/recipes/global-response-delay/