-
Notifications
You must be signed in to change notification settings - Fork 18
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[BUG] Incompatible with Angular Hydration #117
Comments
This sounds like an issue with Zone.js and not Application Insights...
We only create timers once we have received and batched events (ie. they are waiting to be sent), we can't
Changing to 10ms is not recommended as this will cause excessive network connections. On the flushComplete, yes this is a known issue and we are in the process of putting the foundations in place to be able to correctly call the callback. The signature exists for the extension associated with the internal SDK, portions of which are now on GitHub. So for now there is no (easy) solution for that option. |
Doing a quick search on Zone.Js it appears that you need to be using NgZone's to identify when you want the timer operations to be monitored and when you don't https://indepth.dev/posts/1513/from-zone-js-to-zoneless-angular-and-back-how-it-all-works And this summary from another site sums up my original thoughts, so your application should manage these transitions between your re-hydration and any AI usage. In a Nutshell: How Does Zone.js Work?Zone.js patches all common async APIs like setTimeout, setInterval, the promise API, etc. to keep track of all async operations. Here are the basic concepts you should understand:Zone is a mechanism for intercepting and keeping track of asynchronous work. |
@MSNev appreciate you stepping in and providing your insight My concern is that this is documented and advertised as functional with Angular and documentation is provided by Microsoft that details how this integration can be performed: This is out-of-the-box ApplicationInsights and out-of-the-box Angular (with hydration enabled), and if there's an issue with this configuration it seems like something ought to be fixed. I think part of the struggle here is that I've attempted to put ApplicationInsight's timeouts into another zone, however, because of the way the application is architected this has proven to be difficult, and that's why I'm posting here to see if this falls under ApplicationInsight's purview. At the very least, the thing that worries me is the inability for me to configure there to be no timeout - that Insights creates a non-negotiable ten second timeout on startup is something that config allows no work-around for.
I know this is not recommended, but was part of my effort to prevent it from creating timeouts - at least the one that is created on startup.
Understood - poor wording on my part, but what I'm trying to get at is I'm looking for some level of control over these timeouts, especially the one created on startup. |
To clarify, and if it helps, I'm only looking for a way to get ApplicationInsights to play nice with hydration so that it can get to a stable state - in other words, I only need the page to initialize successfully, and past that it's ok if it keeps behaving as usual. Is that a concern that would be handled here, or do you still think that may be an issue with zonejs? |
As not everyone enables hydration, how do you suggest that we cause a dependency on zones (and different versions of zones) when not everyone uses them? Moving this issue to the angular plugin repo to see if anyone from the community has any ideas (ie. as we are not the angular experts)
👍 This would be ideal, however, there is no-one currently on the ApplicationInsights teams who currently have this level knowledge about Angular zones.
While we currently don't have any "override" for the timeouts in ApplicationInsights, v3.x is now using a library which would allow us to introduce the option. But in the meantime, Simplistically, the "first" timer will be getting created as part of the first The only other option (which would still have the same time issue) would be to add a telemetry initializer to block (return false from the callback) the event (page view and any XHR / fetch requests) and then "replay" (calling track) when your ready... The only other possibility might be to create a new plugin which in it's |
However, the "above" plugin would affect "ALL" events getting reported -- I'm not sure if every application / usage for every event would want that -- maybe it would. |
Not nice :-( Technically, you should only need to one in the Why (should) this work? Assuming that no plugin "caches" the event being processed and continues "processing" later (normally via a |
Thanks @MSNev any of those solutions sound good to me. I will say, oddly, I didn't get this working by only wrapping process telemetry. In my tests, new ApplicationInsights had to be wrapped in the zone, as well. |
That is odd.... I've tagged as an enhancement (so it won't go stale and get auto closed) and I've also created a new zone support tag as it sounds like this is going to become an increasing important change. |
Description/Screenshot
https://angular.io/guide/hydration
Angular offers a new feature for non-destructive client side rehydration. This allows the SSR to serve the page to the client, and the client to take the DOM and only partially recreate the DOM and listeners based on what Angular automatically to have been changed.
What I found was that ApplicationInsights-JS schedules a timeout that negatively impact Zone.js ability to put the page in a "stable" condition.
With ApplicationInsights and hydration enabled, page-load times averaged > 10 seconds. With it disabled, page loads were much more responsive, averaging less than 5 seconds..
Steps to Reproduce
Create an Angular application. Enable SSR and hydration using the following link as a guide: https://angular.io/guide/hydration
Add ApplicationInsights-JS using this guide : https://learn.microsoft.com/en-us/azure/azure-monitor/app/javascript-framework-extensions?tabs=react
Observe load time difference with ApplicationInsights turned on, vs turned off. There will be, at minimum, a ten second difference in total load times before you get the console message confirming hydration.
Expected behavior
ApplicationInsights does not create timeouts, or offers the ability to avoid them via config, or uses another method to avoid interrupting Angular's Zone.js.
Additional context
Other steps taken:
ApplicationInsights-JS/channels/applicationinsights-channel-js/src /Sender.ts
on line 1013 a default timeout is created that uses the max value of your batch interval or the retry interval. This will default to the retry interval on init, which is default 10 seconds.The text was updated successfully, but these errors were encountered: