Capacitor HTTP/Native HTTP not working with Cordova-Plugin

[MarcoCritti]

We have a case where we instrument our Cordova/Capacitor Mobile App with Dynatrace.

Cordova Plugin v 2.279.2.

However if we have the following Setting

{
  "plugins": {
    "CapacitorHttp": {
      "enabled": true
    }
  }
}

we experience error messages in the Angular part.  

Error when sending batch of logs to server TypeError: Ze.addEventListener is not a function TypeError: Ze. addEventListener is not a function
at d. <anonymous> (http.mis:2176:21)
at d._zoneSubscribe (zone-patch-rxis.is: 68:50)
at d. trySubscribe (Observable. js: 37:25) 
at Observable. js: 31:30 
at K (errorContext.js: 19:9) 
at d. subscribe (Observable. is: 22:9) 
...

 

Once we disable CapacitorHttp  we don't have any issues, however the Application requires this setting to run properly.

Details

Capacitor Version 5.5.0

Cordova Plugin v 2.279.2

• Configuration according to plugin documentation
• o JS is loaded inline, JS was downloaded from Dynatrace UI as documented
• o Adaptation of the config for native requests has no influence on the error (https://www.npmjs.com/package/@dynatrace/cordova-plugin#native-webrequests)  
• Native Http from Capacitor is used, which uses monkey patching for XMLHttpRequest -> https://capacitorjs.com/docs/apis/http

Tested combinations

• JS Agent with Native http -> Throws JS Error (In Angular Core, http.mjs)
• o Object instance is window.XMLHttpRequest -> Object
• JS Agent without Native http -> Works
• o Object instance is XMLHttpRequest -> XMLHttpRequestEventTarget -> EventTarget
• Native http alone -> Works
• o Object instance is XMLHttpRequest -> XMLHttpRequestEventTarget -> EventTarget

Assumption

 JS Agent also uses monkey patching and gets in the way with Native-http plugin.

Anyone has the encountered a similar issue? any solutions? Thanks in advance 🙂

[ltrempe]

I've run into a similar issue between Capacitor, the Dynatrace Cordova plugin and cordova-plugin-wkwebview-file-xhr for native requests. The injected Dynatrace JS on the index page will throw a series of RangeErrors that prevent requests from completing. No solution yet, however cordova-plugin-advanced-http seems to play nicely with the Capacitor and the Dynatrace Cordova plugin.

[matthias_hochri · Accepted solution]

Please open a support ticket and we will take a look. This is way to complex for the community board here.