開始監視 Node.js Web 應用程式Start Monitoring Your Node.js Web Application

Azure Application Insights 可讓您輕鬆監視 Web 應用程式的可用性、效能和使用情形。With Azure Application Insights, you can easily monitor your web application for availability, performance, and usage. 還可讓您快速識別並診斷應用程式的錯誤,不必等使用者回報。You can also quickly identify and diagnose errors in your application without waiting for a user to report them. 從 0.20 版 SDK 開始,您可以監視常見的第三方套件,包括 MongoDB、MySQL 和 Redis。With the version 0.20 SDK release onward, you can monitor common third-party packages, including MongoDB, MySQL, and Redis.

本快速入門引導您將 0.22 版 Application Insights SDK for Node.js 新增至現有的 Node.js Web 應用程式。This quickstart guides you through adding the version 0.22 Application Insights SDK for Node.js to an existing Node.js web application.

必要條件Prerequisites

若要完成本快速入門:To complete this quickstart:

  • 您需要 Azure 訂用帳戶和現有的 Node.js Web 應用程式。You need an Azure Subscription and an existing Node.js web application.

如果您沒有 Node.js Web 應用程式,請依照建立 Node.js Web 應用程式快速入門來建立。If you don't have a Node.js web application, you can create one by following the Create a Node.js web app quickstart.

如果您沒有 Azure 訂用帳戶,請在開始前建立免費帳戶If you don't have an Azure subscription, create a free account before you begin.

登入 Azure 入口網站Sign in to the Azure portal

登入 Azure 入口網站Sign in to the Azure portal.

啟用 Application InsightsEnable Application Insights

Application Insights 可以從任何連上網際網路的應用程式收集遙測資料,而不論應用程式在內部部署或雲端中執行。Application Insights can gather telemetry data from any internet-connected application, regardless of whether it's running on-premises or in the cloud. 請使用下列步驟來開始檢視此資料。Use the following steps to start viewing this data.

  1. 選取 [建立資源] > [開發人員工具] > [Application Insights]。Select Create a resource > Developer tools > Application Insights.

    新增 Application Insights 資源

    新增 Application Insights 資源

    設定方塊隨即出現,請使用下表來填寫輸入欄位。A configuration box appears; use the following table to fill out the input fields.

    設定Settings Value 說明Description
    名稱Name 通用唯一值Globally Unique Value 此名稱可識別您要監視的應用程式Name that identifies the app you are monitoring
    應用程式類型Application Type Node.js 應用程式Node.js Application 您要監視的應用程式類型Type of app you are monitoring
    資源群組Resource Group myResourceGroupmyResourceGroup 用於裝載 App Insights 資料之新資源群組的名稱Name for the new resource group to host App Insights data
    位置Location 美國東部East US 選擇您附近或接近應用程式裝載位置的地點Choose a location near you, or near where your app is hosted
  2. 按一下頁面底部的 [新增] 。Click Create.

設定 App Insights SDKConfigure App Insights SDK

  1. 選取 [概觀],然後複製應用程式的 [檢測金鑰]。Select Overview and copy your application's Instrumentation Key.

    新增 App Insights 資源表單

  2. 將 Application Insights SDK for Node.js 新增至您的應用程式。Add the Application Insights SDK for Node.js to your application. 從應用程式的根資料夾執行:From your app's root folder run:

    npm install applicationinsights --save
    
  3. 編輯應用程式的第一個 .js 檔案,將下列兩行新增至指令碼的最頂端部分。Edit your app's first .js file and add the two lines below to the topmost part of your script. 如果您使用 Node.js 快速入門應用程式,請修改 index.js 檔案。If you are using the Node.js quickstart app, you would modify the index.js file. 將 <instrumentation_key> 取代為您應用程式的檢測金鑰。Replace <instrumentation_key> with your application's instrumentation key.

    const appInsights = require('applicationinsights');
    appInsights.setup('<instrumentation_key>').start();
    
  4. 重新啟動您的應用程式。Restart your app.

注意

經過 3-5 分鐘,資料就會開始出現在入口網站。It takes 3-5 minutes before data begins appearing in the portal. 如果此應用程式是低流量測試應用程式,請記住,只有在使用中的要求或作業發生時,才會擷取大部分的計量。If this app is a low-traffic test app, keep in mind that most metrics are only captured when there are active requests or operations occurring.

在 Azure 入口網站中開始監視Start monitoring in the Azure portal

  1. 現在,您可以在 Azure 入口網站中重新開啟 Application Insights [概觀] 頁面 (您先前在此擷取檢測金鑰),以檢視目前執行中應用程式的詳細資料。You can now reopen the Application Insights Overview page in the Azure portal, where you retrieved your instrumentation key, to view details about your currently running application.

    Application Insights 概觀功能表

  2. 按一下 [應用程式對應],以顯示應用程式元件之間相依性關係的視覺化配置。Click Application map for a visual layout of the dependency relationships between your application components. 每個元件會顯示負載、效能、失敗和警示等 KPI。Each component shows KPIs such as load, performance, failures, and alerts.

    應用程式對應

  3. 按一下 [應用程式分析] 圖示 應用程式對應圖示 在 Analytics 中檢視Click on the App Analytics icon Application Map icon View in Analytics. 這樣會開啟 Application Insights Analytics,它提供一種豐富查詢語言,可用於分析 Application Insights 收集的所有資料。This opens Application Insights Analytics, which provides a rich query language for analyzing all data collected by Application Insights. 此案例中會為您產生查詢,可將要求計數以圖表呈現。In this case, a query is generated for you that renders the request count as a chart. 您可以撰寫自己的查詢來分析其他資料。You can write your own queries to analyze other data.

    經過一段時間的使用者要求分析圖表

  4. 返回 [概觀] 頁面,檢查 [KPI 圖形]。Return to the Overview page and examine the KPI graphs. 此儀表板會提供應用程式健康情況的統計資料,包括連入要求數量、這些要求的持續時間,以及任何發生的失敗。This dashboard provides statistics about your application health, including the number of incoming requests, the duration of those requests, and any failures that occur.

    健康情況概觀時間軸圖表

    若要在 [網頁檢視載入時間] 圖表中填入用戶端遙測資料,請將此指令碼新增至您要追蹤的每個頁面:To enable the Page View Load Time chart to populate with client-side telemetry data, add this script to each page that you want to track:

    <!-- 
    To collect user behavior analytics tools about your application, 
    insert the following script into each page you want to track.
    Place this code immediately before the closing </head> tag,
    and before any other scripts. Your first data will appear 
    automatically in just a few seconds.
    -->
    <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:"<insert instrumentation key>"
        });
    
        window.appInsights=appInsights;
        appInsights.trackPageView();
    </script>
    
  5. 在左側按一下 [計量]。On the left click on Metrics. 使用計量瀏覽器來調查資源的健康情況和使用量。Use the metrics explorer to investigate the health and utilization of your resource. 您可以按一下 [新增新的圖表] 來建立額外的自訂檢視,或選取 [編輯] 來修改現有圖表的類型、高度、調色盤、群組和計量。You can click Add new chart to create additional custom views or select Edit to modify the existing chart types, height, color palette, groupings, and metrics. 例如,您可以製作圖表來顯示平均瀏覽器頁面載入時間,方法是從 [計量] 下拉式清單選取 [瀏覽器頁面載入時間] 並從 [彙總] 選取 [平均]。For example, you can make a chart that displays the average browser page load time by picking "Browser page load time" from the metrics drop down and "Avg" from aggregation. 若要深入了解 Azure 計量瀏覽器,請瀏覽開始使用 Azure 計量瀏覽器To learn more about Azure Metrics Explorer visit Getting started with Azure Metrics Explorer.

    伺服器計量圖表

若要深入了解監視 Node.js,請參閱其他 App Insights Node.js 文件To learn more about monitoring Node.js, check out the additional App Insights Node.js documentation.

清除資源Clean up resources

當您完成測試時,您可以刪除資源群組和所有相關資源。When you are done testing, you can delete the resource group and all related resources. 若要這樣做,請依照下列步驟執行。To do so follow the steps below.

  1. 從 Azure 入口網站的左側功能表中,依序按一下 [資源群組] 和 [myResourceGroup]。From the left-hand menu in the Azure portal, click Resource groups and then click myResourceGroup.
  2. 在資源群組頁面上,按一下 [刪除],在文字方塊中輸入 myResourceGroup,然後按一下 [刪除]。On your resource group page, click Delete, type myResourceGroup in the text box, and then click Delete.

後續步驟Next steps