question

RemyVillain-8585 avatar image
2 Votes"
RemyVillain-8585 asked AlvinHo-0737 commented

Angular universal Web App with SSR randomly slow (15s per request)

Hi,

We are trying to publish an SSR (Server side rendering) Angular App on an Azure Web App running on Node 14.
Everything is working very well, pages are rendered server side nicely but sometimes we have very slow requests but without errors or logs. Just slow requests.
The problem seems to happen only when the SSR render function needs to execute external http requests.

We tried different versions of Angular, different project templates but every time SSR is slow randomly on pages with external http requests.

So pages are rendered in less than 1 second most of the time, and sometimes they are in ~15 seconds
Here a request duration distribution of a test page:

76374-image.png

We also try many plan app service level and many external apis with no effect.
Have you got any tips to configure Azure Web App for Angular Universal in production mode ?

Thanks


azure-webappsazure-webapps-performance
image.png (15.9 KiB)
· 28
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @RemyVillain-8585,

did you find the root cause of your problem ? I have the same issue , I am using angular SSR with node.js server by default created with angular cli. for the loading home page I have only 4 api calls which I can see that happing between 400-600ms, abut anyway it randomly takes 15s to load the page.

2 Votes 2 ·

No, but with our docker image (see the dockerfile above), we have no problem with api calls

0 Votes 0 ·

I have tried with the same docker file as you posted here, but with no luck. okay, thank you anyway.

0 Votes 0 ·

@04821556 I am experiencing the same 15 second issue on one of my environments that have custom domains.

Do you have a custom domain attached to the web app? I wonder if that causes the issue.

0 Votes 0 ·

Yes. We have custom domain attached and I was wondering about that also, but no way to test that cause the app is in live and we can't play with it.

0 Votes 0 ·
Show more comments

@04821556 @ryanchill @AlvinHo-0737

HI All,

I am experiencing the same problem. I have filed a support ticket with Azure support and they are escalating the case to the Azure Angular team.

Steps to create a bare bones demo Angular 12 Universal app and repro the bug:
1. ng new universal-demo
2. ng add @nguniversal/express-engine
3. Make any http request using HttpClientModule from AppComponent
4. Deploy to a an Azure App Service (Windows or Linux) running Node 14 LTS.
5. Keep on refreshing the app until on a random attempt you get a delay of approx 15 seconds. It is not possible to repro this bug if the http request code is removed.

Angular CLI: 12.1.1
Node: 14.17.1
Package Manager: npm 6.14.13
OS: win32 x64

Angular: 12.1.1
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router

Package Version


@angular-devkit/architect 0.1201.1
@angular-devkit/build-angular 12.1.1
@angular-devkit/core 12.1.1
@angular-devkit/schematics 12.1.1
@nguniversal/builders 12.1.0
@nguniversal/express-engine 12.1.0
@schematics/angular 12.1.1
rxjs 6.6.7
typescript 4.3.5

0 Votes 0 ·
Show more comments

Hi All,

I am experiencing the same problem. I have filed a support ticket with Azure support and they are escalating the case to the Azure Angular team.

Steps to create a bare bones demo Angular 12 Universal app and repro the bug:
1. ng new universal-demo
2. ng add @nguniversal/express-engine
3. Make any http request using HttpClientModule from AppComponent
4. Deploy to a an Azure App Service (Windows or Linux) running Node 14 LTS.
5. Keep on refreshing the app until on a random attempt you get a delay of approx 15 seconds. It is not possible to repro this bug if the http request code is removed.

Angular CLI: 12.1.1
Node: 14.17.1
Package Manager: npm 6.14.13
OS: win32 x64

Angular: 12.1.1
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router

Package Version


@angular-devkit/architect 0.1201.1
@angular-devkit/build-angular 12.1.1
@angular-devkit/core 12.1.1
@angular-devkit/schematics 12.1.1
@nguniversal/builders 12.1.0
@nguniversal/express-engine 12.1.0
@schematics/angular 12.1.1
rxjs 6.6.7
typescript 4.3.5

0 Votes 0 ·

I have added the source code for the bare bones Angular 12 Universal app with a simple HttpClient request which randomly gets a loading delay of around 15 seconds when deployed to a Windows or Linux Azure App Service as Code.

https://github.com/juliansamuel/universal-demo

0 Votes 0 ·

Hi @RemyVillain-8585, are there any additional details you can provide on GET /external-api? Does it surpass 15s when it's certain type of data in the request body? Did you enable application insights on your application? The latency could be caused by performance of a downstream dependency. The Troubleshoot performance degradation doc is good place to get started in analyzing what could be causing that spike. Should you need any further assistance, feel free to comment down below.

Regards,
Ryan


0 Votes 0 ·

Thanks for your help,

Yes we have enabled application insights, APIs are very simple ones. Just returning some json objects in an array. It surpass 15s when there is a request body or not, a large response array or not.

Application insights reveal a very short high CPU usage on each request. No errors.

We decided to replace the "code" based web app to a docker based web app and this problem totally disappear.
I don't know why but Azure create a docker container that doesn't work well with SSR.
Creating a container ourselves solves the problem.

0 Votes 0 ·

@RemyVillain-8585, was this deployed to Windows or Linux? Which region?

0 Votes 0 ·
Show more comments

Hi @RemyVillain-8585, please tell me how deploy Angular universal on IIS?
When developing use spa.UseAngularCliServer(npmScript: "dev:ssr"); into Startup.cs
How app net.core starting SSR angular for prodaction IIS?

0 Votes 0 ·

Hi,
We don't use IIS, our SSR app is running on a Node.js docker container.

0 Votes 0 ·

@RemyVillain-8585, your backend JS( for Node.js)?
If i use net core for backend my solution direct SSR app is running on a Node.js from NET?

Best Regards

0 Votes 0 ·
Show more comments

Hi @RemyVillain-8585 are you willing to share your dockerfile? I'm curious about which image you started from and also if you added additional stuff aside from the code.

0 Votes 0 ·

Hi @MartinChristensen-9983 , here my DockerFile :

 FROM node:14 as buildContainer
 ARG ANGULAR_ENV
 WORKDIR /app
 COPY ClientApp/package.json ClientApp/package-lock.json ./
 RUN npm install
 RUN npm install -g @angular/cli
 COPY ClientApp .
 RUN npm run build:ssr:${ANGULAR_ENV}
    
 FROM node:14-alpine
 WORKDIR /app
 RUN npm i eventsource request ws
 COPY --from=buildContainer /app/dist/MyProject .
    
 # Expose the port the app runs in
 EXPOSE 4000
    
 # Serve the app
 CMD ["node", "/app/server/main.js"]
0 Votes 0 ·
Show more comments
04821556 avatar image
0 Votes"
04821556 answered

We also tried creating our Docker container, but it didn't help

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

ShubhamAnand-5736 avatar image
3 Votes"
ShubhamAnand-5736 answered AlvinHo-0737 commented

Hi Everyone ( @04821556 , @julian-7027,@RemyVillain-8585,@AlvinHo-0737 & others who are facing similar issue),

I have debugged the reported issue with Universal Angular Web App with SSR & making HTTP Requests where you have reported random slowness & after thorough testing, we have identified that the issue is only happening when using Codeless integration of Application insights.

The reason for same is that for Nodejs SDK for Application Insights (when using SSR in Angular, it is used by default), the value of maxBatchIntervalMs is specified as 15000ms (15 seconds) by default, if no other value is specified as shown below:

maxBatchIntervalMs: The maximum amount of time to wait to for a payload to reach maxBatchSize (Default 15000 ms or 15 seconds).

Please refer to following link for more information:

Monitor Node.js services with Azure Application Insights - Azure Monitor | Microsoft Docs

So,unless the payload size reaches maxBatchSize the http requests are blocked to be sent to telemetry end point (Azure). This causes intermittent delays.

Resolution:

The issue is resolved after specifying a custom value for maxBatchIntervalMs (example 100 ms) as shown in the code sample below:

https://github.com/shuanand/angularuniversalSSRApplicationInsight/blob/main/server.ts

To configure the same, firstly disable the Application Insights from the Azure portal of the Webapp after copying Instrumentation key from the App Insights Dashboard by clicking on Overview blade as shown below:

121584-app-insights.png

You can then update the instrumentation key for your application in server.ts file as shown below:

appInsights.setup("PLEASE_ENTER_YOUR_APPLICATION_INSIGHTS_INSTRUMENTATION_KEY_HERE")


Once, it’s done, there is no random delay even after using the Application Insights as shown below and all the metrics are available in Application Insights Dashboard:

121538-view-insight-data.png

Angular universal App using SSR & Http Requests on Linux App Service:

angularssrdemo.azurewebsites.net

The code is working on Windows & Container App Service too after making the mentioned changes.

Thanks to @julian-7027 for sharing the sample code to quick do a repro for the issue.

Please comment, if you are still facing the issue with sample code and I will check the same.




app-insights.png (78.0 KiB)
· 7
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@ShubhamAnand-5736

Seems the issue is fixed with your resolution. I am monitoring and will continue, but after deployment of your fix to my env didn't receive any spikes.

1 Vote 1 ·

@04821556 , Thanks for prompt confirmation, I am glad to know that issue is now resolved at your end.

0 Votes 0 ·

Thank you @ShubhamAnand-5736 for the solution, appreciate it.

We haven't faced the issue on a different App Service instance so we've been using that instead and removed the problematic one, insights is disabled for this one, so it might be the same reason as yours. Good to know this was most likely the cause. Thanks!

1 Vote 1 ·

@AlvinHo-0737

Yes Correct. That's why you did not experienced the issue in different App service instance. If you are planning to use Application Insights in current instance , you can still use the Node.js SDK integration & Azure Monitor to monitor the response times by referring to below sample & tweaking value of maxBatchIntervalMs :

https://github.com/shuanand/angularuniversalSSRApplicationInsight/blob/main/server.ts

Thanks for the confirmation!

1 Vote 1 ·

@04821556 @AlvinHo-0737 can you upvote @ShubhamAnand-5736 answer to benefit the greater community.

1 Vote 1 ·

done!

0 Votes 0 ·

Thank you @ShubhamAnand-5736 , you did a great job there. Everything still looks good after your solution.

1 Vote 1 ·