【问题标题】:Problems with axios and Azure Application Insightsaxios 和 Azure Application Insights 的问题
【发布时间】:2019-11-07 14:45:36
【问题描述】:

Microsoft 的 NPM 包 @microsoft/applicationinsights-we 在前端使用时将添加标头以跟踪应用程序不同部分(例如前端、后端、服务等)的调用。

我在前端使用 axios,开箱即用不适用于包。 disableFetchTracking:falsedisableAjaxTracking:false 都不起作用。我不想用 fetch 代替 axios,因为 axios 使用起来更方便,而且这也需要大量的重写。

我能做什么?

【问题讨论】:

    标签: node.js axios azure-application-insights


    【解决方案1】:

    @microsoft/applicationinsights-web 包确实将相关标头注入到axios 调用中(通过检测XMLHttpRequest)。您的应用程序中出现问题的原因可能有以下几种:

    另一个库破坏了仪器

    其他东西可能会劫持 XMLHttpRequest 对象并影响 AppInsights 检测。一个这样的库是pace.js,它覆盖了window.XMLHttpRequest 构造函数,但没有将opensendabort 添加到它的原型中。 AppInsights 期望这些函数出现在 XMLHttpRequest 的原型上:https://github.com/microsoft/ApplicationInsights-JS/blob/91f08a1171916a1bbf14c03a019ebd26a3a69b86/extensions/applicationinsights-dependencies-js/src/ajax.ts#L330

    这是一个有效的 axios + @microsoft/applicationinsights-web 示例:

    这是相同的示例,但加载了 pace.js - 未添加 Request-Id 标头:

    在 AppInsights 初始化代码之后删除 pace.js 或将其脚本标记/导入应该可以解决问题。

    跨域请求

    另一种解释可能是前端应用正在发出跨域请求,默认情况下 AppInsights 不会处理这些请求 - 需要 enableCorsCorrelation: true 配置设置。

    【讨论】:

    • 谢谢!确实是另一个包破坏了它,而不是缺少或错误的配置。
    • 您对 AppInsights 不处理跨域请求的评论对调试我们的问题非常有帮助!
    • 您的示例已被删除,这很糟糕,请避免使用第三方网站。
    猜你喜欢
    • 1970-01-01
    • 2017-06-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-05-14
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多