快速入门:开始使用 Azure Monitor Application Insights 监视你的网站Quickstart: Start monitoring your website with Azure Monitor Application Insights

在本快速入门中,你将了解如何将开源 Application Insights JavaScript SDK 添加到你的网站。In this quickstart, you learn to add the open-source Application Insights JavaScript SDK to your website. 你还将了解如何更好地了解你的网站访问者的客户端/浏览器体验。You also learn how to better understand the client/browser-side experience for visitors to your website.

使用 Azure Monitor Application Insights,可轻松监视网站的可用性、性能和使用情况。With Azure Monitor Application Insights, you can easily monitor your website for availability, performance, and usage. 还可以快速确定并诊断应用程序中的错误,而无需等待用户报告这些错误。You can also quickly identify and diagnose errors in your application without waiting for a user to report them. Application Insights 提供了服务器端监视和客户端/浏览器端监视功能。Application Insights provides both server-side monitoring and client/browser-side monitoring capabilities.

先决条件Prerequisites

  • 具有活动订阅的 Azure 帐户。An Azure account with an active subscription. 创建试用帐户Create an account for trial.
  • 可以将 Application Insights JavaScript SDK 添加到其中的网站。A website to which you can add the Application Insights JavaScript SDK.

启用 Application InsightsEnable Application Insights

Application Insights 可以从任何连接 Internet 的应用程序收集遥测数据,不管是在本地运行还是在云中运行。Application Insights can gather telemetry data from any internet-connected application that's running on-premises or in the cloud. 使用以下步骤查看此数据:Use the following steps to view this data:

  1. 登录到 Azure 门户Sign in to the Azure portal.

  2. 选择“创建资源” > “管理工具” > “Application Insights”。Select Create a resource > Management tools > Application Insights .

    备注

    如果这是你第一次创建 Application Insights 资源,请参阅创建 Application Insights 资源If this is your first time creating an Application Insights resource, see Create an Application Insights resource.

  3. 显示配置框后,请使用下表填写输入字段:When the configuration box appears, use the following table to complete the input fields:

    设置Settings ValueValue 说明Description
    名称Name 全局唯一值Globally Unique Value 标识所监视的应用的名称。The name that identifies the app you're monitoring.
    资源组Resource Group MyResourceGroupmyResourceGroup 用于托管 Application Insights 数据的新资源组的名称。The name for the new resource group to host Application Insights data. 可创建新的资源组或使用现有资源组。You can create a new resource group or use an existing one.
    位置Location 中国北部China North 选择离你近的位置或离托管应用的位置近的位置。Choose a location near you, or near where your app is hosted.
  4. 选择“创建” 。Select Create .

创建一个 HTML 文件Create an HTML file

  1. 在本地计算机上创建名为 hello_world.html 的文件。On your local computer, create a file called hello_world.html. 对于本示例,请在 C 驱动器的根目录中创建该文件,即 C:\hello_world.htmlFor this example, create the file on the root of drive C so that it looks like C:\hello_world.html.

  2. 复制以下脚本并将其粘贴到 hello_world.html 中:Copy and paste the following script into 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 SDKConfigure Application Insights SDK

  1. 选择“概览” > “概要”,然后复制应用程序的“检测密钥”。Select Overview > Essentials , and then copy your application's Instrumentation Key .

    “新建 Application Insights 资源”窗体

  2. 将以下脚本添加到 hello_world.html 文件中的结束标记 </head> 之前:Add the following script to your hello_world.html file before the closing </head> tag:

    <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 Configuration
        instrumentationKey: "YOUR_INSTRUMENTATION_KEY_GOES_HERE",
    endpointUrl: "TelemetryChannel_Endpoint_Address"
        /* ...Other Configuration Options... */
    }});
    </script>
    
  3. 编辑 hello_world.html,添加检测密钥。Edit hello_world.html and add your instrumentation key.

  4. 在本地浏览器会话中打开 hello_world.htmlOpen hello_world.html in a local browser session. 此操作创建单个页面视图。This action creates a single page view. 可以刷新浏览器,生成多个测试性的页面视图。You can refresh your browser to generate multiple test-page views.

备注

你可以将 TelemetryChannel_Endpoint_Address 的占位符值替换为此文档中的 Azure 中国区域的实际终结点地址。You can replace the placeholder value for TelemetryChannel_Endpoint_Address with the actual endpoint address for Azure China region in this doc.

在 Azure 门户中监视网站Monitor your website in the Azure portal

  1. 在 Azure 门户中重新打开 Application Insights“概览”页,查看当前正在运行的应用程序的详细信息。Reopen the Application Insights Overview page in the Azure portal to view details of your currently running application. “概述”页面是你检索你的检测密钥的位置。The Overview page is where you retrieved your instrumentation key.

    概览页上的四个默认图表局限于服务器端应用程序数据。The four default charts on the overview page are scoped to server-side application data. 由于我们要检测客户端/浏览器端与 JavaScript SDK 的交互,因此该特定视图不会应用,除非我们也安装了服务器端 SDK。Because we're instrumenting the client/browser-side interactions with the JavaScript SDK, this particular view doesn't apply unless we also have a server-side SDK installed.

  2. 选择“Analytics”“应用程序映射”图标Select Analytics Application Map icon. 此操作将打开“Analytics”,该软件提供丰富的查询语言,可用于分析 Application Insights 收集的所有数据。This action opens Analytics , which provides a rich query language for analyzing all data collected by Application Insights. 若要查看与客户端浏览器请求相关的数据,请运行以下查询:To view data related to the client-side browser requests, run the following query:

    // 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. 返回到“概览”页。Go back to the Overview page. 在“调查”标题下选择“浏览器”,然后选择“性能” 。Under the Investigate header, select Browser , and then select Performance . 此时会显示与网站性能相关的指标。Metrics related to the performance of your website appear. 有一个用于分析网站中故障和异常的相应视图。There's a corresponding view for analyzing failures and exceptions in your website. 可以选择“示例”来访问端到端事务详细信息You can select Samples to access the end-to-end transaction details.

    “服务器指标”图

  4. 在 Application Insights 主菜单的“使用情况”标题下选择“用户”,开始探索用户行为分析工具On the main Application Insights menu, under the Usage header, select Users to begin exploring the user behavior analytics tools. 由于我们是在单台计算机中进行测试,因此只会看到一个用户的数据。Because we're testing from a single machine, we'll only see data for one user. 对于实时网站,用户的分布可能如下所示:For a live website, the distribution of users might look like this:

    用户图

  5. 对于包含多个页面的复杂网站,可以使用用户流工具跟踪访客在浏览网站各个部分时采用的路径。For a more complex website with multiple pages, you can use the User Flows tool to track the pathway that visitors take through the various parts of your website.

    用户流可视化

若要了解更多用于监视网站的高级配置,请参阅 JavaScript SDK API 参考To learn more advanced configurations for monitoring websites, see the JavaScript SDK API reference.

清理资源Clean up resources

如果打算继续学习其他快速入门或教程,请不要清理在本快速入门中创建的资源。If you plan to continue working with additional quickstarts or tutorials, don't clean up the resources created in this quickstart. 否则,请在 Azure 门户中执行以下步骤,删除本快速入门创建的所有资源。Otherwise, use the following steps to delete all resources created by this quickstart in the Azure portal.

备注

如果使用了现有资源组,则以下说明不适用。If you used an existing resource group, the following instructions won't work. 只需删除单个 Application Insights 资源即可。Instead, you can just delete the individual Application Insights resource. 请记住,在删除某个资源组时,属于该组的所有底层资源也会一并删除。Keep in mind that when you delete a resource group, all underyling resources that are members of that group are deleted too.

  1. 在 Azure 门户的左侧菜单中选择“资源组”,然后选择“myResourceGroup”或临时资源组的名称。On the left menu on the Azure portal, select Resource groups , and then select myResourceGroup or the name of your temporary resource group.
  2. 在资源组页上选择“删除”,在文本框中输入 myResourceGroup ,然后选择“删除”。On your resource group page, select Delete , enter myResourceGroup in the text box, and then select Delete .

后续步骤Next steps