Simulate fake 404,500 Status Code to check frontend app behaviour

Question

I want to simulate a fake 404 status code from the backend to see how my website will behave.

I don't want to mock fake response status in the code I would like to use some tools.

Cause sometimes I want to test it on the production which has version x and I don't want to waste time downloading this code and checking if there it is working.

Just simply mock response header status code for some test value like 404 for the fast check.

I tried to use software like Requestly - chrome extension.

And configured it like :

Modify response for header status put value 404 for google.com site.

But when I open google.com site I got status 200:

Do you know how can I change the status code of the given request? Maybe by using different soft?

Ivyiwis

Answer 1

Status is not an HTTP response header. Status Code is an HTTP response code and Chrome does not allow to modify the response code of a request. There are two possible ways to solve this using Requestly

1-Step solution using Requestly Desktop App (Reliable & Guaranteed to work)

You can use any MITM proxy to intercept the request and simulate the status code. However, given my experience with Requestly, I'd explain how you can do it with Requestly Desktop App

1. Install Requestly Desktop App,
2. Go to Rules Tab and Click on New Rule
3. Select Modify Response
4. Define the exact URL (or Pattern) and define the status code. That's it.

Screenshot

Demo

https://www.youtube.com/watch?v=nLcIZGmMAtQ&ab_channel=Requestly

Using Requestly Browser Extension (2-Step Process, Should Work in most sites but there could be some CORS Issues)

1. Install Requestly
2. Use Requestly Mock Server and create a new mock which serves 400 or 404
3. Use Requestly to set up a Redirect Rule which redirects your original request to the URL of your mock request

Here are a couple of examples using the extension

1. Simulate 500 in Twitter Create Tweet API
2. Simulate 404 in BlinkIt Search API

Footer Notes

Desktop App-based solution is more reliable and guaranteed to work while Extension-based solution has technical limitations and there may be some CORS Issues depending upon your backend So prefer to use Solution 1.

PS - I built Requestly (& still building it with lots of heart)

Phrygia

Thanks a lot that is it ! – Ivyiwis

Or no. Unfortunatelly chrome doesn't go to the redirected site instead of the previous one but uses 2 requestes. First one and second request headers gives "Provisional headers are shown" in chrome dev tools. – Ivyiwis

@PatrykJanik It's difficult to get without an example. Could you reach out to [email protected] and give us an example of rule you setup and the website you are testing. I would look into it more then. – Phrygia

@T8y This worked. Thanks!! As mentioned in Requestly docs i added a slash(/) at end of the request url while using equal operator but seems it wasn't required in my case and matching worked without slash and did not work with this slash. – Heliochrome

Added 1-Step solution using the desktop app along with Screenshot & Demo. – Phrygia

Requestly now allows to override Status Code in browser extension if it is an API request triggered via XMLHttpRequest or fetch method. cc: @PatrykJanik – Chuch

Answer 2

Try using ModResponse: https://chrome.google.com/webstore/detail/modresponse/bbjcdpjihbfmkgikdkplcalfebgcjjpm. You can add "Replay response" on the URL that you want to replay, visit that URL, then open up ModResponse again to edit the HTTP status code. You can also use it to edit the HTTP response body and header as well.

Vanettavang