logo头像

Edward.K Thinking

前端也可以享受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都一定可以抓到,但是,目前所有網頁行為與錯誤是都可以抓到,這時候就要擔心使用量是否足夠我們使用

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

上一篇