MSW Server seems to prevent Axios timeout errors even when not started

[thomasmery]

Environment

Name	Version
msw	0.19.5
node	14.1
OS	Mac OS X 10.15.2

i'm using the setup @kettanaito proposes for a NextJs app : vercel/next.js#13731

I have setup a timeout for my API requests with Axios
I have de-activated the API to see the request fail after the timeout

export const api = axios.create({
  baseURL: config.apiBaseUrl,
  headers: {
    'Content-Type': 'application/json',
  },
  timeout: 1000,
});

and I am preventing the msw server to start by commenting out this line in next.config.js

//server.listen();

Current behavior

I can't access the page I am requesting as the browser hangs

Expected behavior

As happens when I don't use msw or when I also comment out the setupServer in mocks/server.js

// setupServer(...handlers)

I expect the request to timeout and my error handling flow to be triggered

I would expect that not starting the server would suffice to revert to a non-mocked behaviour

thanks for your help

[kettanaito]

Hey, @thomasmery.

The server instance created is responsible for requests resolution on the server-side of Next (i.e. in the getServerSideProps hook). There is a separate instance called worker created in the browser environment that may cause the issue you are experiencing.

Commenting out server.listen() only disables the server-side requests interception. Since in your case the browser hangs, you may be looking at the wrong place. Consider these two parts of mocking in NextJS:

• pages/_app.js, try looking here and commenting out worker.start(), if necessary.
• mocks/server.js

I'm not sure I understand your intention in terms of Axios timeout. Do I understand it correctly that you want:

1. Set a custom Axios timeout.
2. Make a request reach that timeout.
3. Produce a timeout error.

Which of the last 2 do you wish to cover in your request handlers? Perhaps, attach your request handlers so it's more evident what you are trying to do. Thanks.

[thomasmery]

thanks,

I'll try and be more precise

all I want to do is to revert to a normal behaviour if I'm not starting the msw server

in this case it is producing a timeout error when neither my local api server nor the msw server are started

as for the browser side of msw (the worker) it is not started either when I experience the behaviour I'm talking about (I also checked by commenting it out

and also if I do comment out the setupServer(...handlers) line

then the behaviour is what I expect i.e. letting the try catch block in my getServerSideProps function catch the AxiosError

export const getServerSideProps: GetServerSideProps<Props> = async () => {
  try {
    const response = await getAllBacklinks();
    const allBacklinks = response.data;
    return {
      props: {
        allBacklinks,
      },
    };
  } catch (serverError) {
    return {
      props: {
        serverError: formatAxiosError(serverError),
      },
    };
  }
};

[thomasmery]

also, maybe to clarify,

if I start the app with mocking enabled and try to access a Next Page where the getServerSideProps makes an api call to an endpoint that I have not added to the handlers the app hangs in the same manner

could I expect the timeout to be triggered?

maybe it is very Axios oriented but I fail to understand what could cause this

[marcosvega91]

I think I have found the problem. I'm submitting a PR on node-request-interceptor 😄

[kettanaito]

The fix has been published in [email protected]. Re-installing the msw package should pull in the latest version of that dependency. Verify by:

$ npm ls node-request-interceptor

[email protected]
└── [email protected]