[BUG] Getting XMLHttpRequest and XDomainRequest is not defined errors for gatsby environment

[MSNev]

From @SachiraChin in https://github.com/microsoft/ApplicationInsights-JS/issues/1321#issuecomment-667709759

I've got the same issue while working on gatsby site. I actually thought it was an issue with my environment first. I will add details of the error(s) I got here in case someone else gets this.

Error symptoms When you use ApplicationInsights in site without using NPM Setup, you may have got errors like this.

ReferenceError: XMLHttpRequest is not defined ReferenceError: XDomainRequest is not defined

[SachiraChin]

@MSNev Thank you for creating this ticket. Please see below for setup I have used for gatsby site.

Gatsby quick start: https://www.gatsbyjs.org/docs/quick-start/ Gatsby theme: gatsby-starter-julia

After setting up the site locally, I have followed below article to add application insights following this article,

https://www.aaron-powell.com/posts/2019-10-04-implementing-monitoring-in-react-using-appinsights/

You can check exact repo I'm working here: https://github.com/SachiraChin/bitsnorbytes

Please follow below steps to reproduce the error,

1. Clone https://github.com/SachiraChin/bitsnorbytes
2. Goto src\services\AppInsights.js and comment lines 5-8
3. Add .env.development to clone of above repo with below content

GATSBY_APPLICATION_INSIGHTS_KEY={AAI-Key}

4. Run npm run-script build

I also found it weird that the build fails on build time because, these shouldn't have invoked on build time. But for some reason it tries to execute ai.loadAppInsights(); on build time, which makes it fail on build.

Please let me know if you need more details from my side.

[kryalama]

@SachiraChin I am not able to reproduce your issue. You mentioned you were not using npm setup for initializing appInsights. But looks like the code you shared is using npm setup. Here is a working example I created which is built over gatsby-starter-julia

[SachiraChin]

@kryalama Sorry, I meant to say I didn't use Snippet Setup, but turned out I mentioned exact opposite. Extremely sorry for that mistake.

For your example, when I tried to run gatsby build on that, I got this error initially.

Building static HTML failed

See our docs page for more info on this error: https://gatsby.dev/debug-html

  26 |         }
  27 |         if (!config || _isNullOrUndefined(config.instrumentationKey)) {
> 28 |             throw Error("Please provide instrumentation key");
     | ^
  29 |         }
  30 |         _this.config = config;
  31 |         var channelController = _this._channelController;

  WebpackError: Please provide instrumentation key

  - BaseCore.js:28
    node_modules/@microsoft/applicationinsights-core-js/dist-esm/JavaScriptSDK/BaseCore.js:28:1

  - AppInsightsCore.js:17
    node_modules/@microsoft/applicationinsights-core-js/dist-esm/JavaScriptSDK/AppInsightsCore.js:17:1

  - Initialization.js:258
    node_modules/@microsoft/applicationinsights-web/dist-esm/Initialization.js:258:1

  - AppInsights.js:15
    src/services/AppInsights.js:15:4

  - 404.js:1
    src/pages/404.js:1:1

Then I added .env.production with data same as in .env.development and ran it again, which gave me same error as I mentioned in the issue.

Building static HTML failed

See our docs page for more info on this error: https://gatsby.dev/debug-html

  143 |         }
  144 |         else {
> 145 |             if (!CoreUtils.isUndefined(XMLHttpRequest)) {
      |                           ^
  146 |                 var testXhr = new XMLHttpRequest();
  147 |                 if ("withCredentials" in testXhr) {
  148 |                     this._sender = this._xhrSender;

  WebpackError: ReferenceError: XMLHttpRequest is not defined

  - Sender.js:145
    node_modules/@microsoft/applicationinsights-channel-js/dist-esm/Sender.js:145:27

  - TelemetryHelpers.js:40
    node_modules/@microsoft/applicationinsights-core-js/dist-esm/JavaScriptSDK/TelemetryHelpers.js:40:1

  - CoreUtils.js:191
    node_modules/@microsoft/applicationinsights-core-js/dist-esm/JavaScriptSDK/CoreUtils.js:191:1

  - TelemetryHelpers.js:39
    node_modules/@microsoft/applicationinsights-core-js/dist-esm/JavaScriptSDK/TelemetryHelpers.js:39:14

  - ChannelController.js:84
    node_modules/@microsoft/applicationinsights-core-js/dist-esm/JavaScriptSDK/ChannelController.js:84:78

  - CoreUtils.js:191
    node_modules/@microsoft/applicationinsights-core-js/dist-esm/JavaScriptSDK/CoreUtils.js:191:1

  - ChannelController.js:84
    node_modules/@microsoft/applicationinsights-core-js/dist-esm/JavaScriptSDK/ChannelController.js:84:1

  - TelemetryHelpers.js:40
    node_modules/@microsoft/applicationinsights-core-js/dist-esm/JavaScriptSDK/TelemetryHelpers.js:40:1

  - CoreUtils.js:191
    node_modules/@microsoft/applicationinsights-core-js/dist-esm/JavaScriptSDK/CoreUtils.js:191:1

  - TelemetryHelpers.js:39
    node_modules/@microsoft/applicationinsights-core-js/dist-esm/JavaScriptSDK/TelemetryHelpers.js:39:14

  - BaseCore.js:101
    node_modules/@microsoft/applicationinsights-core-js/dist-esm/JavaScriptSDK/BaseCore.js:101:26

  - AppInsightsCore.js:17
    node_modules/@microsoft/applicationinsights-core-js/dist-esm/JavaScriptSDK/AppInsightsCore.js:17:1

  - Initialization.js:258
    node_modules/@microsoft/applicationinsights-web/dist-esm/Initialization.js:258:1

  - AppInsights.js:15
    src/services/AppInsights.js:15:4

Please note that you get this error only when you run gatsby build command, if you use gatsby development environment from gatsby develop, it builds and runs without any issue.

Can you please check if it works without any issue with gatsby build as well? If it works without any issue, it sure must be an issue with my environment.

[SachiraChin]

@kryalama I have detailed steps I followed when I got this error on my blog. It has all detailed errors in it. Please refer to it if you want more details.

https://beta.bitsnorbytes.com/2020/gatsby-site-with-azure-application-insights#azure-application-insights-for-gatsby-web-site

[sscarberry]

I also am receiving this error. For me, I am running yarn install into yarn build and when I run yarn build my output is:

 ERROR #95313 

Building static HTML failed

See our docs page for more info on this error: https://gatsby.dev/debug-html

  143 |         }
  144 |         else {
> 145 |             if (!CoreUtils.isUndefined(XMLHttpRequest)) {
      |                           ^
  146 |                 var testXhr = new XMLHttpRequest();
  147 |                 if ("withCredentials" in testXhr) {
  148 |                     this._sender = this._xhrSender;

  WebpackError: ReferenceError: XMLHttpRequest is not defined

  - Sender.js:145 Sender../node_modules/@microsoft/applicationinsights-channel-js/dist-esm/Sender.    js.Sender.initialize
    node_modules/@microsoft/applicationinsights-channel-js/dist-esm/Sender.js:145:27

  - TelemetryHelpers.js:40 Array.<anonymous>
    node_modules/@microsoft/applicationinsights-core-js/dist-esm/JavaScriptSDK/TelemetryHelpers.js    :40:1

  - CoreUtils.js:191 Function../node_modules/@microsoft/applicationinsights-core-js/dist-esm/JavaS    criptSDK/CoreUtils.js.CoreUtils.arrForEach
    node_modules/@microsoft/applicationinsights-core-js/dist-esm/JavaScriptSDK/CoreUtils.js:191:1

  - TelemetryHelpers.js:39 initializePlugins
    node_modules/@microsoft/applicationinsights-core-js/dist-esm/JavaScriptSDK/TelemetryHelpers.js    :39:14

  - ChannelController.js:84 Array.<anonymous>
    node_modules/@microsoft/applicationinsights-core-js/dist-esm/JavaScriptSDK/ChannelController.j    s:84:78

  - CoreUtils.js:191 ./node_modules/@microsoft/applicationinsights-core-js/dist-esm/JavaScriptSDK/    CoreUtils.js.CoreUtils.arrForEach
    node_modules/@microsoft/applicationinsights-core-js/dist-esm/JavaScriptSDK/CoreUtils.js:191:1

  - ChannelController.js:84 ChannelController../node_modules/@microsoft/applicationinsights-core-j    s/dist-esm/JavaScriptSDK/ChannelController.js.ChannelController.initialize
    node_modules/@microsoft/applicationinsights-core-js/dist-esm/JavaScriptSDK/ChannelController.j    s:84:1

  - TelemetryHelpers.js:40 Array.<anonymous>
    node_modules/@microsoft/applicationinsights-core-js/dist-esm/JavaScriptSDK/TelemetryHelpers.js    :40:1

  - CoreUtils.js:191 Function../node_modules/@microsoft/applicationinsights-core-js/dist-esm/JavaS    criptSDK/CoreUtils.js.CoreUtils.arrForEach
    node_modules/@microsoft/applicationinsights-core-js/dist-esm/JavaScriptSDK/CoreUtils.js:191:1

  - TelemetryHelpers.js:39 initializePlugins
    node_modules/@microsoft/applicationinsights-core-js/dist-esm/JavaScriptSDK/TelemetryHelpers.js    :39:14

  - BaseCore.js:101 AppInsightsCore../node_modules/@microsoft/applicationinsights-core-js/dist-esm    /JavaScriptSDK/BaseCore.js.BaseCore.initialize
    node_modules/@microsoft/applicationinsights-core-js/dist-esm/JavaScriptSDK/BaseCore.js:101:26

  - AppInsightsCore.js:17 AppInsightsCore../node_modules/@microsoft/applicationinsights-core-js/di    st-esm/JavaScriptSDK/AppInsightsCore.js.AppInsightsCore.initialize
    node_modules/@microsoft/applicationinsights-core-js/dist-esm/JavaScriptSDK/AppInsightsCore.js:    17:1

  - Initialization.js:258 Initialization../node_modules/@microsoft/applicationinsights-web/dist-es    m/Initialization.js.Initialization.loadAppInsights
    node_modules/@microsoft/applicationinsights-web/dist-esm/Initialization.js:258:1

  - AppInsights.js:15 Module../src/services/AppInsights.js
    src/services/AppInsights.js:15:4

  - index.js:1 Module../src/components/layout/index.js
    src/components/layout/index.js:1:1

not finished Generating image thumbnails - 123.184s

I am not using the gatsby-starter-julia I am using a custom theme.

Lastly I also see the same results when running gatsby develop or in my case yarn start.

I can provide any additional info if needed, I have also verified my code for AppInsights.js and layout.js against yours in the example.

[SachiraChin]

@sscarberry If you are trying this for one of your projects, update AppInsights.js like this for now, that's how it got it working.

// AppInsights.js
import { ApplicationInsights } from '@microsoft/applicationinsights-web'
import { ReactPlugin, withAITracking } from '@microsoft/applicationinsights-react-js'
import { globalHistory } from "@reach/router"

if (!("XMLHttpRequest" in global)) {
    global.XMLHttpRequest = undefined;
    global.XDomainRequest = undefined;
}

const reactPlugin = new ReactPlugin();
const ai = new ApplicationInsights({
    config: {
        instrumentationKey: process.env.GATSBY_APPLICATION_INSIGHTS_KEY,
        extensions: [reactPlugin],
        extensionConfig: {
            [reactPlugin.identifier]: { history: globalHistory }
        }
    }
})

if (process.env.GATSBY_APPLICATION_INSIGHTS_KEY) {
    ai.loadAppInsights();
} else {
    console.log('Application insights key not available.')
}

export default (Component) => withAITracking(reactPlugin, Component)
export const appInsights = ai.appInsights

[sscarberry]

@sscarberry If you are trying this for one of your projects, update AppInsights.js like this for now, that's how it got it working.

// AppInsights.js
import { ApplicationInsights } from '@microsoft/applicationinsights-web'
import { ReactPlugin, withAITracking } from '@microsoft/applicationinsights-react-js'
import { globalHistory } from "@reach/router"

if (!("XMLHttpRequest" in global)) {
    global.XMLHttpRequest = undefined;
    global.XDomainRequest = undefined;
}

const reactPlugin = new ReactPlugin();
const ai = new ApplicationInsights({
    config: {
        instrumentationKey: process.env.GATSBY_APPLICATION_INSIGHTS_KEY,
        extensions: [reactPlugin],
        extensionConfig: {
            [reactPlugin.identifier]: { history: globalHistory }
        }
    }
})

if (process.env.GATSBY_APPLICATION_INSIGHTS_KEY) {
    ai.loadAppInsights();
} else {
    console.log('Application insights key not available.')
}

export default (Component) => withAITracking(reactPlugin, Component)
export const appInsights = ai.appInsights

@SachiraChin That did solve a part of my problem, but it seems to have shifted my issue to another part of the codebase, in this case it's the theme.

failed Building static HTML for pages - 4.317s

 ERROR #95313 

Building static HTML failed

See our docs page for more info on this error: https://gatsby.dev/debug-html

  234 |                     snippetVer += ".lg";
  235 |                 }
> 236 |                 _this.properties.context.internal.snippetVer = snippetVer || "-";
      | ^
  237 |                 // apply updated properties to the global instance (snippet)
  238 |                 for (var field in _this) {
  239 |                     if (CoreUtils.isString(field) &&

  WebpackError: TypeError: Cannot set property 'snippetVer' of undefined

  - Initialization.js:236 _updateSnippetProperties
    node_modules/@microsoft/applicationinsights-web/dist-esm/Initialization.js:236:1

  - Initialization.js:263 Initialization../node_modules/@microsoft/applicationinsights-web/dist-es    m/Initialization.js.Initialization.loadAppInsights
    node_modules/@microsoft/applicationinsights-web/dist-esm/Initialization.js:263:1

  - AppInsights.js:20 Module../src/services/AppInsights.js
    src/services/AppInsights.js:20:4

  - index.js:1 Module../src/components/layout/index.js
    src/components/layout/index.js:1:1

  - page.js:1 Module../src/templates/page/page.js
    src/templates/page/page.js:1:1

  - index.js:1 Module../src/templates/page/index.js
    src/templates/page/index.js:1:1

I'm not sure how making some of these changes will affect our overall site as I am pretty new to this environment.

[SachiraChin]

@sscarberry Oh, sorry, I forgot to mention, you have to downgrade application insights to @microsoft/applicationinsights-web@2.5.3

This is discussed in this ticket: #1321

If you need more details about it, please read this post as well. I added lot more details in it. https://beta.bitsnorbytes.com/2020/gatsby-site-with-azure-application-insights#azure-application-insights-for-gatsby-web-site

[SachiraChin]

@sscarberry I think this is a temporary fix for the issue. For now, it works without any issue for builds I make. More about this section,

if (!("XMLHttpRequest" in global)) {
    global.XMLHttpRequest = undefined;
    global.XDomainRequest = undefined;
}

Primary target of this section is just the build on a machine, when this is available on the browser, XMLHttpRequest and XDomainRequest available depends on browser version. Even if it is not available, applicationinsights-web, will detect it and pick other framework to send requests.

If you are worried about other frameworks using XMLHttpRequest or XDomainRequest, I hope it does not really affect how they function because we are setting these as undefined, but I have same concern as you about failing anything on my app. I tested it on all functions to make sure it works without any issue, I think you will have to do a test run in the site before pushing it to any prod environment.

[kryalama]

updating to 2.5.7 should fix this issue. Tested and confirmed.

[SachiraChin]

@kryalama Thank you very much for the fix. Verified that it work as expected in the Gatsby site.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.