如何通过@vercel/otel将Next.js应用接入Azure Application Insights？

能不能用 @vercel/otel 实现日志上报？ #

可以。@vercel/otel 是基于标准 OpenTelemetry SDK 封装的工具，支持自定义导出器，因此可以配合 Azure 的 OpenTelemetry 导出器，将追踪数据和日志上报到 Azure Application Insights。

具体配置步骤 #

1. 安装依赖
   安装所需的 OpenTelemetry 和 Azure 相关包：

   npm install @vercel/otel @azure/monitor-opentelemetry-exporter @opentelemetry/sdk-trace-node @opentelemetry/sdk-logs @opentelemetry/api
   

2. 创建 OpenTelemetry 配置文件
   在项目根目录新建 otel.config.js，配置追踪和日志导出到 Azure：

   import { initializeOpenTelemetry } from '@vercel/otel';
   import { AzureMonitorTraceExporter } from '@azure/monitor-opentelemetry-exporter';
   import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base';
   import { LoggerProvider, SimpleLogRecordProcessor } from '@opentelemetry/sdk-logs';
   
   // 配置追踪数据导出
   initializeOpenTelemetry({
     serviceName: '你的Next.js应用名称',
     spanProcessors: [
       new BatchSpanProcessor(
         new AzureMonitorTraceExporter({
           connectionString: process.env.AZURE_APPINSIGHTS_CONNECTION_STRING,
         })
       ),
     ],
   });
   
   // 配置自定义日志导出
   const loggerProvider = new LoggerProvider();
   loggerProvider.addLogRecordProcessor(
     new SimpleLogRecordProcessor(
       new AzureMonitorTraceExporter({
         connectionString: process.env.AZURE_APPINSIGHTS_CONNECTION_STRING,
       })
     )
   );
   
   // 导出logger供业务代码使用
   export const logger = loggerProvider.getLogger('应用日志');
   

3. 配置 Next.js 加载 OpenTelemetry

   • 如果使用 App Router：
     在项目根目录创建 instrumentation.ts（或 .js）：

     export async function register() {
       if (process.env.NODE_ENV === 'production') {
         await import('./otel.config');
       }
     }
     

     然后在 next.config.js 中启用 instrumentation hook：

     const nextConfig = {
       experimental: {
         instrumentationHook: true,
       },
     };
     
     module.exports = nextConfig;
     

   • 如果使用 Pages Router：
     在 pages/_app.js 或后端 API 文件的顶部加载配置：

     if (process.env.NODE_ENV === 'production') {
       require('../otel.config');
     }
     

4. 配置 Vercel 环境变量
   登录 Vercel 控制台，进入项目的「Settings」→「Environment Variables」，添加 AZURE_APPINSIGHTS_CONNECTION_STRING，值从 Azure Application Insights 控制台获取（在「概述」→「连接字符串」中复制）。

5. 自定义日志上报
   在业务代码中使用导出的 logger 上报日志：

   import { logger } from '../otel.config';
   
   // 示例：API路由中上报日志
   export async function GET() {
     logger.info('API 请求已处理', { path: '/api/hello', method: 'GET' });
     return new Response('Hello World');
   }
   

注意事项 #

• Vercel 的 Serverless/Edge Functions 会自动读取环境变量，确保部署时变量已正确配置。
• @vercel/otel 已优化 Vercel 环境下的采集逻辑，自定义导出器不会与内置功能冲突。
• 开发环境下可以暂时禁用 OpenTelemetry，避免本地调试时产生冗余数据。

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