如何解决Next.js结合OpenTelemetry与Azure Application Insight的'os'模块找不到错误？

问题原因 #

@azure/monitor-opentelemetry-exporter依赖Node.js内置的os模块，但Next.js打包客户端代码时会尝试解析所有依赖，而浏览器环境不存在这些Node.js专属模块，因此抛出模块未找到的错误。

可行解决方案 #

1. 配置Next.js Webpack忽略客户端的Node内置模块 #

在项目根目录的next.config.js中添加Webpack配置，让客户端打包时跳过Node.js内置模块的解析：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback = {
        ...config.resolve.fallback,
        os: false,
        fs: false,
        net: false,
        tls: false,
        path: false
      };
    }
    return config;
  },
};

module.exports = nextConfig;

这里将不需要的Node内置模块设为false，Webpack会在客户端打包时忽略它们。

2. 动态导入服务端依赖 #

修改instrumentation.ts，使用动态导入确保仅在Node.js环境加载相关依赖，避免客户端解析服务端模块：

export async function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    // 动态导入仅服务端需要的依赖
    const { AzureMonitorTraceExporter } = await import('@azure/monitor-opentelemetry-exporter');
    const { Resource } = await import('@opentelemetry/resources');
    const { NodeTracerProvider, SimpleSpanProcessor } = await import('@opentelemetry/sdk-trace-node');
    const { SemanticResourceAttributes } = await import('@opentelemetry/semantic-conventions');

    const provider = new NodeTracerProvider({
      resource: new Resource({
        [SemanticResourceAttributes.SERVICE_NAME]: 'my-app',
      }),
    });

    const exporter = new AzureMonitorTraceExporter({
      connectionString: process.env['APPLICATIONINSIGHTS_CONNECTION_STRING'] || '<your connection string>',
    });

    provider.addSpanProcessor(new SimpleSpanProcessor(exporter));
    provider.register();
  }
}

3. 更新依赖版本 #

确保所有相关依赖版本兼容，避免版本不匹配导致的模块解析问题：

npm update @azure/monitor-opentelemetry-exporter @opentelemetry/resources @opentelemetry/sdk-trace-node @opentelemetry/semantic-conventions

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