您现在访问的是微软AZURE全球版技术文档网站,若需要访问由世纪互联运营的MICROSOFT AZURE中国区技术文档网站,请访问 https://docs.azure.cn.

快速入门:开始使用 Azure Monitor Application Insights 监视你的网站

在本快速入门中,你将了解如何将开源 Application Insights JavaScript SDK 添加到你的网站。 你还将了解如何更好地了解你的网站访问者的客户端/浏览器体验。

使用 Azure Monitor Application Insights,可轻松监视网站的可用性、性能和使用情况。 还可以快速确定并诊断应用程序中的错误,而无需等待用户报告这些错误。 Application Insights 提供了服务器端监视和客户端/浏览器端监视功能。

先决条件

  • 具有活动订阅的 Azure 帐户。 免费创建帐户
  • 可以将 Application Insights JavaScript SDK 添加到其中的网站。

启用 Application Insights

Application Insights 可以从任何连接 Internet 的应用程序收集遥测数据,不管是在本地运行还是在云中运行。 使用以下步骤查看此数据:

  1. 登录到 Azure 门户

  2. 选择“创建资源” > “管理工具” > “Application Insights”。

    备注

    如果这是你第一次创建 Application Insights 资源,请参阅创建 Application Insights 资源

  3. 显示配置框后,请使用下表填写输入字段:

    设置 说明
    名称 全局唯一值 标识所监视的应用的名称。
    资源组 myResourceGroup 用于托管 Application Insights 数据的新资源组的名称。 可创建新的资源组或使用现有资源组。
    位置 美国东部 选择离你近的位置或离托管应用的位置近的位置。
  4. 选择“创建” 。

创建一个 HTML 文件

  1. 在本地计算机上创建名为 hello_world.html 的文件。 对于本示例,请在 C 驱动器的根目录中创建该文件,即 C:\hello_world.html

  2. 复制以下脚本并将其粘贴到 hello_world.html 中:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Azure Monitor Application Insights</title>
    </head>
    <body>
    <h1>Azure Monitor Application Insights Hello World!</h1>
    <p>You can use the Application Insights JavaScript SDK to perform client/browser-side monitoring of your website. To learn about more advanced JavaScript SDK configurations, visit the <a href="https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md" title="API Reference">API reference</a>.</p>
    </body>
    </html>
    

配置 Application Insights SDK

  1. 选择 “概述”,然后复制应用程序的 连接字符串。 在此示例中,我们只需要连接字符串 InstrumentationKey=00000000-0000-0000-0000-000000000000; 的“Instrumentation key”部分。

    包含检测密钥和连接字符串的概述页的屏幕截图。

  2. 将以下脚本添加到 hello_world.html 文件中的结束标记 </head> 之前:

    <script type="text/javascript">
    !function(T,l,y){var S=T.location,k="script",D="instrumentationKey",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"}(),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,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 Configuration
        connectionString:"InstrumentationKey=YOUR_INSTRUMENTATION_KEY_GOES_HERE;" 
        /* ...Other Configuration Options... */
    }});
    </script>
    

    备注

    当前代码片段(上面列出的)为版本“5”,该版本在代码片段中编码为 sv:"#",可在 GitHub 上找到当前版本和配置详细信息

  3. 编辑 hello_world.html,添加检测密钥。

  4. 在本地浏览器会话中打开 hello_world.html。 此操作创建单个页面视图。 可以刷新浏览器,生成多个测试性的页面视图。

在 Azure 门户中监视网站

  1. 在 Azure 门户中重新打开 Application Insights“概览”页,查看当前正在运行的应用程序的详细信息。 “概述”页面是你检索你的检测密钥的位置。

    概览页上的四个默认图表局限于服务器端应用程序数据。 由于我们要检测客户端/浏览器端与 JavaScript SDK 的交互,因此该特定视图不会应用,除非我们也安装了服务器端 SDK。

  2. 选择“日志”。 此操作将打开“Logs”,该软件提供丰富的查询语言,可用于分析 Application Insights 收集的所有数据。 若要查看与客户端浏览器请求相关的数据,请运行以下查询:

    // average pageView duration by name
    let timeGrain=1s;
    let dataset=pageViews
    // additional filters can be applied here
    | where timestamp > ago(15m)
    | where client_Type == "Browser" ;
    // calculate average pageView duration for all pageViews
    dataset
    | summarize avg(duration) by bin(timestamp, timeGrain)
    | extend pageView='Overall'
    // render result in a chart
    | render timechart
    

    一段时间内用户请求日志分析分析图的屏幕截图。

  3. 返回到“概览”页。 在“调查”标题下,选择“性能”,然后选择“浏览器”选项卡。此时会显示与网站性能相关的指标。 有一个用于分析网站中故障和异常的相应视图。 可以选择“示例”来访问端到端事务详细信息

    含览器指标图形的“性能”选项卡的屏幕截图。

  4. 在 Application Insights 主菜单的“使用情况”标题下选择“用户”,开始探索用户行为分析工具 。 由于我们是在单台计算机中进行测试,因此只会看到一个用户的数据。

  5. 对于包含多个页面的复杂网站,可以使用用户流工具跟踪访客在浏览网站各个部分时采用的路径。

若要了解更多用于监视网站的高级配置,请参阅 JavaScript SDK API 参考

清理资源

如果打算继续学习其他快速入门或教程,请不要清理在本快速入门中创建的资源。 否则,请在 Azure 门户中执行以下步骤,删除本快速入门创建的所有资源。

备注

如果使用了现有资源组,则以下说明不适用。 只需删除单个 Application Insights 资源即可。 请记住,在删除某个资源组时,属于该组的所有底层资源也会一并删除。

  1. 在 Azure 门户的左侧菜单中选择“资源组”,然后选择“myResourceGroup”或临时资源组的名称。
  2. 在资源组页上选择“删除” ,在文本框中输入 myResourceGroup,然后选择“删除” 。

后续步骤