0

I am trying to use azure app insights in my react application. But when I am running this its failing to post events to azure server due to a csp error.

Refused to connect to 'https://eastus-8.in.applicationinsights.azure.com//v2/track' because it violates the document's Content Security Policy.

Refused to connect to '' because it violates the following Content Security Policy directive: "connect-src 'unsafe-inline' 'self'".

we are using these npm modules to setup insights

"@microsoft/applicationinsights-react-js": "^3.4.0", "@microsoft/applicationinsights-web": "^2.8.9",

Below the configuration we are using:

import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { ReactPlugin } from '@microsoft/applicationinsights-react-js';
const { REACT_APP_INSIGHT_CONNECTION_STRING } = process.env;
export const reactPlugin = new ReactPlugin();
const appInsights = new ApplicationInsights({
    config: {
        connectionString: REACT_APP_INSIGHT_CONNECTION_STRING,
        enableCorsCorrelation: true,
        enableAutoRouteTracking: false,
        extensions: [reactPlugin],
    }
});
appInsights.loadAppInsights();

it should allow to post the events from our react app. please let me know if I am missing any configuration to fix this.

sarathi c
  • 1
  • 1
  • 1
    Finally, we figured out that, we need to add the application insights domain to the CSP headers delivered by the server itself. – sarathi c Feb 10 '23 at 08:08

0 Answers0