如何在压缩版adal-angular中启用日志并对接Azure App Insights

我之前在项目里用CDN引入adal-angular时，也碰到过几乎一模一样的问题——调试时控制台日志帮了大忙，但要转存到App Insights就踩了压缩报错的坑。结合你的场景，给你几个实用的解决方案：

方案1：先初始化Logging对象再赋值（最稳妥） #

压缩失败的核心原因是直接给未定义的Logging属性赋值，压缩工具会判定这是无效操作。所以我们要先检查并初始化这个对象，再挂载自定义日志逻辑：

// 确保ADAL的AuthenticationContext原型上存在Logging对象
if (window.AuthenticationContext && !window.AuthenticationContext.prototype.Logging) {
  window.AuthenticationContext.prototype.Logging = {};
}

// 自定义日志方法，转发到App Insights+保留控制台输出
window.AuthenticationContext.prototype.Logging.log = function(message, level) {
  // 转发到App Insights
  if (typeof appInsights !== 'undefined') {
    const severityMap = {
      0: 0, // ADAL Error → App Insights Error
      1: 1, // ADAL Warning → App Insights Warning
      2: 2  // ADAL Info → App Insights Info
    };
    appInsights.trackTrace({
      message: `ADAL: ${message}`,
      severityLevel: severityMap[level] || 2
    });
  }

  // 保留原控制台日志（可选，调试时有用）
  const consoleMethod = level === 0 ? 'error' : level === 1 ? 'warn' : 'log';
  console[consoleMethod](`[ADAL]`, message);
};

这个方案的好处是完全基于CDN加载的ADAL，不需要下载本地包，同时彻底解决了压缩工具的报错问题——因为我们先确保Logging对象存在，再给它的log方法赋值。

方案2：全局初始化Logging并传入ADAL配置 #

另一种思路是先在全局创建Logging对象，再在实例化ADAL时把它传入配置：

// 先全局初始化Logging对象，避免未定义报错
if (!window.Logging) {
  window.Logging = {};
}

// 绑定日志逻辑到全局Logging
window.Logging.log = function(message, level, error) {
  if (typeof appInsights !== 'undefined') {
    const severity = level === 0 ? 0 : level === 1 ? 1 : 2;
    const fullMessage = error ? `${message} | 错误详情: ${JSON.stringify(error)}` : message;
    appInsights.trackTrace({
      message: `ADAL: ${fullMessage}`,
      severityLevel: severity
    });
  }

  // 控制台输出
  const consoleMethod = level === 0 ? 'error' : level === 1 ? 'warn' : 'log';
  console[consoleMethod](`[ADAL]`, message, error || '');
};

// 实例化ADAL时传入自定义logger
const authContext = new window.AuthenticationContext({
  clientId: '你的客户端ID',
  redirectUri: window.location.origin,
  // 其他ADAL配置...
  logger: window.Logging
});

这种方式更符合ADAL的官方配置规范，而且压缩工具会识别到window.Logging是提前声明的变量，不会报错。

方案3：Inline脚本提前处理Logging（适合静态页面场景） #

如果你的项目是纯静态页面，没有构建工具，可以在ADAL的CDN脚本之后直接加一段inline脚本，提前初始化Logging：

<!-- 加载ADAL的CDN脚本 -->
<script src="https://your-cdn-path/adal-angular.min.js"></script>

<!-- 立即初始化Logging并绑定日志逻辑 -->
<script>
  // 给ADAL原型添加Logging属性（如果不存在）
  if (window.AuthenticationContext) {
    Object.defineProperty(
      window.AuthenticationContext.prototype,
      'Logging',
      { value: {}, writable: true, configurable: true }
    );
  }

  // 绑定App Insights转发逻辑
  window.AuthenticationContext.prototype.Logging.log = function(msg, level) {
    if (typeof appInsights !== 'undefined') {
      appInsights.trackTrace({
        message: `ADAL: ${msg}`,
        severityLevel: level
      });
    }
    console.log(`[ADAL ${level ===0 ? 'ERROR' : level===1 ? 'WARN' : 'INFO'}]`, msg);
  };
</script>

这样能确保在你的业务代码执行前，Logging对象已经存在，后续任何操作都不会触发压缩报错。

额外注意事项 #

• 确保App Insights的脚本在ADAL之后加载，或者在日志函数里判断appInsights是否存在，避免调用时未初始化。
• 如果用Webpack等构建工具，压缩时还是报错，可以在Terser配置里保留Logging关键字：

  // webpack.config.js示例
  module.exports = {
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            mangle: {
              reserved: ['Logging']
            }
          }
        })
      ]
    }
  };
  

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