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

[avilde]

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

[avilde]

@xiao-lix what is the release date for this fix?

[xiao-lix]

@avilde hi it should be released this month.

[MSNev]

For reference, I'm planning on starting the release process this week, so it should be fully available before the end of next week.

[avilde]

Updated to latest release:
"@microsoft/applicationinsights-react-js": "^2.5.1",
"@microsoft/applicationinsights-web": "^2.5.1",

This issue is still not fixed.

This line throws error when remote dependency status is 502 when trying to access responseText property:

ApplicationInsights-JS/extensions/applicationinsights-dependencies-js/src/ajax.ts

Line 614 in 168c6e2

responseText: xhr.responseText,

Error message:

"AI (Internal): 16 message:"Failed to monitor XMLHttpRequest 'readystatechange' event handler, monitoring data for this ajax call may be incorrect." props:"{ajaxDiagnosticsMessage:,exception:[object Object]{\messageId:14,\message:\AI (Internal): 14 message:\\Failed to calculate the duration of the ajax call, monitoring data for this ajax call won't be sent.\\ props:\{ajaxDiagnosticsMessage:,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 http://localhost:55867/static/js/0.chunk.js:21763:35\\\\\\\\n at ajaxRecord.self.CreateTrackItem (http://localhost:55867/static/js/0.chunk.js:22335:26)\\\\\\\\n at ajaxRecord.dynProtoProxy [as CreateTrackItem] (http://localhost:55867/static/js/0.chunk.js:26008:27)\\\\\\\\n at http://localhost:55867/static/js/0.chunk.js:21757:39\\\\\\\\n at locateResourceTiming (http://localhost:55867/static/js/0.chunk.js:21892:15)\\\\\\\\n at _findPerfResourceEntry (http://localhost:55867/static/js/0.chunk.js:21902:11)\\\\\\\\n at _onAjaxComplete (http://localhost:55867/static/js/0.chunk.js:21755:9)\\\\\\\\n at XMLHttpRequest. (http://localhost:55867/static/js/0.chunk.js:21724:15)\\\\}}\\\\}}""

@xiao-lix , @MSNev, what am I doing wrong?

[MSNev]

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

[avilde]

The fix in version 2.5.2 is working now :). Thanks for quick changes!

[github-actions]

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.