Nextjs 中的分布式跟踪

nextjs 中的分布式跟踪

随着现代应用程序变得越来越分布式，特别是随着微服务和无服务器架构的兴起，监控和调试这些系统变得更加复杂。分布式跟踪可帮助开发人员在请求通过各种服务时跟踪请求，从而清楚地了解性能瓶颈、错误和延迟问题。使用 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 是一个开源标准，提供用于收集和导出跟踪数据的工具。它得到了广泛的供应商和云平台的支持。

安装 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 是一个开源分布式跟踪系统。

创建跟踪设置文件：在 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);

检测您的 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 将捕获该异常。

捕获客户端跟踪（可选）：对于客户端跟踪（例如，测量页面渲染或加载数据所需的时间），您可以在浏览器中设置类似的 opentelemetry 配置。您还可以配置导出器以将跟踪数据发送到后端。

第 2 步：使用追踪供应商

或者，您可以使用 datadog、new relic 或 aws x-ray 等第三方工具，它们提供更全面的跟踪功能并与其他性能监控工具集成。

例如，要将 datadog 集成到 next.js 应用程序中：

安装 datadog 包：

   npm install dd-trace

初始化追踪：创建 dd-tracing.js 文件并为您的应用程序配置 datadog 跟踪。

   const tracer = require('dd-trace').init();

   // Example tracing on an API route
   export default async function handler(req, res) {
     const span = tracer.startSpan('api.request');

     try {
       // Process request
       res.status(200).json({ message: 'Hello from Datadog traced API' });
     } catch (error) {
       span.setTag('error', true);
       throw error;
     } finally {
       span.finish();
     }
   }

监控和分析：将跟踪发送到 datadog 后，使用其仪表板可视化请求路径、识别瓶颈并监控系统。

第 3 步：分析痕迹

设置跟踪系统后，您可以使用 jaeger、datadog 或任何跟踪后端等工具查看和分析跟踪。这些工具将向您显示每个跟踪的瀑布视图，帮助您了解请求如何流经应用程序以及出现性能问题的位置。

结论

分布式跟踪为现代应用程序提供了必要的可见性，尤其是那些使用 next.js 等处理客户端和服务器端逻辑的框架构建的应用程序。通过实施分布式跟踪，您可以深入了解应用程序的性能，从而有效地诊断和修复瓶颈。无论您选择 opentelemetry 等开源解决方案还是 datadog 等商业工具，分布式跟踪都将帮助您确保 next.js 应用程序经过优化、可靠且可扩展。

以上就是Nextjs 中的分布式跟踪的详细内容，更多请关注其它相关文章！