Azure Application Insights

前端也可以享受Application Insights功能

在先前談到使用Application Insights時候，大都是講Backend如何去加入Application Insights功能，不過，現在很多架構上，Backend被用於Web API，操作介面則大部分是以FrontEnd技術為主，這樣就無法使用到Application Insights功能?其實不然，使用前端技術時，同時也可以享用Applciation Insights，且使用起來還相當簡單

取得Javascript files

前端主要的Application Insights主要是透過javascript去監控我們網頁，利用這方式可以追蹤每個網頁被點擊時間，同時，也可以追蹤網頁的Loading時間，當然，若有發生相關Javascript錯誤，基本上都可以被抓出來，要取得這段程式碼片段，可以進入Azure你的Application Insights裡面

1
2
3
4
5
6
7
8
9
10
<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
    }({
        instrumentationKey:"xxxxxxx"
    });
       
    window.appInsights=appInsights;
    appInsights.trackPageView();
</script>

把這個程式碼片段放入</head>之前，並在instrumentationKey填入屬於你自己的Application Insights的Key就可以，基本上這樣就可以開始監控你的前端程式了，像是在C#中，我們可以去增加Application Insights的客製化屬性，或是初始化telemetry，在前端是否可以呢?這當然是沒問題，我們可以透過addTelemetryInitializer，增加properties

1
2
3
4
5
6
appInsights.queue.push(function () {
   appInsights.context.addTelemetryInitializer(function (envelope) {
        var telemetryItem = envelope.data.baseData;
        telemetryItem.properties = telemetryItem.properties || {};
        telemetryItem.properties["ApplicationName"] = "TEST";});
});

完整寫法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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
    }({
        instrumentationKey:"KEY"
    });
    window.appInsights = appInsights;
    appInsights.queue.push(function () {
        appInsights.context.addTelemetryInitializer(function (envelope) {
            var telemetryItem = envelope.data.baseData;
            telemetryItem.properties = telemetryItem.properties || {};
            telemetryItem.properties["ApplicationName"] = "TEST";});
    });
 appInsights.trackPageView();
</script>

效果

不敢保證所有前端問題Application Insights都一定可以抓到，但是，目前所有網頁行為與錯誤是都可以抓到，這時候就要擔心使用量是否足夠我們使用

如果想要找出網頁的相關性，也是可以用這方式去做，就可以幫忙蒐集到資料了，這算是非常簡單且又不會影響到程式的方式之一呢

Share