[BUG] App Insights initialization setting 'enableAjaxErrorStatusText' is not working

Description/Screenshot I was excited that I could replace my own workaround version to log failed ajax issues by retrieving also response body from XHR. #1156

However I tested this new setting enableAjaxErrorStatusText and I could not get it to work. Instead I get an exception when remote dependency data is being logged.

Exception I found:

“Failed to monitor XMLHttpRequest ‘readystatechange’ event handler, monitoring data for this ajax call may be incorrect.” Failed to read the ‘responseText’ property from ‘XMLHttpRequest’: The value is only accessible if the object’s ‘responseType’ is ‘’ or ‘text’ (was ‘json’).

Steps to Reproduce

• lunch application with app-insights turned on
• trigger any remote dependency where the response code for AJAX call is not successful.
• check application insights tracking information in Network Tab and in Azure Portal
• Instead of network dependency an exception is logged instead

• OS/Browser: Windows 10 Version 1909 Google Chrome Version 80.0.3987.87 (Official Build) (64-bit)

• SDK Version (package.json): “@microsoft/applicationinsights-react-js”: “^2.4.4”, “@microsoft/applicationinsights-web”: “^2.4.4”

• How you initialized the SDK: Here is my app insights telemetry class for logging client-side:

import { AppInsightsEventNames } from '../../constants';
import {
  ApplicationInsights,
  IConfiguration,
  IConfig,
} from '@microsoft/applicationinsights-web';
import { ReactPlugin } from '@microsoft/applicationinsights-react-js';
import { isDevEnvironment } from '../../utils/utils';

class TelemetryService {
  reactPlugin: ReactPlugin;
  appInsights!: ApplicationInsights;

  constructor() {
    this.reactPlugin = new ReactPlugin();
  }

  initialize(instrumentationKey: string) {
    const config = {
      instrumentationKey,
      maxBatchInterval: 0,
      enableRequestHeaderTracking: true,
      enableResponseHeaderTracking: true,
      enableAjaxErrorStatusText: true,
      enableDebugExceptions: isDevEnvironment(),
    } as IConfiguration & IConfig;

    this.appInsights = new ApplicationInsights({
      config: { ...config, extensions: [this.reactPlugin] },
    });

    this.appInsights.loadAppInsights();

    this.appInsights.trackEvent(
      { name: AppInsightsEventNames.AppInsightsInitialized },
      { instrumentationKey }
    );
  }
}

export default new TelemetryService();

// init ai
import ai from '../middleware/telemetry/TelemetryService';
// ...
await ai.initialize('<environment_appinsights_instrumentation_key>');

Expected behavior

• remote dependency data is logged to app insights in Azure Portal
• logged telemetry item has custom property responseText with XHR response body information

Additional context This is the exception I get when I turn on setting enableDebugExceptions to true.

“AI (Internal): 16 message:“Failed to monitor XMLHttpRequest ‘readystatechange’ event handler, monitoring data for this ajax call may be incorrect.” props:”{ajaxDiagnosticsMessage:(url: ‘url removed’),exception:[object DOMException]{\stack:\Error: Failed to read the ‘responseText’ property from ‘XMLHttpRequest’: The value is only accessible if the object’s ‘responseType’ is ‘’ or ‘text’ (was ‘json’).\n at AjaxMonitor.onAjaxComplete (http://localhost:55867/static/js/2.chunk.js:19633:75)\n at XMLHttpRequest.<anonymous> (http://localhost:55867/static/js/2.chunk.js:19551:33)}}“” URL removed as it contains sensitive URL param

Request body for https://dc.services.visualstudio.com/v2/track call:

 {
  "time": "2020-02-07T12:05:01.983Z",
  "iKey": "<removed>",
  "name": "Microsoft.ApplicationInsights.<removed>.Exception",
  "tags": {
    "ai.user.id": "<removed>",
    "ai.session.id": "<removed>",
    "ai.device.id": "browser",
    "ai.device.type": "Browser",
    "ai.operation.name": "<removed>",
    "ai.operation.id": "<removed>",
    "ai.internal.sdkVersion": "javascript:2.4.4"
  },
  "data": {
    "baseType": "ExceptionData",
    "baseData": {
      "ver": 2,
      "exceptions": [
        {
          "typeName": "Error",
          "message": "Uncaught [object Object]",
          "hasFullStack": true,
          "stack": "window.onerror@http://localhost:55867/static/js/2.chunk.js:18083:7",
          "parsedStack": [
            {
              "level": 0,
              "method": "window.onerror",
              "assembly": "window.onerror@http://localhost:55867/static/js/2.chunk.js:18083:7",
              "fileName": "http://localhost:55867/static/js/2.chunk.js",
              "line": 18083
            }
          ]
        }
      ],
      "severityLevel": 3
    }
  }
}

Removed any ID data.

[MSNev]

Version 2.5.2 is now fully deployed to the CDN, closing as this should address this issue.

[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.