Returning 401 or 403 to browser

Question

We are modifying code that displays in response to a Server sending either a 401 or a 403 error.

export const handleStatusCodeMessage = (errorStatusCode, verbiageConfig, errorStatusMessage) => {
    let {errorType, errorMessage} = '';
    switch (errorStatusCode) {
        case '401':
            if (isMember()) {
                errorType = GENERAL_ERROR.ERROR_TYPE;
                errorMessage = GENERAL_ERROR.ERROR_MESSAGE + getVerbiageTrailMessage(verbiageConfig);
            } else {
                errorType = UNAUTHORIZED.ERROR_TYPE;
                errorMessage = UNAUTHORIZED.ERROR_MESSAGE;
            }
            break;
        case '403':
            if (isMember()) {
                errorType = GENERAL_ERROR.ERROR_TYPE;
                errorMessage = GENERAL_ERROR.ERROR_MESSAGE + getVerbiageTrailMessage(verbiageConfig);
            } else {
                errorType = UNAUTHORIZED.ERROR_TYPE;
                errorMessage = UNAUTHORIZED.ERROR_MESSAGE;
            }
            break;
        case 'etc': // other cases
    }
    return {errorType, errorMessage};
};

These are different cases, and part of the acceptance criteria for our banking industry is that we show screenshots of the page in the browser before and after the code changes, so that management can easily tell what the impact was.

How do I catch the return stream in Chrome, modify the server response on my local machine, and return a 401 or a 403 to my browser so we can get screenshots of it in the browser?

We have to check both: 401 and 403.

The closest similar question I was able to find was here:

How to generate sample 401, 403 http responses?

But the answer there was just a link, and the link is no longer valid. :(

Answer 1

Not specific to Chrome but you could use a service worker to mock the response.

MSW registers a Service Worker that listens to all request via the fetch event, then re-directs them to the MSW library.

You can then send out your custom mocked responses to the Service Worker: e.g,. a 401 or 403 response (a basic example from the docs is shown below)

import { setupWorker, rest } from 'msw'

const worker = setupWorker(
  rest.get('https://example.com/test', (req, res, ctx) => {
    return res(
      ctx.status(401, 'Mocked status'),
      ctx.json({
        message: 'Mocked response JSON body',
      }),
    )
  }),
)

worker.start()

The library uses quite a nice declaritive API. Meaning it should be easy to build upon if your test cases expand in the future.

What's nice is that the above will also show in your Chrome dev tools and you don't have to mutate your axios or fetch requests within your app.