Angular: Preflight taking more time, Slow performance on Production #5897 | Support Center | ABP Commercial

iteabr2020 created 7 months ago

Angular experience slow getting data; I summaries all the point below:

Angular request slow response from gateway
Preflight take more time before actual fetch from Api
No error on console log/network tab.
No error on logs file (auth, gateway, and service).

Deployment on windows server, running on IIS.

ABP Framework version: v7.2.2
UI Type: Angular
Database System: EF Core (SQL Server)
Tiered (for MVC) or Auth Server Separated (for Angular): yes
Exception message and full stack trace:
Steps to reproduce the issue:

16 Answer(s)

0

Anjali_Musmade created 7 months ago
Support Team Support Team Member

Hello iteabr2020,

I have checked as I can see in network there is no preflight request more than 12ms. Can you please explore more in detail?

regards,
0

iteabr2020 created 7 months ago

Hello iteabr2020,

I have checked as I can see in network there is no preflight request more than 12ms. Can you please explore more in detail?

regards,

As for today, preflight taking more times only happen on browser Edge and Chrome only, others browser (Firefox, Safari) looking fine on preflight,

Could we schedule a video call session? This way, I can share my screen for a more detailed discussion.
0

Anjali_Musmade created 7 months ago
Support Team Support Team Member

Hello iteabr2020,

You may elaborate your question in detail so that we can better assist you

Need confirmation on Have you installed redis?

Thanks, Anjali
0
iteabr2020 created 7 months ago
Hello iteabr2020,

Sorry but online support is not available.

You may elaborate your question in detail so that we can better assist you

Need confirmation on Have you installed redis?

Thanks, Anjali

Yes. we install Redis and RabbitMQ on Redhat server.

issues slow on preflight base on browser as below:

| Browser | Status | device | | --- | --- | --- | | Chrome | slow on preflight | Laptop (macOs) | | Edge | slow on preflight | Laptop (macOs) | | Safari | OK | Laptop (macOs) | | Firefox | OK | Laptop (macOs) | | Opera | Slow on preflight | Laptop (macOs) |

How stimulate the issues:

Access website

Login (Auth Server)

First Page Load

Random access any menu

After 3-5 page, preflight will take longer time. sometimes 2 minutes

please let me know if you required any additional information.
0

iteabr2020 created 6 months ago

Hi Anjali,

Just to add in.

We notice that if we use non SSL protocol (http throughout the entire back end solution), there is no performance issue.

When we use https only we face the issue.

Refer below screenshot. Preflight and polyfill take 1.6 min to response.

When we continue to click other menu. its fine. but after few click again the issue come back.

We suspect the solution having a handshake issues. However for Auth and Gateway are using a valid certificate.

Also there is no performance issue in Firefox and Safari browser.

Auth

Gateway

We also notice if we directly call the APIs via Postman, there are no performance issue.

Only we use Angular in Chrome and Edge browser we face the performance issue.

Do let us know if you required any additional information.
0
Anjali_Musmade created 6 months ago
Support Team Support Team Member
Hello iteabr2020,

Could you please try below steps

Clear Browser Cache: Clear the browser cache in both Chrome and Edge. Sometimes, an outdated or corrupted cache can lead to performance issues.

Incognito Mode: Test your Angular application in incognito or private browsing mode. This ensures that no browser extensions or cached data are affecting the performance.

Also have look to this link https://sandeep.dev/various-ways-to-speed-up-your-cors-preflight-requests if it founds helpful for you

Regards, Anjali
0

iteabr2020 created 6 months ago

Dear Anjali,

We have tested the mentioned steps, however the issue still persist. Please advise.

Do let us know if you required any additional information.

Thanks.
0

Anjali_Musmade created 6 months ago
Support Team Support Team Member

Hello iteabr2020,

Have you checked this https://stackoverflow.com/questions/73553149/why-preflight-requests-fail-only-in-chrome-and-then-they-work-after-few-tries please try to find out issue on chrome by following this.

I think your application is working on another browsers so it might not be issue related to performance, It should be browser related issue and need to find that issue.

Thanks, Anjali
0
iteabr2020 created 6 months ago
Hi Anjali,

We have tested the above link and notice that the response time for preflight have some improvement but in angular chrome the issue still persist.

The pre-flight is fine. Refer below.

The xhr request is the issue. Refer below.

Fyi, we will try to promote the micro service to use public network instead of private.

Also we have tried below approach to understand further:

https://support.google.com/chrome/thread/49442697/xhr-requests-pending-for-a-long-time-in-recent-chrome-updates-when-not-recording-in-performance-tab?hl=en. Not working

Using a lower version chrome v90. Not working

Appreciate your support for the issues.

Do let us know if you required any additional information.

Thanks.
0

iteabr2020 created 6 months ago

Hi Anjali,

We found a same issue https://stackoverflow.com/questions/74889221/chrome-edge-safari-http2-requests-getting-stalled-for-every-6th-request-for-up and manage to resolve it by disable http2.

However we are not clearly understand how does http2 works.

Understand that http2 reduce overhead by just having a single tcp connection. However, could it be a bottleneck since http2 just using a single tcp connection.

Thank you for your support and commitment.

Thanks!
0

Anjali_Musmade created 6 months ago
Support Team Support Team Member

Hello iteabr2020,

HTTP/2's use of a single TCP connection is not typically a bottleneck; in fact, it's one of the key features designed to improve performance. HTTP/2's multiplexing capability allows multiple requests and responses to be multiplexed over a single connection, which can lead to more efficient use of that connection.

Also have look to this https://factoryhr.medium.com/http-2-the-difference-between-http-1-1-benefits-and-how-to-use-it-38094fa0e95b

Thanks, Anjali
0

iteabr2020 created 6 months ago

Hi Anjali,

Thanks.

However could you check why micro-service gateway has issue with http/2 and TLS/SSL in Chrome.

We notice that Chrome works with http/2 and TLS/SSL with Angular and Auth Server but not the gateway.

Chrome also works with our previous application that using ASP.NET Zero (http/2 and TLS/SSL).

Thanks.
0

iteabr2020 created 6 months ago

Hi Anjali,

Any findings on this matter.

Thanks.
0

Anjali_Musmade created 6 months ago
Support Team Support Team Member

Hello iteabr2020,

Unfortunately I am unable to reproduce the issue in sample template. I can just give you suggestions. Please go through this stackoverflow discussion https://stackoverflow.com/questions/48206992/slow-cors-preflight-options-request-in-chrome if it helps you.

also please let me know if you are using caching server?

Thanks, Anjali
0

iteabr2020 created 6 months ago

Hi Anjali,

Noted.

We have gone through the discussion as mention, unfortunately it was a different problem.

Yes, we do have cache server for Redis.

Thanks.
0

Anjali_Musmade created 5 months ago
Support Team Support Team Member

Hi,

can you switch to in memory caching instead of Redis cache and try again?

Have an answer to this question? Log in and write your answer.

Assignee

Anjali_Musmade

Labels