Ends in:
6 DAYS
18 HRS
50 MIN
32 SEC
Ends in:
6 D
18 H
50 M
32 S
Open Closed

Angular: Preflight taking more time, Slow performance on Production #5897


User avatar
0
iteabr2020 created

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)
  • User Avatar
    0
    Anjali_Musmade created
    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,

  • User Avatar
    0
    iteabr2020 created

    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.

  • User Avatar
    0
    Anjali_Musmade created
    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

  • User Avatar
    0
    iteabr2020 created

    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:

    1. Access website
    2. Login (Auth Server)
    3. First Page Load
    4. Random access any menu
    5. After 3-5 page, preflight will take longer time. sometimes 2 minutes

    please let me know if you required any additional information.

  • User Avatar
    0
    iteabr2020 created

    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.

  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hello iteabr2020,

    Could you please try below steps

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

    2. 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

  • User Avatar
    0
    iteabr2020 created

    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.

  • User Avatar
    0
    Anjali_Musmade created
    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

  • User Avatar
    0
    iteabr2020 created

    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:

    1. 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

    2. 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.

  • User Avatar
    0
    iteabr2020 created

    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!

  • User Avatar
    0
    Anjali_Musmade created
    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

  • User Avatar
    0
    iteabr2020 created

    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.

  • User Avatar
    0
    iteabr2020 created

    Hi Anjali,

    Any findings on this matter.

    Thanks.

  • User Avatar
    0
    Anjali_Musmade created
    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

  • User Avatar
    0
    iteabr2020 created

    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.

  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hi,

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

Made with ❤️ on ABP v9.1.0-preview. Updated on November 20, 2024, 13:06