Uncaught TypeError: Cannot redefine property: pathname when calling appInsights.loadAppInsights();

[tom-faber-seekout]

Description/Screenshot
Uncaught TypeError: Cannot redefine property: pathname
when calling appInsights.loadAppInsights();

Crashes app before react component is rendered, so web page just shows blank. I reproduced this with a simple Vite app, just adding the two app-insights packages and the initialization code below.

Steps to Reproduce

• OS/Browser: MacOS latest version
• SDK Version [e.g. 22]:

   "@microsoft/applicationinsights-react-js": "3.4.2",
   "@microsoft/applicationinsights-web": "3.0.1",

• Node version: 18.5.0

• created app with Vite using react-ts template

• How you initialized the SDK:

const browserHistory = createBrowserHistory();
const reactPlugin = new ReactPlugin();
const appInsights = new ApplicationInsights({
  config: {
    connectionString,
    distributedTracingMode: DistributedTracingModes.W3C,
    enableAutoRouteTracking: true,
    extensions: [reactPlugin as unknown as ITelemetryPlugin],
    extensionConfig: {
      [reactPlugin.identifier]: { history: browserHistory },
    },
  },
});
appInsights.loadAppInsights();

Expected behavior
no crash, app renders

Additional context
Perhaps this is just incompatible versions of applicationinsights-react-js and applicationinsights-web? If I downgrade applicationinsights-web to 2.8.13, the problem goes away. Still, glad I'm entering this so that the next person who encounters it will see this in a search.

[MSNev]

No, I think this is part of the v3.x changes to support dynamic configuration changes...

Basically, what happens now with v3.x is that it uses the provided config as a template and ends up making a deep copy of all primitives and plain objects, converting all properties to use get/set functions for access and change tracking. (Classes (simplistically they have a non-object prototype) just have their references assigned / returned by the get/set)

In this particular case I'm going to "guess" that the issue is that the returned "history" object from the createBrowserHistory() is really a plain object with existing get/set property functions that can't be overriden (the AI code "wraps" these so it essentially "supports" objects that have get/set but not when they are defined as configurable: false (which is the default 😢 )

We do have a "helper" called blockDynamicConversion() which might work for this scenario, but it seems like we will need to add some more robust detection of this case (passing external generated objects) either by detecting them or maybe just tagging specific property items as "do not convert"...

[tom-faber-seekout]

Closed inadvertently

[MSNev]

Yep, no problem;-).

I'm currently working on #2068 as from my perspective it's a blocker before I can release a versions of this plugin, angular and react-native that support v3.x. As while this appears to be the history object it won't be the only possible thing that would cause this problem.

[ASmith-MRM]

I am running into the exact same problem. I have tried using the helper blockDynamicConversion() but unfortunately this has not helped. This is blocking us from adding app insights logging to our FE right now. Amongst other things I have tried rolling back to previous version, this has also not worked.

Can you advise on a solution or a workaround?

[MSNev]

I have a PR out to address this for the next release, however, (if) you want to try and continue (there may be other issues as we have not yet release an AI v3.x compatible version of this plugin yet) you can use the blockDynamicConversion(history) helper to cause the SDK to not attempt to convert the historyobject into a dynamic configuration hosted object.

So it would be something like this

const browserHistory = createBrowserHistory();
const reactPlugin = new ReactPlugin();
const appInsights = new ApplicationInsights({
  config: {
    connectionString,
    distributedTracingMode: DistributedTracingModes.W3C,
    enableAutoRouteTracking: true,
    extensions: [reactPlugin as unknown as ITelemetryPlugin],
    extensionConfig: {
      [reactPlugin.identifier]: { history: blockDynamicConversion(browserHistory) },
    },
  },
});
appInsights.loadAppInsights();

[MSNev]

The above may (or will) not work if the browserHistory object itself is frozen or sealed Object.seal() or Object.freeze() as the blockDynamicConversion() actually adds an additional property to the object which the SDK "looks" for.

[MSNev]

And for completeness this is the PR that addresses this microsoft/ApplicationInsights-JS#2069 by

1. Adding try / catch within the conversion to ignore this type of issue (unable to convert an object into a dynamic (reactive) object
2. Adds support so we can tag specific configuration properties (the history for the react-js plugin in this specific case

The later is so than when we release an update to this plugin to support v3.x we will tag the properties that we know will have external objects included.

[MSNev]

I believe that this should not be addressed with the latest version of ApplicationInsights 3.x, so I'm going to close this issue. Please comment if this is still an issue.