TrilonIO / aspnetcore-angular-universal

ASP.NET Core & Angular Universal advanced starter - PWA w/ server-side rendering for SEO, Bootstrap, i18n internationalization, TypeScript, unit testing, WebAPI REST setup, SignalR, Swagger docs, and more! By @TrilonIO
https://www.trilon.io
MIT License
1.46k stars 433 forks source link

Application Insights client-side implementation #63

Closed johnkattenhorn closed 7 years ago

johnkattenhorn commented 7 years ago

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 ?

AbrarJahin commented 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

AbrarJahin commented 7 years ago

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

johnkattenhorn commented 7 years ago

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.

AbrarJahin commented 7 years ago

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

johnkattenhorn commented 7 years ago

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.

AbrarJahin commented 7 years ago

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

MarkPieszak commented 7 years ago

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!

MarkPieszak commented 7 years ago

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.

johnkattenhorn commented 7 years ago

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.

MarkPieszak commented 7 years ago

@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(+).

johnkattenhorn commented 7 years ago

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.

MarkPieszak commented 7 years ago

Oh great! Working on that repo itself? Let me know what you guys need.

johnkattenhorn commented 7 years ago

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.

MarkPieszak commented 7 years ago

@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! 🎈

AbrarJahin commented 7 years ago

Sure.

Thanks @MarkPieszak 🥇