【Microsoft Azure 的1024种玩法】五十二.基于Azure Application Insight对Web应用进行实时链路跟踪

【简介】

Application Insight是Azure Monitor 中的一个用于可用性监控的功能服务，Application Insight最大的功能点在于能对Web站点应用进行实时监控的同时还能提供APM应用程序性能管理，可以在最大的程度上面协助站点开发人员及网站运维人员全面了解用户访问应用站点所做的具体操作以及Web站点应用的性能及可用性，本篇文章主要是分享如何通过Application Insight来对我们Web应用站点进行实时监控

【前期文章】

【Microsoft Azure 的1024种玩法】一.一分钟快速上手搭建宝塔管理面板
【Microsoft Azure 的1024种玩法】二.基于Azure云平台的安全攻防靶场系统构建
【Microsoft Azure 的1024种玩法】三.基于Azure云平台构建Discuz论坛
【Microsoft Azure 的1024种玩法】四. 利用Azure Virtual machines 打造个人专属云盘，速度吊打某云盘
【Microsoft Azure 的1024种玩法】五.基于Azure Cloud Shell 一站式创建Linux VM
【Microsoft Azure 的1024种玩法】六.使用Azure Cloud Shell对Linux VirtualMachines 进行生命周期管理
【Microsoft Azure 的1024种玩法】七.Azure云端搭建部署属于自己的维基百科
【Microsoft Azure 的1024种玩法】八. 基于Azure云端轻松打造一款好用的私有云笔记
【Microsoft Azure 的1024种玩法】九. Microsoft Azure云端轻松构建部署PostgreSQL数据库
【Microsoft Azure 的1024种玩法】十. 基于Azure App Service 快速上手部署 ASP.NET Web 应用
【Microsoft Azure 的1024种玩法】十一.手动对Azure磁盘进行IOPS性能压力测试
【Microsoft Azure 的1024种玩法】十二. 使用Auzre cloud 安装搭建docker+vulhub靶场
【Microsoft Azure 的1024种玩法】十三.Azure cloud｜带你快速搭建DVWA靶场漏洞环境
【Microsoft Azure 的1024种玩法】十四.Azure DNS 在线域名委托解析操作指南
【Microsoft Azure 的1024种玩法】十五.通过Web浏览器对Auzre VM 服务器运维管理
【Microsoft Azure 的1024种玩法】十六.Cobaltstrike内网渗透工具在Azure Cloud中的部署使用
【Microsoft Azure 的1024种玩法】 十七.在Microsoft Azure上动手搭建专属私有文件同步服务]
【Microsoft Azure 的1024种玩法】 十八.快速创建Microsoft Azure SQL数据库初体验
【Microsoft Azure 的1024种玩法】 十九.使用Azure备份服务对虚拟机快速备份
【Microsoft Azure 的1024种玩法】 二十.Azure Multi-Factor Authentication多因素验证最佳实战
【Microsoft Azure 的1024种玩法】 二十一.利用Azure Blob Service 快速实现静态网站托管
【Microsoft Azure 的1024种玩法】 二十二.中国区Azure Cloud 多重身份验证最佳实践
【Microsoft Azure 的1024种玩法】 二十三.快速上手Azure Content Delivery Network 内容分发网络
【Microsoft Azure 的1024种玩法】二十四.通过Azure Front Door 的 Web 应用程序防火墙来对 OWASP TOP 10 威胁进行防御
【Microsoft Azure 的1024种玩法】 二十五.使用Azure CDN对Azure Blob 静态托管站点进行加速
【Microsoft Azure 的1024种玩法】二十六. 在Azure VM中手动部署Windows Admin Center管理平台
【Microsoft Azure 的1024种玩法】二十七. Azure Virtual Desktop虚拟桌面之快速创建配置（一）
【Microsoft Azure 的1024种玩法】二十八. 基于Azure Cloud搭建IPS入侵防御系统实现安全流量实时分析
【Microsoft Azure 的1024种玩法】二十九.基于Azure VM快速实现网络入侵检测 (IDS) 及网络安全监视 (NSM)
【Microsoft Azure 的1024种玩法】三十. 使用Azure Data Studio之快速上手连接管理Azure SQL 数据库（一）
【Microsoft Azure 的1024种玩法】三十一.使用Azure Logic App 创建基于计划定期执行邮件发送的自动化工作流
【Microsoft Azure 的1024种玩法】三十二. 利用 AzCopy来对Azure Blob Storage中的数据进行复制迁移
【Microsoft Azure 的1024种玩法】三十三.十分钟快速部署 Azure Kubernetes Service 群集
【Microsoft Azure 的1024种玩法】三十四.将本地数据文件快速迁移到Azure Blob云存储最佳实践
【Microsoft Azure 的1024种玩法】三十五.在Azure Virtual machines中手动部署Java Web
【Microsoft Azure 的1024种玩法】三十六.通过网络文件系统NFS协议快速将Blob 存储挂在Azure Virtual machines中
【Microsoft Azure 的1024种玩法】三十七.通过Azure Virtual Machines实现远程连接本地内网服务器（内网穿透）
【Microsoft Azure 的1024种玩法】三十八.通过Azure Function App函数应用实现对Azure Virtual Machines定时开关机
【Microsoft Azure 的1024种玩法】三十九.使用Auzre Media Services实现在线实时视频直播
【Microsoft Azure 的1024种玩法】四十.快速将阿里云DNS解析平滑迁移至Azure Zone实战操作
【Microsoft Azure 的1024种玩法】四十一. 将Windows Admin Center 网关注册到 Azure
【Microsoft Azure 的1024种玩法】四十二. 通过Windows Admin Center快速创建Azure Virtual Machines
【Microsoft Azure 的1024种玩法】四十三. 基于Azure云平台构建RTMP直播服务
【Microsoft Azure 的1024种玩法】四十五.在Azure中快速创建Azure AD Domain Services
【Microsoft Azure 的1024种玩法】四十六.将 Azure VM 实例添加到Azure AD Domain Service中
【Microsoft Azure 的1024种玩法】四十七.通过Azure Virtual machines搭建FTP应用服务
【Microsoft Azure 的1024种玩法】四十八.基于Azure Virtual Machines快速搭建SQL Server应用
【Microsoft Azure 的1024种玩法】四十九.在Azure中使用Azure VirtualMachines 搭建Microsoft SharePoint 2016
【Microsoft Azure 的1024种玩法】五十. 通过Azure文件共享将Azure File 挂载到本地机器实现文件实时共享
【Microsoft Azure 的1024种玩法】五十一.在Azure Virtual Machines 上装载 SMB Azure 文件共享
【Microsoft Azure 的1024种玩法】五十二.基于Azure Application Insight对Web应用进行实时链路跟踪

【操作步骤】

一.创建配置Application Insights服务

1.在菜单中搜索“Application Insights” 进入Application Insights资源

2.在Application Insights 页面中，点击“创建“

3.按照下列各图所示，去配置Application Insights，配置完毕后点击“查看+创建”

4.第一次创建会进行验证操作，验证完毕后，我们点击“创建” 去执行“创建”操作
5.如下图所示，正在创建部署Application Insights

6.配置完毕以后，我们点击“转到资源”

7.在资源配置里面，我们即可看到相关的Application Insights 配置页面，此处我们需要关注下这个“检测密钥” 后续我们会用到

二. 将Application Insights JS SDK 集成到需要监测的网站中

1. 参考复制如下代码，并将代码中的YOUR_INSTRUMENTATION_KEY_GOES_HERE替换成我们创建的Applictaion Insight服务里面的连接字串InstrumentationKey

<script type="text/javascript">!function(T,l,y){var S=T.location,u="script",k="instrumentationKey",D="ingestionendpoint",C="disableExceptionTracking",E="ai.device.",I="toLowerCase",b="crossOrigin",w="POST",e="appInsightsSDK",t=y.name||"appInsights";(y.name||T[e])&&(T[e]=t);var n=T[t]||function(d){var g=!1,f=!1,m={initialize:!0,queue:[],sv:"4",version:2,config:d};function v(e,t){var n={},a="Browser";return n[E+"id"]=a[I](),n[E+"type"]=a,n["ai.operation.name"]=S&&S.pathname||"_unknown_",n["ai.internal.sdkVersion"]="javascript:snippet_"+(m.sv||m.version),{time:function(){var e=new Date;function t(e){var t=""+e;return 1===t.length&&(t="0"+t),t}return e.getUTCFullYear()+"-"+t(1+e.getUTCMonth())+"-"+t(e.getUTCDate())+"T"+t(e.getUTCHours())+":"+t(e.getUTCMinutes())+":"+t(e.getUTCSeconds())+"."+((e.getUTCMilliseconds()/1e3).toFixed(3)+"").slice(2,5)+"Z"}(),iKey:e,name:"Microsoft.ApplicationInsights."+e.replace(/-/g,"")+"."+t,sampleRate:100,tags:n,data:{baseData:{ver:2}}}}var h=d.url||y.src;if(h){function a(e){var t,n,a,i,r,o,s,c,p,l,u;g=!0,m.queue=[],f||(f=!0,t=h,s=function(){var e={},t=d.connectionString;if(t)for(var n=t.split(";"),a=0;a<n.length;a++){var i=n[a].split("=");2===i.length&&(e[i[0][I]()]=i[1])}if(!e[D]){var r=e.endpointsuffix,o=r?e.location:null;e[D]="https://"+(o?o+".":"")+"dc."+(r||"services.visualstudio.com")}return e}(),c=s[k]||d[k]||"",p=s[D],l=p?p+"/v2/track":config.endpointUrl,(u=[]).push((n="SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details)",a=t,i=l,(o=(r=v(c,"Exception")).data).baseType="ExceptionData",o.baseData.exceptions=[{typeName:"SDKLoadFailed",message:n.replace(/\./g,"-"),hasFullStack:!1,stack:n+"\nSnippet failed to load ["+a+"] -- Telemetry is disabled\nHelp Link: https://go.microsoft.com/fwlink/?linkid=2128109\nHost: "+(S&&S.pathname||"_unknown_")+"\nEndpoint: "+i,parsedStack:[]}],r)),u.push(function(e,t,n,a){var i=v(c,"Message"),r=i.data;r.baseType="MessageData";var o=r.baseData;return o.message='AI (Internal): 99 message:"'+("SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details) ("+n+")").replace(/\"/g,"")+'"',o.properties={endpoint:a},i}(0,0,t,l)),function(e,t){if(JSON){var n=T.fetch;if(n&&!y.useXhr)n(t,{method:w,body:JSON.stringify(e),mode:"cors"});else if(XMLHttpRequest){var a=new XMLHttpRequest;a.open(w,t),a.setRequestHeader("Content-type","application/json"),a.send(JSON.stringify(e))}}}(u,l))}function i(e,t){f||setTimeout(function(){!t&&m.core||a()},500)}var e=function(){var n=l.createElement(u);n.src=h;var e=y[b];return!e&&""!==e||"undefined"==n[b]||(n[b]=e),n.onload=i,n.onerror=a,n.onreadystatechange=function(e,t){"loaded"!==n.readyState&&"complete"!==n.readyState||i(0,t)},n}();y.ld<0?l.getElementsByTagName("head")[0].appendChild(e):setTimeout(function(){l.getElementsByTagName(u)[0].parentNode.appendChild(e)},y.ld||0)}try{m.cookie=l.cookie}catch(p){}function t(e){for(;e.length;)!function(t){m[t]=function(){var e=arguments;g||m.queue.push(function(){m[t].apply(m,e)})}}(e.pop())}var n="track",r="TrackPage",o="TrackEvent";t([n+"Event",n+"PageView",n+"Exception",n+"Trace",n+"DependencyData",n+"Metric",n+"PageViewPerformance","start"+r,"stop"+r,"start"+o,"stop"+o,"addTelemetryInitializer","setAuthenticatedUserContext","clearAuthenticatedUserContext","flush"]),m.SeverityLevel={Verbose:0,Information:1,Warning:2,Error:3,Critical:4};var s=(d.extensionConfig||{}).ApplicationInsightsAnalytics||{};if(!0!==d[C]&&!0!==s[C]){method="onerror",t(["_"+method]);var c=T[method];T[method]=function(e,t,n,a,i){var r=c&&c(e,t,n,a,i);return!0!==r&&m["_"+method]({message:e,url:t,lineNumber:n,columnNumber:a,error:i}),r},d.autoExceptionInstrumented=!0}return m}(y.cfg);(T[t]=n).queue&&0===n.queue.length&&n.trackPageView({})}(window,document,{src: "https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js", // The SDK URL Source//name: "appInsights", // Global SDK Instance name defaults to "appInsights" when not supplied//ld: 0, // Defines the load delay (in ms) before attempting to load the sdk. -1 = block page load and add to head. (default) = 0ms load after timeout,//useXhr: 1, // Use XHR instead of fetch to report failures (if available),//crossOrigin: "anonymous", // When supplied this will add the provided value as the cross origin attribute on the script tag cfg: { // Application Insights ConfigurationinstrumentationKey: "YOUR_INSTRUMENTATION_KEY_GOES_HERE"/* ...Other Configuration Options... */}});</script>

2.关于Applictaion Insight服务里面的连接字串InstrumentationKey我们可以通过下图的方式进行查看

3.我们将已经替换连接字符串的Application Insights JS SDK 代码复制到我们应用页面中的代码前

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="text/javascript">!function(T,l,y){var S=T.location,k="script",D="connectionString",C="ingestionendpoint",I="disableExceptionTracking",E="ai.device.",b="toLowerCase",w="crossOrigin",N="POST",e="appInsightsSDK",t=y.name||"appInsights";(y.name||T[e])&&(T[e]=t);var n=T[t]||function(d){var g=!1,f=!1,m={initialize:!0,queue:[],sv:"5",version:2,config:d};function v(e,t){var n={},a="Browser";return n[E+"id"]=a[b](),n[E+"type"]=a,n["ai.operation.name"]=S&&S.pathname||"_unknown_",n["ai.internal.sdkVersion"]="javascript:snippet_"+(m.sv||m.version),{time:function(){var e=new Date;function t(e){var t=""+e;return 1===t.length&&(t="0"+t),t}return e.getUTCFullYear()+"-"+t(1+e.getUTCMonth())+"-"+t(e.getUTCDate())+"T"+t(e.getUTCHours())+":"+t(e.getUTCMinutes())+":"+t(e.getUTCSeconds())+"."+((e.getUTCMilliseconds()/1e3).toFixed(3)+"").slice(2,5)+"Z"}(),name:"Microsoft.ApplicationInsights."+e.replace(/-/g,"")+"."+t,sampleRate:100,tags:n,data:{baseData:{ver:2}}}}var h=d.url||y.src;if(h){function a(e){var t,n,a,i,r,o,s,c,u,p,l;g=!0,m.queue=[],f||(f=!0,t=h,s=function(){var e={},t=d.connectionString;if(t)for(var n=t.split(";"),a=0;a<n.length;a++){var i=n[a].split("=");2===i.length&&(e[i[0][b]()]=i[1])}if(!e[C]){var r=e.endpointsuffix,o=r?e.location:null;e[C]="https://"+(o?o+".":"")+"dc."+(r||"services.visualstudio.com")}return e}(),c=s[D]||d[D]||"",u=s[C],p=u?u+"/v2/track":d.endpointUrl,(l=[]).push((n="SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details)",a=t,i=p,(o=(r=v(c,"Exception")).data).baseType="ExceptionData",o.baseData.exceptions=[{typeName:"SDKLoadFailed",message:n.replace(/\./g,"-"),hasFullStack:!1,stack:n+"\nSnippet failed to load ["+a+"] -- Telemetry is disabled\nHelp Link: https://go.microsoft.com/fwlink/?linkid=2128109\nHost: "+(S&&S.pathname||"_unknown_")+"\nEndpoint: "+i,parsedStack:[]}],r)),l.push(function(e,t,n,a){var i=v(c,"Message"),r=i.data;r.baseType="MessageData";var o=r.baseData;return o.message='AI (Internal): 99 message:"'+("SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details) ("+n+")").replace(/\"/g,"")+'"',o.properties={endpoint:a},i}(0,0,t,p)),function(e,t){if(JSON){var n=T.fetch;if(n&&!y.useXhr)n(t,{method:N,body:JSON.stringify(e),mode:"cors"});else if(XMLHttpRequest){var a=new XMLHttpRequest;a.open(N,t),a.setRequestHeader("Content-type","application/json"),a.send(JSON.stringify(e))}}}(l,p))}function i(e,t){f||setTimeout(function(){!t&&m.core||a()},500)}var e=function(){var n=l.createElement(k);n.src=h;var e=y[w];return!e&&""!==e||"undefined"==n[w]||(n[w]=e),n.onload=i,n.onerror=a,n.onreadystatechange=function(e,t){"loaded"!==n.readyState&&"complete"!==n.readyState||i(0,t)},n}();y.ld<0?l.getElementsByTagName("head")[0].appendChild(e):setTimeout(function(){l.getElementsByTagName(k)[0].parentNode.appendChild(e)},y.ld||0)}try{m.cookie=l.cookie}catch(p){}function t(e){for(;e.length;)!function(t){m[t]=function(){var e=arguments;g||m.queue.push(function(){m[t].apply(m,e)})}}(e.pop())}var n="track",r="TrackPage",o="TrackEvent";t([n+"Event",n+"PageView",n+"Exception",n+"Trace",n+"DependencyData",n+"Metric",n+"PageViewPerformance","start"+r,"stop"+r,"start"+o,"stop"+o,"addTelemetryInitializer","setAuthenticatedUserContext","clearAuthenticatedUserContext","flush"]),m.SeverityLevel={Verbose:0,Information:1,Warning:2,Error:3,Critical:4};var s=(d.extensionConfig||{}).ApplicationInsightsAnalytics||{};if(!0!==d[I]&&!0!==s[I]){var c="onerror";t(["_"+c]);var u=T[c];T[c]=function(e,t,n,a,i){var r=u&&u(e,t,n,a,i);return!0!==r&&m["_"+c]({message:e,url:t,lineNumber:n,columnNumber:a,error:i}),r},d.autoExceptionInstrumented=!0}return m}(y.cfg);function a(){y.onInit&&y.onInit(n)}(T[t]=n).queue&&0===n.queue.length?(n.queue.push(a),n.trackPageView({})):a()}(window,document,{src: "https://js.monitor.azure.com/scripts/b/ai.2.min.js", // The SDK URL Source// name: "appInsights", // Global SDK Instance name defaults to "appInsights" when not supplied// ld: 0, // Defines the load delay (in ms) before attempting to load the sdk. -1 = block page load and add to head. (default) = 0ms load after timeout,// useXhr: 1, // Use XHR instead of fetch to report failures (if available),crossOrigin: "anonymous", // When supplied this will add the provided value as the cross origin attribute on the script tag// onInit: null, // Once the application insights instance has loaded and initialized this callback function will be called with 1 argument -- the sdk instance (DO NOT ADD anything to the sdk.queue -- As they won't get called)cfg: { // Application Insights ConfigurationconnectionString: "InstrumentationKey=42715ff2-9038-41d1-98bd-533357349ade;IngestionEndpoint=https://eastasia-0.in.applicationinsights.azure.com/;LiveEndpoint=https://eastasia.livediagnostics.monitor.azure.com/"/* ...Other Configuration Options... */}});</script>
</head>
<body>this is test !!!!!
</body>
</html>

4.Application Insights JS SDK 代码复制到我们应用页面中的代码前，最终如下图所示：

5.配置完毕以后，我们按F12进入浏览器工具里，找到Network—Track——Headers 当Status Code为200时 证明我们的配置已经配置成功了

三.查看Application Insights指标数据

1.我们返回到我们创建的Application Insights中，找到“正在监视”——”指标“ 从指标中筛选相关的范围以及指标命名空间和度量值，如图所示为我们配置的有关关于Application Insights指标数据