Ways to simulate error responses on request in browser?

Question

I'd like to exercise my JavaScript error handling code with actual error responses when making HTTP requests to a server backend. Therefore, I'm looking for a simple way to simulate a response, with a given status codes, headers, response body, etc.

With msw package, I can setup a service worker which catches requests and generates responses:

import { rest } from "msw";

const BASE_PATH = "https://localhost:3000";

export const handlers = [
  rest.get(`${BASE_PATH}/hello`, (req, res, ctx) => {
    return res(ctx.status(200), ctx.json({ data: "Hello!" }));
  }),
  rest.get(`${BASE_PATH}/error`, (req, res, ctx) => {
    return res(ctx.status(400), ctx.json({ message: "Bad request" }));
  })
}

However, that requires some code to wire up. It would be nicer to have something in Chrome Dev Tools that allow me to modify responses, similar to how I can block requests to some routes.

What is the easiest way of simulating the response of an HTTP request in the browser?

Are you looking to simulate HTTP response codes (i.e. 400, 403, 404 etc.)? Or are you looking to simulate the actual body of the response? — codemonkey, Dec 16 '20 at 16:51
@codemonkey Both. Status codes, headers, response body, etc. — maxpaj, Dec 16 '20 at 16:52
This site will let you test specific HTTP response codes: https://httpstat.us/ — codemonkey, Dec 16 '20 at 16:53
@codemonkey Nice! You should add that as an answer. Please add any limitations to that approach. What happens when I change my BASE_PATH from my server (probably hosted on localhost) to another domain? — maxpaj, Dec 16 '20 at 17:01
I just released an online service for developers to do almost all of what you want and a lot more. The only part I didn't add was the ability to let you set the response code, although that was planned. I will probably add it this tomorrow seeing that you're not the only one needing it. The service lets you create APIs and generate simple to complex responses without any coding. https://wirespec.dev — Johann, Dec 16 '20 at 17:13
Does this answer your question? [Simulate fake 404,500 Status Code to check frontend app behaviour](https://stackoverflow.com/questions/50923170/simulate-fake-404-500-status-code-to-check-frontend-app-behaviour) — Sahil Gupta, Jan 19 '22 at 09:29

score 6 · Answer 1 · answered Dec 17 '20 at 00:12

Well, I guess nobody appears to have any suggestions worthy of being an answer so I will give a try fully realizing that this will NOT fully answer your question.

When I have the need for an API that can return various obscure HTTP codes for testing purposes, I use this site: https://httpstat.us/. It's as easy as appending the desired code and making the call (https://httpstat.us/400, https://httpstat.us/404, https://httpstat.us/200 etc.)

Obviously, it cannot do everything you require "Status codes, headers, response body, etc.", but it will sure give the ability to test various HTTP response codes.

score 1 · Accepted Answer · answered Dec 15 '22 at 00:49

1

Was looking for the same thing and found this Chrome extension called Tweak which offers exactly this, it allows you to mock requests without needing to write code, you can mock responses including the status code, payload, and headers.

answered Dec 15 '22 at 00:49

Mohammed Farah

36
1
4

score 0 · Answer 3 · answered Dec 06 '22 at 14:31

I find using page URL query paramaters a really good way of simulating error states:

export const handlers = [
  rest.get(`/your/api/endpoint`, (req, res, ctx) => {

    // Check if the '?error=true' query param has been included in the page url.
    const pageParams = new URLSearchParams(window.location.search);
    const isError = pageParams.get('error') === 'true';

    // Example: http://localhost:3000/your_page_url?error=true
    if (isError) {
      // Query param was found, so return an error response.
      return res(
        ctx.status(404),
        ctx.json({ message: 'Oops! Something went terribly wrong.' })
      );
    }

    // Otherwise - return a 200 OK response.
    return res(ctx.status(200), ctx.json({ data: 'Some cool data' }));
  })
];

Have a look at this article (which I wrote) if you want to get into more detail.

Ways to simulate error responses on request in browser?

3 Answers3