Understand multiple http request latency - api

I'm sending multiple http request in parallel from front-end to an api server
I noticed in chrome dev tools that the http requests are sent at the same time ( as we can see on the graph ) but not treated in parallel.
The problem is that I don't have any access to the backend so I can't give much informations except the dev tools graphics.
So I would like to know if it's possible to locate the issue ( If it's a font-end issue/ back end or navigator issue )

Related

Internet Explorer 11 automatically retrying failed ajax requests

I have a single-page app built using React, and I've noticed intermittent issues from users who are using Internet Explorer 11, where IE is repeating ajax requests multiple times (which is an issue given that the API in question is not idempotent).
The most common case I've seen are where the request errors out with a "Network Error" Error, but IE retries the request multiple times. I've been able to recreate this using Fiddler and having it just drop those requests, in which case I can see multiple requests being made, although the network tab in IE dev tools only shows a single request. This also only seems to occur after a successful request, so this may be related to persistent connections?
The single page app is using axios, but I've been able to get it to occur with fetch and straight XHR as well, so I'm assuming this is something in IE11 itself. So the questions I'm trying to answer are:
Is this intended functionality, or is it a quirk of IE11?
Is there any way to configure or control this behaviour?

Requests to an API endpoint denied due to Testcafe prepending request URLs - solutions?

When Testcafe runs against our local site, every request it makes during the test steps are prepended with something like http://192.168.1.182:59304/http://localhost:3000 (port number varies per run).
For the most part this works, but our web application makes calls to certain APIs during a user journey, and within TestCafe they might look like: http://192.168.1.182:59304/http://www.example.com/api/v2/customers/1 which come back with a 401 and response body of 'unauthorized'. Some API calls are fine, however.
I guess my question is:
Are there any way to get around this from my side, such as rewrite certain requests, or do I need to contact the API provider - and if so, what would they be potentially looking to do to allow these requests to go ahead?
You have faced this issue: https://github.com/DevExpress/testcafe-hammerhead/issues/2344. It was fixed. Try to run your tests with the latest TestCafe version (1.8.8-alpha.3).

How to monitor node http requests in node-webkit

How can I monitor http requests that were made by node in node-webkit? When I make a request I don't see it in the developer tools. I can see the request only when I make it with jquery or xmlhttprequest.
I've binded a console.log on the 'end' event and I can see that node-webkit is actually doing the request and it's returning me a correct response. But doing this blind requests is very hard because there is absolutely no way to debug them (except for logging the params that I've called the request method with).
Such low-level procedures can only be handled by the supported node.js so one of these node.js functions is bound to solve your HTTP header monitoring problem:
https://nodejs.org/dist/latest-v6.x/docs/api/http.html#http_event_checkexpectation

Browser-side suggested HTTP/2 server push

Are there any specific spec'd processes that a browser client can use to dynamically encourage a server to push additional requested items into the browser cache using HTTP/2 server push before the client needs to actually use them (not talking about server-side events or WebSockets, here, btw, but rather HTTP/2 server push)?
There is nothing (yet) specified formally for browsers to ask a server to push resources.
A browser could figure out what secondary resources needs to render a primary resource, and may send this information to the server opportunistically on a subsequent request with a HTTP header, but as I said, this is not specified yet.
[Disclaimer, I am the Jetty HTTP/2 maintainer]
Servers, on the other hand, may learn about resources that browsers ask, and may build a cache of correlated resources that they can push to clients.
Jetty provides a configurable PushCacheFilter that implements the strategy above, and implemented a HTTP/2 Push Demo.
The objective of server push is that the server send additional files (e.g. javascripts, css) along with the requested URL (e.g. an HTML page) to the browser before the browser knows what related files are required, thus saving a round-trip and improve webpage load speed. If the browser already know what resources are needed it can request with normal HTTP calls.

Separate back-end and front-end apps on same domain?

We are building a fully RESTful back-end with the Play Framework. We are also building a separate web front-end with a different technology stack that will call the RESTful API.
How do we deploy both apps so they have the same domain name, with some URLs used for the backend API and some for the front-end views?
For example, visiting MyDomain.example means the front-end displays the home page, but sending a GET to MyDomain.example/product/24 means the back-end returns a JSON object with the product information. A further possibility is if a web browser views MyDomain.example/product/24, then the front-end displays an HTML page, and that webpage was built from a back-end call to the same URL.
Finally, do we need two dedicated servers for this? Or can the front-end and back-end be deployed on the same server (e.g. OpenShift, Heroku)
You are gonna to dig yourself... deep :)
Simplest and most clean approach with no any doubt is creating a single application serving data for both, BE and FE, where you differ response (JSON vs HTML) by the URL, pseudo routes:
GET /products/:id controllers.Frontend.productHtml(id)
GET /backend/products/:id controllers.Backend.productJson(id)
Benefits:
single deployment (let's say to Heroku)
name space managed from one app
No need to modify the models in many apps after change in one of them
else if
If you're really determined to create a two separate apps, use some HTTP server as a proxy - for an example nginx - so it will send all requests to domain.tld/* to application working at port 9000 (which will answer with HTML) but requests to domain.tld/backend/* redirect to application working at port 9001 responding with JSON.
else
If you are really gonna to response with JSON or HTML depending on the caller you can try to compare headers to check if request was sent from browser or from AJAX call in each controller , but believe me that will become a nightmare faster than you thing... insert the coin, choose the flavor
I thought of a different solution. I'm going to deploy back-end to a subdomain like
http://api.myapp.example/
and deploy front-end to the main domain:
http://myapp.example/
but I think you'd better use 2 different hosts, one for front-end and one for back-end (I searched the Google and this was the result of my investigations
Other possibility (therefore as separate answer) is using a possibility added in Play 2.1.x a Content negotiation I think it's closest for that what you wanted to get initially :)
Indeed its much easier to create a MEAN STACK APP and use one hosting like Heroku for instance.
Your frontend is what it is, front end for your backend. It will be easy to access backend / restfulAPI's and frontend like this:
http://localhost:3000/api/contacts (to access and consume your API endpoint)
http://localhost:3000/contacts (frontend)
NB: localhost:3000 or http://yourapp.example/api/contacts (api)
http://yourapp.example/contacts (frontend)
It's in the URL