This blog post is part of a series on "deploying a Spring Boot and Angular application on Azure", here is the full list of posts:
Creating a Spri...
For further actions, you may consider blocking this person and/or reporting abuse
Hi, thanks for the above article
I am trying to integrate azure insight to my angular-7 application.
this are any questions, any help is appreciated.
Is there any difference by adding the insight through npm vs html script in header as mentioned in the azure insight doc.
One of my requirement is that to track how long a user stayed(duration) in each
page and what all event user clicked. how track this.
Thanks
I would rather use a package manager than adding the HTML script manually, especially as you already have one set up with Angular. It will be easier to manage versions, etc... And also this allows to have everything in one or several bundles packaged by Webpack, so better performance in the end.
What I do in this post should give you the time the user stayed on your application, and give you events for each route change: that seems enough, but if you want more events (not just route changes) you can use the same principle on any user action. Of course, if you abuse this, you might reach a quota on Azure Insights, and also that might send quite a lot of user requests (might slow down the app, maybe some users will be concerned about this, so this opens up quite a lot of other issues).
Thanks for the update. I installed the library.
where I need to configure the instrumentation key(the first code snippet)?
how to add the service you created(the second code) ?
Thanks in advance.
As you can check in this commit I stored the key (look for
instrumentationKey) in a dedicated Angular service. We could of course do better, but that key will be shared publicly at some point (as it is used to send the data), and it's probably not going to change much, so that solution should be good enough for most people.Once the service is created, it is just a normal Angular service, so you need to inject it wherever you need it. In the example, it is done in the constructor of the Account service -> you just reference the Insight Service there, and then you can use it.
Thanks for the help, basic implementation is just done now with login, will test tomorrow morning and let you know the result, thanks
Hope every thing looks good expect below issue
passed all param for setAuthenticatedUserContext(validatedId, accountId, boolean) boolean is for saving the details in cookie,. we have two unique ides for the application so passed both in validateId and in accountId boolean made as true. not sure this is a correct approach
the page name is captured as with component name like "HomeComponent home".
the page view duration capture is not accurate, same second is captured for all pages. any help is appreciated
I downloaded your Angular Demo from github.com/dmnk/application-insigh... and installed all the NPM packages and then ran the project but I get this error "ERROR TypeError: this.appInsights.loadAppInsights is not a function" from Line 19 in the app.component.ts file?
I would love to get this working and would appreciate any help! Thanks
I understand you installed the packages, but did you write the code from the blog post? The first thing we do is defining the
appInsightsfunction, and given your error is looks like it is not yet in your code.If that can help, you can see all the changes I did in my code in this commit: github.com/jdubois/spring-on-azure...
How to get errors in console of web app to application insights?