Use Cases

# Adding Delay to Network Requests

\#APITesting #SimulateLatency #WebAppTesting #SlowNetwork #DevTools

As a frontend developer or QA, Testing certain parts of web applications require you to simulate delay in one or more components of the web app.

Here are some scenarios where you would like to delay the network requests.

- Test performance of your web app on a slower condition
- Test behaviour of your app when one or more APIs respond slow (API Latency has gone up)
- Check if any race conditions exist when some resource X gets loaded after/before another resource Y.
- Test the impact of slow loading of external resources impact on your app.
- Test your loading experience in the app.

It is important for a developer to test the website performance in poor network conditions. This article focuses on the different methods which could enable developers to simulate network conditions.

## Approach 1: Network throttling feature of DevTools. Available in Chrome, Firefox and Edge.

The network tab in DevTools provides an option to throttle network requests. With this you can experience the same network conditions what one might face when using slow 3G, 2G connections or offline.

### Steps to use the throttler:

- Open DevTools (Ctrl + Shift + I)
- Switch to the Network Tab.
- By default, the throttler is set to ‘No Throttle’.
- From the dropdown menu, you can select the type of network to simulate.
- Long Press the reload icon while the DevTools panel is open.

![Long press the reload icon to see advanced reload options](/assets/blog-images/networkTab.png)
Long press the reload icon to see advanced reload options

_Source: https://css-tricks.com/throttling-the-network/_

- Select ‘Empty Cache and Hard Reload’ from the advanced reload options.

> It is important to empty cache to examine the page as a first time visitor.

### Limitations

- It throttles the entire network. It is not possible to delay a particular network request.
- It might not be helpful in cases where you want to selectively delay network requests.

For more information, refer the documentation: <a href="https://developer.chrome.com/docs/devtools/network/reference/">Docs</a>

## Approach 2: Server Side Delay - Using public APIs to add delay in requests

APIs like [deelay.me](https://deelay.me/) and [https://app.requestly.io/delay](https://app.requestly.io/delay) allow selectively delaying a network request. This kind of delay does not impact the browser.

### How to use the API:

Change the link to be delayed as:

 https://app.requestly.io/delay/<delay_in_millisecods>/<URL_to_be_delayed>

For example - Suppose you want to delay
[https://code.jquery.com/jquery-3.6.0.slim.js](https://code.jquery.com/jquery-3.6.0.slim.js)
by 4000 ms and see the impact on your app as your libraries heavily depend on jQuery. This url has to be changed to :

<pre>https://app.requestly.io/delay/4000/https://code.jquery.com/jquery-3.6.0.slim.js</pre>

or

<pre>https://deelay.me/4000/https://code.jquery.com/jquery-3.6.0.slim.js</pre>

You can configure a Redirect Rule in Requestly to redirect jQuery CDN URL [https://code.jquery.com/jquery-3.6.0.slim.js](https://code.jquery.com/jquery-3.6.0.slim.js) to above mentioned URL like

<pre>https://app.requestly.io/delay/4000/https://code.jquery.com/jquery-3.6.0.slim.js</pre>

### Limitations

- As the requests are redirected to public APIs, it cannot be applied on XHR requests as [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) policy would block the redirected resources.

## Method 3: ClientSide Delay - Using Requestly browser extension (Chrome, Firefox, Edge, Opera, Brave)

Using [Requestly](https://requestly.io/), you can Modify Headers, Redirect URLs, Switch hosts, Mock API response, Delay network requests, Insert custom scripts and much more.

Requestly delay rule works primarily on client side. This is how you can create a Delay Request Rule.

![Selecting Delay Rule in Requestly](/assets/blog-images/delayRuleSelector.png)Selecting Delay Rule in Requestly

![Configuring Delay Rule in Requestly](/assets/blog-images/delayRuleBuilder.png)Configuring Delay Rule in Requestly

- It supports delaying multiple requests which contain a certain keyword or match against the regex.
- It also works with AJAX requests.

You can also combine this with other rules of requestly, which is helpful in many situations, like somewhere you want to modify the headers of the request after delaying it. It could be easily solved using requestly.

### Limitations

- The Requestly extension actually adds the delay in the browser.
- Adding the delay in the browser could lead to poor browsing experience when the delay is applied to too many requests or it is applied for a large duration.

## Conclusion

- To test your entire application on a slower network, prefer using the browser's network throttling feature.
- To add delays to external resources like CSS, JS etc prefer using Server Side delay.
- To add delays to API requests (& AJAX requests) prefer using Client Side delay.

Hope this article gives you clarity on how you can test your applications on a slower network or simulate API latency in your app.

We share news about developer tools. Follow us on [Twitter](http://twitter.com/requestlyIO) to learn more about devtools. We are also reachable on email at contact@requestly.io


# The Why

At first, let us understand **WHY** do we need to test our application for different network conditions

While developing applications, we experience performance based on our home network and we optimize the performance with our network in reference. We fail to consider performance optimizations for situations where there could be an unstable network or low network coverage.

Testing our application for different network conditions helps us **optimize** our applications for them thus **improving** the overall **UX**.

Now, these can be done via the built-in dev tools' network tab in the browser, publicly available APIs that respond with delay, browser extensions that add delay to the network request, and other similar methods.

So what's the need to automate then?

Because automation is fun. Why do something manually when you can just automate that with a code snippet written taking a decade long time **" clears throat "**

![Awkward stares](https://media4.giphy.com/media/HP7mtfNa1E4CEqNbNL/giphy.gif)

# The How

Now, let's dive deep into the implementation.

### Let's get Automating!

![I'll get you automating](https://media0.giphy.com/media/l1KtYG8BndKBmWrM4/giphy.gif)

## Approach 1: Using Selenium Chromedriver API for Network Emulation

Since we're gonna use selenium, let's first install the selenium npm package

```
npm install selenium-webdriver
```

Run this on your project directory terminal and we've installed selenium as a dependency for the project

We also need the driver for the specific browser we're going to test our application on. In this blog, we'll be focusing on the Chrome browser. You can find the link to that [here](https://chromedriver.storage.googleapis.com/index.html)

Now that these are out of the way, let's get writing some code

![Finallyyy!](https://media0.giphy.com/media/Quh1CAKOTRCl9VVU3f/giphy.gif)

Let's start by importing few parts from the selenium package

```
const { Builder } = require("selenium-webdriver")
```

Now, let's write the function where the main code would stay

```
async function testApplication() {
  let driver = await new Builder().forBrowser("chrome").build();

  await driver.setNetworkConditions({
    offline: false,
    latency: 5000, // Additional latency (ms).
    download_throughput: 50 * 1024, // Maximal aggregated download throughput.
    upload_throughput: 50 * 1024, // Maximal aggregated upload throughput.
  });

  driver.get("http://www.google.com/");
}
```

If we run this function, we would experience a slower speed than usual. But there are a few downsides to this code.

- It throttles the entire network and not a specific website

- You can't throttle a specific network request

Now let's find out how can we overcome these downsides with our next approach.

## Approach 2: Using Requestly's Selenium Package to Throttle Specific Network Request

The selenium package from [Requestly](https://requestly.io/) offers us the ability to create network request specific rules. We'll be discussing their Delay Network Request feature.

For using this package, we need to create a rule first in the Requestly client and then use that rule to delay any network request.

Head on to [requestly's application](https://app.requestly.io/) and click on the New Rule Button, a popup would open up showing the types of rules we can create. For the time being, select delay network request.

![Rules Popup](https://cdn.hashnode.com/res/hashnode/image/upload/v1631821223774/OQO1-OdGh.png)

Now add the URL of the network request you want to delay and add the delay time in milliseconds

![Add Rule](https://cdn.hashnode.com/res/hashnode/image/upload/v1631821353416/TJy5JuIOt.png)

Now we need to get the link to the rule so that we can use that to import the rule.

For that, click on Save Rule and then Share Rule. A popup would appear asking you to name the shared list where this rule would live in. Name it and click on create.

![Naming Shared List.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1631821960950/xRAsLubGU.png)

Now a popup with an option to copy the shared list link would appear. Copy that and keep it handy, we'd require it in our code.

![Copy Link Popup](https://cdn.hashnode.com/res/hashnode/image/upload/v1631822140085/4WQVTtliL.png)

![Phewwww!](https://media3.giphy.com/media/l3q2NdI5m0jrtwFpu/giphy.gif)

Phew, that was a lot! Now finally we get to implement it in our code.

![Yayyyy!](https://media4.giphy.com/media/tMUw5b0PF8SwAAE11c/giphy.gif)

Let's start by installing the dependencies and importing them into our project

```
npm install selenium-webdriver @requestly/selenium
```

```
require("chromedriver");
const { Builder } = require("selenium-webdriver");
const chrome = require("selenium-webdriver/chrome");
const {
  getRequestlyExtension,
  importRequestlySharedList,
} = require("@requestly/selenium");
```

Now that we've all the dependencies into our project, let's create a variable to store our shared list link

```
const sharedListUrl = "YOUR_SHARED_LIST_LINK_HERE"
```

We now have all the components to write our function.

```
async function testApplicationViaRequestly() {
  const options = new chrome.Options().addExtensions(
    getRequestlyExtension("chrome") // This installs requestly chrome extension in your testing instance
  );

  const driver = new Builder()
    .forBrowser("chrome")
    .setChromeOptions(options)
    .build();

  await importRequestlySharedList(driver, sharedListUrl); // Here we import the shared list we created some time back
  driver.get("http://www.google.com/");
}
```

Now, if you try to run the function, you would have the exact behavior as before but with a lot more control over all the network requests and without any downside, we had before.

You, my friend, are a **power user** now 😉.


# Current Setup & the limitations

In my previous organisation [grofers](https://grofers.com), where I worked as a backend engineer, during development of any feature or even a small bug fix, we used to first develop & test the changes on the locally setup MicroService. After that, we deploy the changes on the Kubernetes stage cluster in an isolated namespace, which has all the other services deployed too. The deployment pipeline usually took around 5-10mins to completely deploy all the services. After the stage is setup, we change the API gateway in our debug app to point to the stage environment so we can test the changes end-to-end on the app.

This often requires multiple cycles and sometimes unstable stage environment makes the entire development & testing very frustrating. We often found ourselves fixing the configuration on stage environment and then testing the changes. This is how the process looked like before:

![grofers current testing process](/assets/blog-images/grofers-current-testing-process.png)

## Limitations

- It was very time consuming.
- Multiple deployments required after every change/commit.
- Debugging using breakpoints in IDE was not possible.
- Maintaing a stage environment is very hard. Our Staging environment lacked a lot of data, stability issues so everytime testing on stage was pain.

Almost every developer was using this tedious process to test out the changes. As this process is time consuming, sometimes we missed certain edge cases, which then multiple times had also led to downtimes 😢  and bugs in production.

We tried telepresence too for local testing, but no one ended up using it due to the tedious process in setting it up.

# Introducing Requestly 💪

Requestly is a cross-platform developer tool to intercept all local network traffic and gives request level granular control to modify individual pieces of an API request. Requestly can be leveraged here to reduce the development & testing time and also testing different corner cases.

![Requestly Hero Image](/assets/blog-images/requestly-feature-set-annotated.png)

## How Requestly can help?

Using [Requestly desktop app](http://requestly.io/desktop), you can interecept all traffic from your Android & IOS debug apps. Then you can create a traffic modification rule (simply rule) to redirect a particular endpoint/service to your local machine and not to production endpoint (A No-Code solution for the Coders) This lets users instantly test out any changes directly against production envrionment **without depending on the staging environment**.

On top of this, you can instantly test out how the app reacts when the response of an API changes, without making any changes to the code. You can mock API responses using Requestly. You can also test for 4xx, 5xx scenarios, add artificial latency to your APIs and test your app.

So this is how the process looks like now:

![Local API testing process with Requestly](/assets/blog-images/local-api-testing-process-with-requestly.png)

## Example - Use Search APIs from local in debug app

For example, If you are working on Search service and want to test Type To Search experience, this setup can be really life savior. For this you can configure a Replace Rule in Requestly like this

```
Replace: https://api2.grofers.com/v5/search
With: http://localhost:5000/v5/search
```

Here's how the flow of data look like

![Android & IOS App debugging with Requestly](/assets/blog-images/requestly_android_IOS_Debugging.png)

## Benefits

- Changes instantly reflected on app
- No multiple deployments cycle required.
- Test different edge cases which only exist on production. **Deploy on production with confidence.**
- Debugging with breakpoints in your favourite IDE is now possible
- Minimize dependency on Stage environment

## Configuring Requestly (Step by Step guide)

Now you know the benefits of using Requestly in your local API develoment & testing. It's time to set up Requestly. Here's step by step guide.

### Step1 - Download Requestly Desktop app

Go to [https://requestly.io/desktop](https://requestly.io/desktop) and download the desktop app for your OS - Mac, Linux & Windows.

### Step2 - Install Certificate & Configure Proxy in Android/IOS Debug App

![Requestly Desktop App Setup Steps](/assets/blog-images/requestly-desktop-app-setup-steps.png)

At this point, you should be able to see the traffic from your debug app in the Network Traffic table.

### Step3: Setup Redirection Rule in Requestly

Redirecting `v5/search` endpoint from Production to local server

![Redirect API from Prod to local using Requestly](/assets/blog-images/requestly-redirect-prod-to-local.png)

### Step4: Add Preset headers (If required)

Click on `Create New Rule` and then `Select Modify Headers` to add additional headers to the request which Kong adds in the production environment So that your [localhost](http://localhost) end point also receive the same headers.

![Add Preset Headers using Requestly Headers Rule](/assets/blog-images/requestly-headers-rule.png)

That's it! You should be able to test features like TypeToSearch directly in debug app against the production K8s cluster utilising the production data on ElasticSearch and other production configurations.

Please note we don't intend to discourage testing in the stage environment. We just want to emphazise that you can avoid multiple cycles of deployment on stage during the development. Ofcourse, the ideal practive should to test end to end on local, then doing testing on stage and then deployment on production.

Happy testing! By [Sahil Gupta](https://www.linkedin.com/in/sahil865gupta/)


Graphql has completely changed the way APIs are used to fetch data. The simplicity and entity based architecture ensures support for complex querying

But what should a developer do when he is waiting for the api to change or when the api is completely down for some reason? Spinning up a local instance seems quite a hassle and waiting till things get fixed is wasted dev time.

But you just want some data. Wasn’t graphql supposed to be simple?

We have tried to solve this by providing a proxy that can effectively target graphql queries. Using simple rules you can modify and provide custom data to your graphql requests, _without pushing any hacky code_ into your repo. You neither change the request query nor the server schema.

Too good to be true? It’s not!

But first we will have to understand how a graphql query is actually processed.

## Graphql is just HTTP with a zing ⚡

Graphql might seem like a new way to make API request, but under the hood it uses simple http.

> 💡 Official documentation - https://graphql.org/learn/serving-over-http/

A graphql request can be send in one of two ways

### Get request

If graphql is sent using a get request, the graphQL query string is passed in as search parameters to the endpoint. So the following query

```
{
  hero {
    name
  }
}

```

Is converted into a GET request to `http://domain.com/graphql_endpoint?query={hero{name}}`

### Post request

For a post request, the concept remains the same. The query string, variables and even oprerationName (this will be important later) are passed in the request body as payload. The schema is as follows

```
{
  "query": "query {\n  hero {\n    name\n  \n} \n}",
  "operationName": "GetMyHero",
  "variables": { "superpower": "heroic", ... }
}
```

### Response

Regardless of the method used, the response always follows a common format. The server returns a json object with the following schema

```
{
  "data": { ... },
  "errors": [ ... ]
}

```

## Using Requestly to modify your graphql requests in production.

With this newly acquired understanding of how graphql works, you can now use Requestly to specifically target graphql queries and modify the result that they return using the [Modify Response Rule](https://requestly.io/feature/modify-response/)

We can target the query that is sent using the [Request Payload](https://requestly.io/feature/modify-response/) filter

### Targeting the request - OperationName

Most big sites use _operation name_ and _operation type_ to write less ambigious queries inside code. This is done for verbose and grep*-able* server \*\*logs.

In the example query below the operation type is **query** and operation name is **JackSparrow**

```
query JackSparrow {
  hero {
    name
  }
}
```

Luckily for us, the generated http request sends `operationName` as an attribute in the payload for the graphQL request.

> 💡 You can read more about this here - [graphql.org/learn/queries/#operation-name](https://graphql.org/learn/queries/#operation-name)

## 🔥 Live Example - changing the AdUrl on stackshare.io

Stackshare shows a banner Ad on the side of their pages for each tool. Under the hood, the data for these like the ad banner, CTA and target url are all requested from a graphql endpoint.

Let’s try to change the targetURL of these ads using the **Modify Resoponse Rule.**

> 💡 tldr: skip to the end of the steps and use the link to import the rule

1. Download the Requestly desktop app or use the browser extension
2. Click on create rule and create a new modify response rule
3. Give the Rule a name and in the target url type `[stackshare.io/graphql](http://stackshare.io/graphql)`
4. Click the small funnel next to the URL to add a filter. We will be adding a Request Payload Filter
5. Provide the key as **operationName** and value as **advert**

   ![Request Payload filter](/assets/blog-images/2022/02/01/request=payload-filter.png)

6. Once that is done, click on the option just below labelled **Programmatically(JS Script).** This lets us modify the response using Javascript
7. Paste the following code into the text area

   ```jsx
   function modifyResponse(args) {
     const {
       method,
       url,
       response,
       responseType,
       requestHeaders,
       requestData,
       responseJSON,
     } = args;
     let newResponse = responseJSON;
     newResponse.data.advert.targetUrl = "https://twitter.com/requestlyio";
     return JSON.stringify(newResponse);
   }
   ```

8. Save the rule and make sure it is turned on
9. Go to any tools page, eg. - [stackshare.io/graphql](https://stackshare.io/graphql) . Click on the ad that appears on the side (_hopefully your adbloacker let’s us continue with our experiment_ 😆 🤞🏻)

Now every ad you see on stackshare will lead you to twitter. While you are there maybe give that account a follow😉

But if you just skipped through all the above steps, here is a link that lets you directly import the rule.

[Click to import rules](https://app.requestly.io/rules/#sharedList/1643718676532-Modify-GraphQL-Response)

> There is another rule in there that hijacks the search results for when you search for graphql on google. Turn that on and try it yourself.

    **Disclaimer:** *You have been warned!*

_Happy hacking!_



## Introduction

[Adobe Launch](https://www.adobe.com/experience-platform/launch.html) is a next-generation [tag management system](https://www.nabler.com/tag-manager-implementation/) that unifies the client-side marketing ecosystem by empowering developers to build integrations on a robust, extensible platform that partners, clients, and the broader industry can build on and contribute to.

Launch is not an update to the existing Tag Management system by Adobe, namely [Adobe DTM](https://www.nabler.com/adobe-dtm-consulting/). Instead, it is an entirely new product with a new codebase. It has been redesigned from scratch using an API-first approach. Everything is built on a robust set of APIs, which makes the system very powerful, flexible, and customizable.

## Replace Adobe Launch Production Scripts with development version

Digital marketing consultants often needs to debug the instrumentation of analytics events, triggering of the events and the properties sent along with the events. With the production version, it is very hard to debug and validate if everything is working fine So in order to have verbose logging in console, having a development version really helps.

But the problem is consultants do not own the website so they can’t change the production scripts to development version and neither it is a good suggestion to run development version in your production version.

## Using Requestly to replace scripts (Chrome, Firefox)

Requestly is a modern web & mobile debugging proxy. Requestly comes as browser [extension](https://chrome.google.com/webstore/detail/requestly-modify-headers/mdnleldcmiljblolnjhpnblkcekpdkpa), [desktop app](https://requestly.io/desktop/) and Android/IOS SDKs (coming soon).

Using Requestly, one can define a URL pattern and redirect it to another. It is called [Redirect Rule (or Map Remote)](http://localhost:8000/feature/redirect-url/) in Requestly.

Create New Rule and Select Redirect Rule. Here’s an example of Redirect Rule for Adobe Launch script replacement from production to development.

![Adobe Launch Production to Development](/assets/blog-images/adobe-launch-prod-to-dev.png)

```jsx
URL Contains https://assets.adobedtm.com/1dd2f3456789/123456abcd/launch-EN1a2b3c4d5e6fg7h8.min.js

Redirect to https://assets.adobedtm.com/1dd2f3456789/123456abcd/launch-12345a1b2c3d4e5-development.min.js
```

Note - Above URLs are dummy. Please use your own production & development environment URLs.

## Validate if the Replacement is happening fine

There are multiple ways using which one can validate whether the script replacement is working fine or not.

### Simulate Rule

Using this feature, you can enter your production environment URL and Requestly behind the scenes will evaluate whether the Redirect rule is configured correctly or not.

![Simulate Rule](/assets/blog-images/adobe-launch-prod-to-dev-simulate.png)

### Chrome Devtools

Open the website where you have the production version of DTM tag and you should see an Internal Redirect to the development version of the tag. (As configured in the rule)

![Chrome Devtools](/assets/blog-images/adobe-launch-prod-to-dev-chrome-devtools.png)

### Requestly console in Devtools

You can also open Requestly console in devtools to validate whether the replacement is working fine or not.

![Requestly console](/assets/blog-images/adobe-launch-prod-to-dev-requestly-devtools.png)

## Replacing Production Tag to Development Tag for Mobile browsers or Safari (Requestly Desktop App)

[Requestly Desktop app](https://requestly.io/desktop/) is available on all platforms - Windows, Linux & MacOS. You can configure your Android & IOS devices to pass the traffic through Requestly desktop app and then you can configure a Redirect Rule in the desktop app as well.

![Requestly Desktop App](/assets/blog-images/adobe-launch-prod-to-dev-desktop-app.png)

Hope it helps! Feel free to reach out to us if you are stuck anywhere while configuring the rule.


This article will take you through how to use [Requestly](https://requestly.io) to simulate fake 404, 500 response status codes and test your frontend app `without changing anything in your codebase`. There are two possible ways to solve this using Requestly:

- [Requestly Desktop App](/desktop) (1 step)
- [Requestly Chrome Extension](https://chrome.google.com/webstore/detail/requestly-modify-headers/mdnleldcmiljblolnjhpnblkcekpdkpa) (2 step)
 
 

# Using Desktop App

You can use any MITM proxy to intercept the request and simulate the status code. However, using [Requestly Desktop App](/desktop), it is possible in a single step.

### Steps

- Go to Rules Tab and Click on New Rule
- Select Modify Response
- Define the exact URL (or Pattern) and define the status code. That's it.

![Modify Response Status Code Rule](/assets/img/screenshots/desktop-app/modify-status-code.png)

Here's a step by step video [demo](https://youtu.be/nLcIZGmMAtQ) explaning same.

Download Requestly Desktop App from [here](/desktop)

# Using Browser Extension

[Requestly Browser Extension](https://chrome.google.com/webstore/detail/requestly-modify-headers/mdnleldcmiljblolnjhpnblkcekpdkpa) can simulate different status codes on an API by redirecting the actual API to a mock API using Requestly's `Redirect Rule`.

![Mock Server](/assets/blog-images/mock-server.png)

## Steps

### 1. Create a mock API using Requestly

Requestly has a Mock Server capability to create a Mock API response. Here are the steps to create one.

- Create a new mock API here- [https://app.requestly.io/mock-server/viewer/create](https://app.requestly.io/mock-server/viewer/create)
- Set the status code you want to simulate (404, 500 ...).
 ![Mock API sending 500 status code](/assets/blog-images/mock-500-status.png)

Example mock Simulating 500 status code- [https://app.requestly.io/mock/aIfQd7toGFUMCL0PZDrc](https://app.requestly.io/mock/aIfQd7toGFUMCL0PZDrc)

_Requestly mock server handles the [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) headers automatically so that the browser does not block the cross-origin requests._

### 2. Redirecting actual API endpoint to the Mock Server endpoint.

- Setup a [redirect rule](https://requestly.io/feature/redirect-url) to redirect the actual API to the requestly mock API.

![Redirect Blinkit Search API to a mock API simulating 404 status code](/assets/blog-images/blinkit-404.png)

Redirecting Blinkit Search API to a mock API simulating 404 status code

### 3. Removing Content-Security-Policy Headers

Sometimes redirection to mock API won’t work due to [Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy)- [connect-src](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src) directive, which restricts the URLs loaded using script interfaces.

You can use the [Requestly marketplace](https://app.requestly.io/marketplace) rule to bypass this, which has a prebuilt rule to remove the `content-security-policy` header. Thats it.

![Requestly Marketplace](/assets/blog-images/marketplace-cors.png)

Download Requestly browser extension from [here](https://chrome.google.com/webstore/detail/requestly-modify-headers/mdnleldcmiljblolnjhpnblkcekpdkpa)

I hope this empowers you to do robust testing of your frontend app/website by simulating different API behaviours.

Further Resources:

- [Simulating 500 when Tweeting](https://requestly.io/blog/simulating-500-status-code-in-create-tweet-api-on-twitter)
- [Simulating 404 on Blinkit Search](https://requestly.io/blog/simulating-404-status-code-in-blinkit-search-api)

Happy Debugging!

By [@nafees87n](https://www.linkedin.com/in/nafees87n/)


Nobody wants to see errors in their API. But they appear at times when least expected. The possible scenarios when an error pops up could be something is wrong with the request or some problem with the API. Whatever may be the cause, one thing is sure traffic would stop.

API crashes shouldn’t disrupt the user experience. Errors should be handled at the client-side so that the user knows that something is wrong and can move on from there.

In the development phase, the consumers of API won’t wait till the API is entirely built to start their development. In this scenario, they can mock server responses and begin their development. Testing the application for error responses is vital so that user traffic is not blocked.

A QA tester or Product manager would want to mock various error responses to check how the application handles the errors.

## How to Simulate API error responses using Requestly

[Requestly](https://requestly.io) is a tool that intercepts all the network requests and allows users to modify them. It enables users to Modify Headers, Redirect URLs, Switch hosts, Mock API responses, Delay network requests, Insert custom scripts. It is available as a desktop app and browser extension on all major browsers.

[Requestly](https://app.requestly.io) app can simulate status code responses by using the redirect rule to redirect to a mock API that overrides the status code. In simple words, you are hitting the mock API instead of the actual API.

![Mock Server](/assets/blog-images/mock-server.png)

I used it to simulate status code responses on certain prominent websites.

I tried this with the following sites to see how the site handles the simulation of 500- Internal Server Error status code.

## Simulating 404 status code on blinkit search.

I created a mock using requestly setting 404 status code.

![Mock for simulating 404 response code on blinkit search](/assets/blog-images/mock-404-status.png)
_Mock for simulating 404 response code on blinkit search_

After some observation, I found that blinkit search API follows the pattern `[https://blinkit.in/v5/search/*](https://blinkit.in/v5/search/*)`

![Rule redirecting blinkit search to mock API response](/assets/blog-images/blinkit-404.png)
_Rule redirecting blinkit search to mock API response_

The blinkit website went into infinite loading on searching as a 404 response status code was simulated in the search API. The error is not handled here instead. If some message were to the user, the experience would have been better.

![Searching on Blinkit](/assets/blog-images/blinkit-search.png)
_Searching on Blinkit_

Get the rule here: [https://app.requestly.io/rules/#sharedList/1640614559005-blinkit-search-404](https://app.requestly.io/rules/#sharedList/1640614559005-blinkit-search-404)

This is how I used Requestly to simulate 404 in the blinkit search. I hope this article has helped you and empowers you to simulate different status codes.

Happy Debugging!

Further Resources:

- [Simulate different API status code using Requestly](https://requestly.io/blog/simulate-different-api-status-code-using-requestly/)
- [Simulating 500 when Tweeting](https://requestly.io/blog/simulating-500-status-code-in-create-tweet-api-on-twitter)

By [@nafees87n](https://www.linkedin.com/in/nafees87n/)



Nobody wants to see errors in their API. But they appear at times when least expected. The possible scenarios when an error pops up could be something is wrong with the request or some problem with the API. Whatever may be the cause, one thing is sure traffic would stop.

API crashes shouldn’t disrupt the user experience. Errors should be handled at the client-side so that the user knows that something is wrong and can move on from there.

In the development phase, API consumers won’t wait until the API is entirely built to start their development. In this scenario, they can mock server responses and begin their development. Testing the application for error responses is crucial so that user traffic is not blocked.

A QA tester or Product manager would want to mock various error responses to check how the application handles the errors.

## How to Simulate API error responses using Requestly

[Requestly](https://requestly.io) is a tool that intercepts all the network requests and allows users to modify them. It enables users to Modify Headers, Redirect URLs, Switch hosts, Mock API responses, Delay network requests, Insert custom scripts. It is available as a desktop app and browser extension on all major browsers.

[Requestly](https://app.requestly.io) app can simulate status code responses by using the redirect rule to redirect to a mock API that overrides the status code. In simple words, you are hitting the mock API instead of the actual API.

![Mock Server](/assets/blog-images/mock-server.png)

I used it to simulate status code responses on Twitter

I tried this with the following sites to see how the site handles the simulation of 500- Internal Server Error status code.

## Simulating 500 status code when Tweeting

I created a mock API using requestly setting Status Code as 500.

![Mock for simulating 500 error response on Twitter](/assets/blog-images/mock-500-status.png)
_Mock for simulating 500 error response on Twitter_

After some reverse engineering, I noticed that when the tweet button is clicked, a POST request is sent to a Twitter API ending with `CreateTweet`.

So I created the Requestly rule to be applied only when the URL matches `*/CreateTweet`using wildcard match.

![Redirect Rule redirecting to mock API](/assets/blog-images/createTweet-API.png)
_Redirect Rule redirecting to mock API_

The redirection to mock API won’t work due to [Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy)- [connect-src](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src) directive, which restricts the URLs loaded using script interfaces.

You can use the [Requestly marketplace](https://app.requestly.io/marketplace) rule to bypass this, which is a prebuilt rule to remove the `content-security-policy` header.

![Requestly Marketplace](/assets/blog-images/marketplace.png)

When I tried tweeting something, 500 status code was simulated and handled as following.

![500 error response simulated when tweeting](/assets/blog-images/twitter-screenshot.png)
_500 error response simulated when tweeting_

Get the rule here- [https://app.requestly.io/rules/#sharedList/1640613384657-twitter-500-simulate](https://app.requestly.io/rules/#sharedList/1640613384657-twitter-500-simulate)

This is how I used Requestly to simulate 500 when tweeting. I hope this article has helped you and empowers you to simulate different status codes.

Happy Debugging!

Further Resources:

- [Simulate different API status code using Requestly](https://requestly.io/blog/simulate-different-api-status-code-using-requestly)
- [Simulating 404 on Blinkit Search](https://requestly.io/blog/2021/12/28/simulate-404-API-status-code-in-blinkit-search-API)

By [@nafees87n](https://www.linkedin.com/in/nafees87n/)


Discovering new apps is easier than ever. There are almost infinite apps that could be used for a particular task. Product developers often need to find a way out to try and test these apps with bare minimum effort and then finalize an app they are comfortable with and want to integrate.

The traditional time and effort consuming way of doing this is by trial and error, where developers integrate a tool with the app via making alterations in the codebase and then testing things out. Now let me introduce you to a cool way of doing this. What if I say that you can try and test out different SAAS apps and tools without even modifying a single line of your codebase?

This is exactly what **Requestly** can help you out with!

Using [Requestly](https://requestly.io/), you can directly insert the custom script/installation code that you get for integration from the 3rd party app and test it on the website from the browser itself. Since no coding and development effort required, even product managers can use Requestly like a breeze. Users can collaborate with fellow developers and clients by easily sharing their rules.

Suppose you wish to integrate a changelog into your website and are confused among some excellent options available for use. You can easily insert installation scripts from different changelog providers in your website via Requestly and test them out.

## See how this works!

Let’s see how this works with an example by trying out changelog by Beamer on Stackoverflow.

1. Create a new rule.
 ![New Rule](/assets/blog-images/new_rule.png)

2. Select Insert Scripts rule type to open the rule editor.
 ![Insert Script rule](/assets/blog-images/insert_script.png)

3. Add the rule name, description and define the rule conditions. Insert the installation code in the response body.
 ![Rule Details](/assets/blog-images/trying_beamer_snippet.png)

4. Save this rule, and that’s it!
 You can now try out the SaaS app on the desired website, i.e. Stackoverflow.com in our case.
 ![Test Beamer on Stackoverflow](/assets/blog-images/beamer_on_stackoverflow.png)

## Easy, right?

You can try out various SaaS apps including **Crisp, ConvertFlow, HubSpot, Beamer, Typeform, Wisepops, Drift and HotJar** to name a few.
 Learn more about other integrations [here](https://requestly.io/blog/), and try out Requestly now!

Download Requestly for free [here.](https://requestly.io/downloads/)

Written by [Shrey](https://www.linkedin.com/in/gupta-shrey/), Building Product at Requestly.

Discovering new apps is easier than ever. There are almost infinite apps that could be used for a particular task. Product developers often need to find a way out to try and test these apps with bare minimum effort and then finalize an app they are comfortable with and want to integrate.

The traditional time and effort consuming way of doing this is by trial and error, where developers integrate a tool with the app via making alterations in the codebase and then testing things out. Now let me introduce you to a cool way of doing this. What if I say that you can try and test out different SAAS apps and tools without even modifying a single line of your codebase?

This is exactly what **Requestly** can help you out with!

Using [Requestly](https://requestly.io/), you can directly insert the custom script/installation code that you get for integration from the 3rd party app and test it on the website from the browser itself. Since no coding and development effort required, even product managers can use Requestly like a breeze. Users can collaborate with fellow developers and clients by easily sharing their rules.

Suppose you wish to integrate a sticky bar to announce annual offer on your website and are confused among some excellent options available for use. You can easily insert installation scripts for different tools in your website via Requestly and test them out.

## See how this works!

Let’s see how this works with an example by trying out inserting a sticky bar using Convertflow on Netflix.

1. Create a new rule.
 ![New Rule](/assets/blog-images/new_rule.png)

2. Select Insert Scripts rule type to open the rule editor.
 ![Insert Script rule](/assets/blog-images/insert_script.png)

3. Add the rule name, description and define the rule conditions. Insert the installation code in the response body.
 ![Rule Details](/assets/blog-images/trying_convertflow_snippet.png)

4. Save this rule, and that’s it!
 You can now try out the SaaS app on the desired website, i.e. Netflix.com in our case.
 ![Test Convertflow on netflix](/assets/blog-images/convertflow_on_netflix.png)

## Easy, right?

You can try out various SaaS apps including **Crisp, ConvertFlow, HubSpot, Beamer, Typeform, Drift and HotJar** to name a few.
 Learn more about other integrations [here](https://requestly.io/blog/), and try out Requestly now!

Download Requestly for free [here.](https://requestly.io/downloads/)

Written by [Shrey](https://www.linkedin.com/in/gupta-shrey/), Building Product at Requestly.

Discovering new apps is easier than ever. There are almost infinite apps that could be used for a particular task. Product developers often need to find a way out to try and test these apps with bare minimum effort and then finalize an app they are comfortable with and want to integrate.

The traditional time and effort consuming way of doing this is by trial and error, where developers integrate a tool with the app via making alterations in the codebase and then testing things out. Now let me introduce you to a cool way of doing this. What if I say that you can try and test out different SAAS apps and tools without even modifying a single line of your codebase?

This is exactly what **Requestly** can help you out with!

Using [Requestly](https://requestly.io/), you can directly insert the custom script/installation code that you get for integration from the 3rd party app and test it on the website from the browser itself. Since no coding and development effort required, even product managers can use Requestly like a breeze. Users can collaborate with fellow developers and clients by easily sharing their rules.

Suppose you wish to integrate a chatbot into your website and are confused among some excellent options available for use. You can easily insert installation scripts for different chatbots in your website via Requestly and test them out.

## See how this works!

Let’s see how this works with an example by trying out Crisp chat on Amazon.


<iframe width="900" height="506.25" src="https://www.youtube.com/embed/yVgOcKv2rjc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<

1. Create a new rule.
 ![New Rule](/assets/blog-images/new_rule.png)

2. Select Insert Scripts rule type to open the rule editor.
 ![Insert Script rule](/assets/blog-images/insert_script.png)

3. Add the rule name, description and define the rule conditions. Insert the installation code in the response body.
 ![Rule Details](/assets/blog-images/rule_snippet.png)

 You can use this istallation code for testing purposes:

```
 window.$crisp=[];
 window.CRISP_WEBSITE_ID="1c7370cc-6ff1-446f-89fa-9769ac56b756";
 (function(){
 d=document;
 s=d.createElement("script");
 s.src="https://client.crisp.chat/l.js";
 s.async=1;
 d.getElementsByTagName("head")[0].appendChild(s);
 })();
```

4. Save this rule, and that’s it!
 You can now try out the SaaS app on the desired website, i.e. Amazon.com in our case.
 ![Test Crisp on Amazon](/assets/blog-images/test_crisp.png)

## Easy, right?

You can try out various SaaS apps including **Crisp, ConvertFlow, HubSpot, Beamer, Typeform, Wisepops, Drift and HotJar** to name a few.
 Learn more about other integrations [here](https://requestly.io/blog/), and try out Requestly now!

Download Requestly for free [here.](https://requestly.io/downloads/)

Written by [Shrey](https://www.linkedin.com/in/gupta-shrey/), Building Product at Requestly.

Discovering new apps is easier than ever. There are almost infinite apps that could be used for a particular task. Product developers often need to find a way out to try and test these apps with bare minimum effort and then finalize an app they are comfortable with and want to integrate.

The traditional time and effort consuming way of doing this is by trial and error, where developers integrate a tool with the app via making alterations in the codebase and then testing things out. Now let me introduce you to a cool way of doing this. What if I say that you can try and test out different SAAS apps and tools without even modifying a single line of your codebase?

This is exactly what **Requestly** can help you out with!

Using [Requestly](https://requestly.io/), you can directly insert the custom script/installation code that you get for integration from the 3rd party app and test it on the website from the browser itself. Since no coding and development effort required, even product managers can use Requestly like a breeze. Users can collaborate with fellow developers and clients by easily sharing their rules.

Suppose you wish to integrate popups into your website and are confused among some excellent options available for use. You can easily insert installation scripts for different popup providers in your website via Requestly and test them out.

## See how this works!

Let’s see how this works with an example by trying out Popupsmart on Stackoverflow.

1. Create a new rule.
 ![New Rule](/assets/blog-images/new_rule.png)

2. Select Insert Scripts rule type to open the rule editor.
 ![Insert Script rule](/assets/blog-images/insert_script.png)

3. Add the rule name, description and define the rule conditions. Insert the installation code in the code source.
 ![Rule Details](/assets/blog-images/trying_popupsmart_snippet.png)

4. Save this rule, and that’s it!
 You can now try out the SaaS app on the desired website, i.e. Stackoverflow.com in our case.
 ![Test Popupsmart on stackoverflow](/assets/blog-images/popupsmart_on_stackoverflow.png)

## Easy, right?

You can try out various SaaS apps including **Crisp, ConvertFlow, HubSpot, Beamer, Typeform, Drift and HotJar** to name a few.
 
Learn more about other integrations [here](https://requestly.io/blog/), and try out Requestly now!

Download Requestly for free [here.](https://requestly.io/downloads/)

Written by [Shrey](https://www.linkedin.com/in/gupta-shrey/), Building Product at Requestly.

Discovering new apps is easier than ever. There are almost infinite apps that could be used for a particular task. Product developers often need to find a way out to try and test these apps with bare minimum effort and then finalize an app they are comfortable with and want to integrate.

The traditional time and effort consuming way of doing this is by trial and error, where developers integrate a tool with the app via making alterations in the codebase and then testing things out. Now let me introduce you to a cool way of doing this. What if I say that you can try and test out different SAAS apps and tools without even modifying a single line of your codebase?

This is exactly what **Requestly** can help you out with!

Using [Requestly](https://requestly.io/), you can directly insert the custom script/installation code that you get for integration from the 3rd party app and test it on the website from the browser itself. Since no coding and development effort required, even product managers can use Requestly like a breeze. Users can collaborate with fellow developers and clients by easily sharing their rules.

Suppose you wish to integrate popups into your website and are confused among some excellent options available for use. You can easily insert installation scripts for different popup providers in your website via Requestly and test them out.

## See how this works!

Let’s see how this works with an example by trying out Wisepops on eBay.

1. Create a new rule.
 ![New Rule](/assets/blog-images/new_rule.png)

2. Select Insert Scripts rule type to open the rule editor.
 ![Insert Script rule](/assets/blog-images/insert_script.png)

3. Add the rule name, description and define the rule conditions. Insert the installation code in the response body.
 ![Rule Details](/assets/blog-images/trying_wisepops_snippet.png)

4. Save this rule, and that’s it!
 You can now try out the SaaS app on the desired website, i.e. eBay.com in our case.
 ![Test Wisepops on eBay](/assets/blog-images/wisepops_on_ebay.png)

## Easy, right?

You can try out various SaaS apps including **Crisp, ConvertFlow, HubSpot, Beamer, Typeform, Drift and HotJar** to name a few.
 
Learn more about other integrations [here](https://requestly.io/blog/), and try out Requestly now!

Download Requestly for free [here.](https://requestly.io/downloads/)

Written by [Shrey](https://www.linkedin.com/in/gupta-shrey/), Building Product at Requestly.

Requestly’s prime focus is to simplify the daily workflow for users.

Discover how Requestly fits into your specific use case, whether you work in development, testing and QA, or Digital Marketing.

- [Frontend Development →](#frontend)
- [Testing and QA →](#testing)
- [Backend Development →](#backend)
- [Digital Marketing →](#marketing)
<div id='frontend'> </div>

# Frontend Development

- **Simulate Status Codes** - Simulate fake 404, 500 response status codes and test your frontend app without changing anything in your codebase.
 [Learn more here!](https://requestly.io/blog/simulate-different-api-status-code-using-requestly/)
- **Debug App in Production** - Debug an application in production without setting up a local server.
 [Learn more here!](https://requestly.io/blog/debugging-next-js-app-in-production/)
- **Mock GraphQL API response** - Modify and provide custom data to your GraphQL requests. You neither change the request query nor the server schema.
 [Learn more here!](https://requestly.io/blog/mocking-graphql-api-response/)
- **Inject/Insert Custom Scripts** - Allows you to automate, scrape & change webpage's behaviour with little knowledge of JS & CSS.
 [Learn more here!](https://requestly.io/feature/insert-custom-scripts/)
<div id='testing'> </div>

# Software Quality Assurance

Get your apps production-ready faster and easier than ever!

- **Test Your Application in Different Network Conditions** - Test your website performance in different network conditions and with different API latencies.
 [Learn more here!](https://requestly.io/blog/adding-delay-to-network-requests)
- **Automate Testing via Selenium** - The selenium package from Requestly offers us the ability to create network request specific rules.
 [Learn more here!](https://requestly.io/blog/automate-testing-via-selenium/)
- **Simulate Status Codes** - Simulate fake 404, 500 response status codes and test your frontend app without changing anything in your codebase.
 [Learn more here!](https://requestly.io/blog/simulate-different-api-status-code-using-requestly/)
- **Modify Headers in UI Automation Testing**- Requestly lets you modify headers in a testing environment. You can thus have control over your application as you can bypass authentication, set cookies, etc.
 [Learn more here!](https://www.smashingmagazine.com/2021/12/headers-https-requests-ui-automation-testing/)
<div id='backend'> </div>

# Backend Development

Local development and testing is a time-consuming process for most of the backend developers. Using Requestly, you can instantly test any changes directly against the production environment without depending on the staging environment.

- **Faster and easier local development & testing** - Leverage Requestly to reduce the development and testing time and test different corner cases.
 [Learn More here!](https://requestly.io/blog/local-api-development-and-testing-productivity-for-backend-engineers/)
- **Debug Backend Microservices** - Debugging applications in production is like being the detective in a crime movie. Especially with microservices.
Trying to see what’s happening in production at scale is impossible without proper tools! To help you with this, you can now set up a proxy on your Terminal and debug backend requests with utmost ease.
 
&nbsp;&nbsp;&nbsp; Download the [Desktop App](https://requestly.io/downloads) and get started today!
<div id='marketing'> </div>

# Digital Marketers

Debug the instrumentation of analytics events, triggering of the events and the properties sent along with the events without writing a single line of code.

- **Replace Production Script to Development Script** - Digital marketing consultants often need to debug the instrumentation of analytics events, triggering the events and the properties sent along with the events.
 [Learn More here!](https://requestly.io/blog/replace-adobe-launch-production-script-with-development-script/)
- **Debug Analytics tools** - Log useful information from your GA into your browser console and debug from there itself.
 [Learn More here!](https://twitter.com/RequestlyIO/status/1493246175821983744)
- **B2B Sales tools** - Build engaging product demos by showing your product on your customer’s website!
 [Learn More here!](https://requestly.io/sales-tool-for-saas-products/)

Hope you got what you were looking for! Thinking of the next step? 
[**Download Requestly Now!**](https://requestly.io/downloads)

Use Cases

Adding Delay to Network Requests

Automate Testing via Selenium

How backend devs can save an hour a day in local development & testing

Mocking graphQL APIs response

Replace Adobe Launch Production Script to Development Script

Simulate Fake response status codes using Requestly

Simulating 404 HTTP status code in Blinkit Search API

Simulating 500 HTTP status code in Create Tweet API on Twitter

Try out Beamer on Stackoverflow in less than 30 seconds!

Try out Convertflow on Netflix in less than 30 seconds!

Try out Crisp on Amazon in less than 30 seconds!

Try out Popupsmart on Stackoverflow in less than 30 seconds!

Try out Wisepops on eBay in less than 30 seconds!

Requestly for Everyone!

Get to know Requestly