Closed johnkattenhorn closed 7 years ago
As far as I know, it is already working in this project and it is already configured.
This feature is working for server side code.
And Angular2 is working in client side. It needs only some REST API to communicate with the server.
So, for those API calls, you will get Application Insights
.
I hope you have your answer @johnkattenhorn
Please have a look in here-
https://docs.microsoft.com/en-us/azure/application-insights/app-insights-asp-net
https://docs.microsoft.com/en-us/azure/application-insights/app-insights-javascript
You can find insight option for REST API here @johnkattenhorn
Sorry I didn't make myself very clear, I want to use Application Insights client side Angular 2. It seems the library in the documentation refers too is still Angular 1. I'll see if I can convert it easily enough.
Sorry for the interruption.
Can u please share the code you are referring to, please?
I am sorry for not finding or understanding the place or code you are referring to @johnkattenhorn
It's currently not implemented client-side in the template, only server side. I was just asking if there was anyone who had already implemented this so that we had appinsights both server side and client side.
As far as I know there is no such thing available for client side with angular.
If anything available in your knowledge, please share the link please so that we can integrate that.
Thanks @johnkattenhorn
Looking at the Application Insights example from Angular1.x, it looks like you need to do a few things, but we might be able to make it work.
Add the MS insights code onto the bottom of the _layout.cshtml page
<!--
To collect end-user usage analytics about your application,
insert the following script into each page you want to track.
Place this code immediately before the closing </head> tag,
and before any other scripts. Your first data will appear
automatically in just a few seconds.
-->
<script type="text/javascript">
var appInsights=window.appInsights||function(config){
function i(config){t[config]=function(){var i=arguments;t.queue.push(function(){t[config].apply(t,i)})}}var t={config:config},u=document,e=window,o='script',s='AuthenticatedUserContext',h='start',c='stop',l='Track',a=l+'Event',v=l+'Page',y=u.createElement(o),r,f;y.src=config.url||'https://az416426.vo.msecnd.net/scripts/a/ai.0.js';u.getElementsByTagName(o)[0].parentNode.appendChild(y);try{t.cookie=u.cookie}catch(p){}for(t.queue=[],t.version='1.0',r=['Event','Exception','Metric','PageView','Trace','Dependency'];r.length;)i('track'+r.pop());return i('set'+s),i('clear'+s),i(h+a),i(c+a),i(h+v),i(c+v),i('flush'),config.disableExceptionTracking||(r='onerror',i('_'+r),f=e[r],e[r]=function(config,i,u,e,o){var s=f&&f(config,i,u,e,o);return s!==!0&&t['_'+r](config,i,u,e,o),s}),t
}({});
window.appInsights=appInsights;
</script>
Now we need a basic InsightService: (add it to the index Barrel in /shared)
import { isBrowser } from 'angular2-universal';
import { Injectable } from '@angular/core';
@Injectable()
export class InsightLoggingService {
logCustomEvent(fileName: string, methodName: string, eventName: string, msg: string, customData: {}, numericParams: {}): void {
if (isBrowser) {
(<any>window).appInsights.trackEvent(eventName, customData, numericParams);
}
};
}
Now add it to your app.common.module
(so it's both in server&client automatically, but we're just ignoring the server rendered app build with isBrowser)
Then I'd imagine you could just use it like so, in a Component:
import { LoggingService } from './app-shared';
@Component({
// ....
})
export class SomeComponent {
constructor(private loggingService: LoggingService) { }
ngOnInit () {
this.loggingService.logCustomEvent('SomeComponent', 'OnInit', 'Testing Angular2 - CustomEvent', 'Test Message', customData, numParams);
}
}
You can see here, we did everything manually, but you could also hook this into RoutingEvents (for example you could add it in here, on NavigationEnd), and just do all of this here, with the data generate through each Routing event. You could make this as simple or detailed as you'd like!
I'll be working on making an Ng-library here:
https://github.com/MarkPieszak/angular-application-insights
so it can just be npm install
'd and added to your root NgModule that way.
That's awesome @MarkPieszak thanks! Feel bad now, given you more stuff to do :-)
I'd gladly test, give feedback whilst I get up to speed with Angular 2.
@johnkattenhorn Not a problem, it's all in good fun 👍
I'll definitely need help testing to make sure it works! I just updated the repo with extremely basic stuff, still nothing on npm
but hopefully soon I'll have something you can mess around with and see if it works. It'll be easy to contribute to it as well (as it's really just a Service) so if something is off you'll be able to tweak it and we can publish the fix quickly :)
Let me know how that implementation above works, that's what I'm going to start off adding into this module. Just want it to be easier for future people to implement Application insights w ng2(+).
FYI, one of our dev's is actively working on this https://github.com/MarkPieszak/angular-application-insights and we will report back there the work we are doing.
Oh great! Working on that repo itself? Let me know what you guys need.
Yep, we will split at the work from our project and PR into the new repo once we have it working, making progress today on page tracking.
@johnkattenhorn @abrarjahin https://github.com/MarkPieszak/angular-application-insights if you haven't seen it, we went 2.0 with the library, works with Angular 4+ and AoT now. Let me know over there if any issues come up for you guys! 🎈
Sure.
Thanks @MarkPieszak 🥇
Does anyone have any guidance or advice for implementing Application Insights on the client-side, I asked this question here https://github.com/aspnet/JavaScriptServices/issues/565 but I can't even make the basics work, it's down to my experience with Angular 2 I think.
I'm really after the browser, user agent, page tracking telemetry that you get with MVC etc.
I'm working on it so if I turn out something which works I'll gladly share here, had anyone beaten me to this ?