如何为NextJS默认Span添加自定义属性？

要在Next.js自动生成的Span中添加自定义属性，无需手动创建Span，只需在导出前通过包装追踪导出器来修改Span数据。以下是修改后的instrumentation.ts实现：

import type { SpanExporter, ReadableSpan } from "@opentelemetry/sdk-trace-base";
import { registerOTel } from "@vercel/otel";

export async function register() {
  let traceExporter: SpanExporter | undefined;

  if (process.env.NEXT_RUNTIME === "nodejs") {
    const { AzureMonitorTraceExporter } = await import(
      "@azure/monitor-opentelemetry-exporter"
    );
    const originalExporter = new AzureMonitorTraceExporter({
      connectionString: process.env.APP_INSIGHTS_CONNECTION_STRING,
    });

    // 包装导出器，在发送至Azure前注入自定义属性
    traceExporter = {
      export: (spans: ReadableSpan[], resultCallback) => {
        spans.forEach(span => {
          // 添加通用环境属性
          span.setAttribute("app_environment", process.env.NODE_ENV || "development");
          span.setAttribute("service_identifier", "nextjs-14-app");

          // 针对路由类Span添加自定义属性
          if (span.attributes["http.route"]) {
            span.setAttribute("custom_route_path", span.attributes["http.route"]);
          }

          // 针对API接口Span添加标识
          if (span.name.startsWith("POST /api/") || span.name.startsWith("GET /api/")) {
            span.setAttribute("api_category", "backend_endpoint");
          }
        });

        originalExporter.export(spans, resultCallback);
      },
      shutdown: (callback) => originalExporter.shutdown(callback),
    };
  }

  registerOTel({
    serviceName: process.env.NODE_ENV,
    traceExporter,
  });
}

关键说明 #

• 采用导出器包装的方式，完全保留Next.js自动生成Span的逻辑，仅在数据发送前修改属性
• 可根据Span的name、attributes等特征，灵活添加针对性的自定义属性，满足不同业务追踪需求
• 所有属性修改在本地完成，确保最终发送到Azure Application Insights的Span包含自定义字段

内容的提问来源于stack exchange，提问作者Inshal Aamir