Next.js 中的分散式追蹤

隨著現代應用程式變得越來越分散式，特別是隨著微服務和無伺服器架構的興起，監控和調試這些系統變得更加複雜。分散式追蹤可協助開發人員在請求通過各種服務時追蹤請求，從而清楚了解效能瓶頸、錯誤和延遲問題。使用 Next.js（一個強大的 React 框架）時，實現分散式追蹤可以提高應用程式的可觀察性並實現更好的效能診斷。

在本文中，我們將深入探討分散式追蹤的概念、它如何應用於 Next.js，以及實現它可以採取的步驟。

什麼是分散式追蹤？

分散式追蹤是一種用於透過分散式系統追蹤請求的方法，特別是當請求跨越多個服務或元件時。與傳統日誌記錄或應用程式效能監控 (APM) 不同，分散式追蹤將跨邊界的請求流縫合在一起，從而可以輕鬆識別發生延遲或錯誤的位置。

分散式追蹤的關鍵概念：

• Trace：追蹤代表請求在分散式系統中移動的過程。它由多個跨度組成。
• Span：每個跨度代表旅程中的單一操作，例如 API 呼叫、資料庫查詢或渲染元件。 Span 包含有關操作開始和結束時間的元數據，以及任何標籤或事件。
• 上下文傳播：分散式追蹤依賴於跨服務邊界的追蹤上下文傳播，確保系統的不同部分可以貢獻相同的追蹤。

為什麼在 Next.js 中使用分散式追蹤？

Next.js 是一個全端框架，可以涉及伺服器端和客戶端渲染的混合，以及可以與外部服務互動的 API 路由。在建立具有多個組件和服務的大型應用程式時，識別效能瓶頸並確保系統的健康至關重要。

分散式追蹤幫助 Next.js 開發人員：

• 監控 API 路由效能：了解伺服器端路由的執行方式，識別緩慢的資料庫查詢或外部 API 呼叫，並最佳化瓶頸。
• 改善使用者體驗：監控不同 Next.js 頁面渲染所需的時間，無論是透過伺服器端渲染 (SSR)、靜態網站產生 (SSG) 或客戶端渲染。
• 跨服務偵錯錯誤：如果您的Next.js 應用程式正在與多個微服務或第三方服務進行通信，則追蹤可以幫助追蹤資料如何在這些服務之間流動，從而幫助您查明錯誤或延遲問題的根源。

如何在 Next.js 中實現分散式追蹤

為了在Next.js 中實現分佈式跟踪，我們可以利用OpenTelemetry 等開源庫（它為收集分佈式跟踪提供基礎），或者使用Datadog、New Relic 等專有解決方案，以及其他提供更高級跟踪功能的解決方案。

第 1 步：設定 OpenTelemetry

OpenTelemetry 是一個開源標準，提供用於收集和匯出追蹤資料的工具。它得到了廣泛的供應商和雲端平台的支援。

1. 安裝 OpenTelemetry 套件： 首先安裝所需的 OpenTelemetry 套件。您將需要 Node.js 和 HTTP 框架的核心套件和特定套件。

   npm install @opentelemetry/api @opentelemetry/sdk-node @opentelemetry/instrumentation-http @opentelemetry/exporter-jaeger

此設定包括：

• @opentelemetry/api：核心追蹤 API。
• @opentelemetry/sdk-node：用於捕獲痕跡的 Node.js SDK。
• @opentelemetry/instrumentation-http：HTTP 呼叫的檢測。
• @opentelemetry/exporter-jaeger：Jaeger 的範例導出器，Jaeger 是一個開源分散式追蹤系統。

1. 建立追蹤設定檔： 在 Next.js 專案中，建立一個名為 Tracing.js 的檔案來設定和初始化 OpenTelemetry。

   const { NodeTracerProvider } = require('@opentelemetry/sdk-node');
   const { SimpleSpanProcessor } = require('@opentelemetry/sdk-trace-base');
   const { JaegerExporter } = require('@opentelemetry/exporter-jaeger');
   const { HttpInstrumentation } = require('@opentelemetry/instrumentation-http');

   const provider = new NodeTracerProvider();

   // Configure exporter
   const exporter = new JaegerExporter({
     endpoint: 'http://localhost:14268/api/traces', // Jaeger endpoint
   });

   provider.addSpanProcessor(new SimpleSpanProcessor(exporter));

   // Register the provider globally
   provider.register();

   // Initialize HTTP instrumentation
   new HttpInstrumentation().setTracerProvider(provider);

1. 偵測您的 API 路由： 您可以使用 OpenTelemetry 的 API 在 Next.js API 路由中手動建立 Span。

   import { trace } from '@opentelemetry/api';

   export default async function handler(req, res) {
     const tracer = trace.getTracer('default');
     const span = tracer.startSpan('api-route-handler');

     try {
       // Simulate some async work
       await new Promise((resolve) => setTimeout(resolve, 100));
       res.status(200).json({ message: 'Hello from the API' });
     } catch (error) {
       span.recordException(error);
       res.status(500).json({ error: 'Internal Server Error' });
     } finally {
       span.end();
     }
   }

這將建立一個追蹤 API 路由執行情況的跨度。如果出現錯誤，span 將捕獲該異常。

1. 捕獲客戶端追蹤（可選）： 對於用戶端追蹤（例如，測量頁面渲染或載入資料所需的時間），您可以在瀏覽器中設定類似的 OpenTelemetry 設定。您也可以配置匯出器以將追蹤資料傳送到後端。

第 2 步：使用追蹤供應商

或者，您可以使用 Datadog、New Relic 或 AWS X-Ray 等第三方工具，它們提供更全面的追蹤功能並與其他效能監控工具整合。

例如，要將 Datadog 整合到 Next.js 應用程式中：

1. 安裝 Datadog 套件：

   npm install @opentelemetry/api @opentelemetry/sdk-node @opentelemetry/instrumentation-http @opentelemetry/exporter-jaeger

1. 初始化追蹤： 建立 dd-tracing.js 檔案並為您的應用程式配置 Datadog 追蹤。

   const { NodeTracerProvider } = require('@opentelemetry/sdk-node');
   const { SimpleSpanProcessor } = require('@opentelemetry/sdk-trace-base');
   const { JaegerExporter } = require('@opentelemetry/exporter-jaeger');
   const { HttpInstrumentation } = require('@opentelemetry/instrumentation-http');

   const provider = new NodeTracerProvider();

   // Configure exporter
   const exporter = new JaegerExporter({
     endpoint: 'http://localhost:14268/api/traces', // Jaeger endpoint
   });

   provider.addSpanProcessor(new SimpleSpanProcessor(exporter));

   // Register the provider globally
   provider.register();

   // Initialize HTTP instrumentation
   new HttpInstrumentation().setTracerProvider(provider);

1. 監控與分析： 將追蹤傳送到 Datadog 後，使用其儀表板視覺化請求路徑、識別瓶頸並監控系統。

第 3 步：分析痕跡

設定追蹤系統後，您可以使用 Jaeger、Datadog 或任何追蹤後端等工具檢視和分析追蹤。這些工具將向您顯示每個追蹤的瀑布視圖，幫助您了解要求如何流經應用程式以及出現效能問題的位置。

結論

分散式追蹤為現代應用程式提供了必要的可見性，尤其是那些使用 Next.js 等處理客戶端和伺服器端邏輯的框架建立的應用程式。透過實施分散式追蹤，您可以深入了解應用程式的效能，從而有效地診斷和修復瓶頸。無論您選擇 OpenTelemetry 等開源解決方案還是 Datadog 等商業工具，分散式追蹤都將幫助您確保 Next.js 應用程式經過最佳化、可靠且可擴展。

以上是Next.js 中的分散式追蹤的詳細內容。更多資訊請關注PHP中文網其他相關文章！