如何在Angular项目中本地测试@microsoft/applicationinsights-web？

完全不需要依赖Azure门户，无需在生产环境操作，以下是两种经过验证的本地测试方案：

方案1：开启内置调试日志（最快方案，无需额外工具） #

直接在Application Insights初始化配置中开启调试模式，所有上报数据会直接输出到浏览器控制台，不会强制上报到Azure服务。
配置示例如下：

import { ApplicationInsights } from '@microsoft/applicationinsights-web';

// 本地测试初始化配置
const appInsights = new ApplicationInsights({
  config: {
    instrumentationKey: 'test-only-fake-key', // 本地测试随便填任意非空字符串即可，不需要真实Azure密钥
    enableDebug: true, // 开启调试模式
    loggingLevelConsole: 2, // 等级2代表输出所有日志到控制台，包含事件、异常、性能、自定义埋点等全量数据
    // 可选配置：彻底禁止数据上报到公网Azure，完全留存在本地
    // disableTelemetry: true
  }
});
appInsights.loadAppInsights();

配置生效后，所有上报数据都会带有AI: 前缀输出在浏览器控制台，你可以直接查看上报的完整数据结构、自定义属性、指标值是否符合预期。

方案2：本地搭建Mock服务，完整模拟上报链路 #

如果需要验证完整的上报流程，可以自己搭一个本地接收服务，所有数据都会上报到你本地的服务，不会流出本地环境：

• 用任意服务端语言写一个简易HTTP服务，监听POST请求，打印收到的上报数据即可
• 修改Application Insights初始化配置，新增endpointUrl字段，值为你本地服务的接口地址，比如http://localhost:3000/ai-mock
• 触发埋点后即可在本地服务的日志中查看完整的上报Payload

极简Node.js版Mock服务示例：

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;

app.use(bodyParser.json({ limit: '10mb' }));
app.use(bodyParser.text({ type: '*/*' }));

app.post('/ai-mock', (req, res) => {
  console.log('收到Application Insights上报数据：\n', JSON.stringify(req.body, null, 2));
  res.status(200).send('success');
});

app.listen(port, () => {
  console.log('本地Application Insights Mock服务已启动，端口：', port);
});

注意事项 #

• 本地测试不需要申请任何Azure服务权限，也不需要真实的密钥
• 如果不需要验证上报链路，直接用方案1即可，1分钟就能完成配置开始测试

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