implement application insights

.env.local

@@ -20,20 +20,20 @@ RELAYPATH = "dev-pedw-hc"
 
 
 //Test Oauth ESNR
-//CLIENT_ID = d40b9373-96c2-4b04-8bd8-c2a2fe6444c1
+CLIENT_ID = d40b9373-96c2-4b04-8bd8-c2a2fe6444c1
-//CLIENT_SECRET = IXI8Q~D5oqsC-nrtayHHc~tUAfjQFzNiKVQ~fc2S
+CLIENT_SECRET = IXI8Q~D5oqsC-nrtayHHc~tUAfjQFzNiKVQ~fc2S
-//RELAY_ROOT = https://test-pedw-ns.servicebus.windows.net/test-pedw-hc/
+RELAY_ROOT = https://test-pedw-ns.servicebus.windows.net/test-pedw-hc/
-//RELAYURI = "test-pedw-ns.servicebus.windows.net"
+RELAYURI = "test-pedw-ns.servicebus.windows.net"
-//RELAYPATH = "test-pedw-hc"
+RELAYPATH = "test-pedw-hc"
 
 
 //Preprod Oauth WGO 
-//CLIENT_ID = ab6c4678-b31a-4eb3-b429-e039120e488a
+CLIENT_ID = ab6c4678-b31a-4eb3-b429-e039120e488a
 ////CLIENT_SECRET = Ioo7Q~RJfhWsE45wPsuHm1CzRk1SppnNN3lZF
-//CLIENT_SECRET = V288Q~P1lFMvvX9Xnkx2pLixK~GOREH983Owqc1E
+CLIENT_SECRET = V288Q~P1lFMvvX9Xnkx2pLixK~GOREH983Owqc1E
-//RELAY_ROOT = https://pp-pedw-ns.servicebus.windows.net/pp-pedw-hc/
+RELAY_ROOT = https://pp-pedw-ns.servicebus.windows.net/pp-pedw-hc/
-//RELAYURI = "pp-pedw-ns.servicebus.windows.net"
+RELAYURI = "pp-pedw-ns.servicebus.windows.net"
-//RELAYPATH = "pp-pedw-hc"
+RELAYPATH = "pp-pedw-hc"
 
 
 
@@ -110,9 +110,9 @@ AZURE_PEDW_STORAGE_ENDPOINT = https://pedwdev.blob.core.windows.net
 
 
 // preprod key
-//AZURE_STORAGE_ACCOUNT_NAME = "pedwpp"
+AZURE_STORAGE_ACCOUNT_NAME = "pedwpp"
-//AZURE_STORAGE_ACCOUNT_KEY = koZ46STRqapSa2Dod8MLL6aju1eYLhhyJ6DXpCLMTnFLJvbDT6CHUv/jwr5U/Ta8a60MWzwToHQy+AStADO7sg==
+AZURE_STORAGE_ACCOUNT_KEY = koZ46STRqapSa2Dod8MLL6aju1eYLhhyJ6DXpCLMTnFLJvbDT6CHUv/jwr5U/Ta8a60MWzwToHQy+AStADO7sg==
-//AZURE_PEDW_STORAGE_ENDPOINT = https://pedwpp.blob.core.windows.net
+AZURE_PEDW_STORAGE_ENDPOINT = https://pedwpp.blob.core.windows.net
 
 
 // PROD key
@@ -153,4 +153,17 @@ NOTIFY_API_KEY = pedwnextauthkey-90f93710-9dae-423e-aea1-11eccd0dc132-0c9469d9-d
  
 # DATABASE_URL='sqlserver://pp-pedw-sql.database.windows.net:1433;database=PEDWPreProd;user=pp-pedw-ukw;password=jscw4+896w9YaiXruOA3mtpNkio1oUZxBZcFJ9Awdz4=;encrypt=true;trustservercertificate=false;hostnameincertificate=*.database.windows.net;logintimeout=30;authentication=SqlPassword'
 
-SHOW_DEBUG = true
+SHOW_DEBUG = true
+
+
+// DEV Connection string
+//NEXT_PUBLIC_APP_INSIGHT = InstrumentationKey=4b7568b3-70bd-4591-9dc2-267c0a6501d1;IngestionEndpoint=https://ukwest-0.in.applicationinsights.azure.com/;LiveEndpoint=https://ukwest.livediagnostics.monitor.azure.com/;ApplicationId=447d38b5-5d40-4238-8fb3-0ef4741b3db1
+ 
+// Test Connection string
+//NEXT_PUBLIC_APP_INSIGHT = InstrumentationKey=cc60e8e7-5b30-4c2b-a176-8b96b21b12df;IngestionEndpoint=https://ukwest-0.in.applicationinsights.azure.com/;LiveEndpoint=https://ukwest.livediagnostics.monitor.azure.com/;ApplicationId=2a4094be-6fd1-46ab-a67d-5f241692b129
+ 
+// Preprod Connection string
+NEXT_PUBLIC_APP_INSIGHT = InstrumentationKey=7370f0f9-834d-4c7a-b3c4-9951fcad5ad2;IngestionEndpoint=https://ukwest-0.in.applicationinsights.azure.com/;LiveEndpoint=https://ukwest.livediagnostics.monitor.azure.com/;ApplicationId=04362cb7-6dfc-469e-8274-12243e8be851
+ 
+// Prod Connection string
+//NEXT_PUBLIC_APP_INSIGHT = InstrumentationKey=61f358c2-8075-4164-b897-17bc6dd31fee;IngestionEndpoint=https://ukwest-0.in.applicationinsights.azure.com/;LiveEndpoint=https://ukwest.livediagnostics.monitor.azure.com/;ApplicationId=0c297349-396b-4dc6-8b56-85f5c680adc6

components/azureappinsights.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { ApplicationInsights } from "@microsoft/applicationinsights-web";
+import {
+    ReactPlugin,
+    withAITracking,
+    AppInsightsContext,
+} from "@microsoft/applicationinsights-react-js";
+
+let reactPlugin = new ReactPlugin();
+let appInsights = new ApplicationInsights({
+    config: {
+        connectionString: process.env.NEXT_PUBLIC_APP_INSIGHT,
+        enableAutoRouteTracking: true,
+        enableCorsCorrelation: true,
+        enableRequestHeaderTracking: true,
+        enableResponseHeaderTracking: true,
+        enableAjaxPerfTracking: true,
+        isBrowserLinkTrackingEnabled: true,
+        extensions: [reactPlugin],
+    },
+});
+
+appInsights.loadAppInsights();
+
+const AzureAppInsights = ({ children }) => {
+    return (
+        <AppInsightsContext.Provider value={reactPlugin}>
+            {children}
+        </AppInsightsContext.Provider>
+    );
+};
+
+export default withAITracking(reactPlugin, AzureAppInsights);

package.json

@@ -19,6 +19,8 @@
         "@azure/identity": "^4.0.0",
         "@azure/storage-blob": "^12.17.0",
         "@azure/storage-queue": "^12.16.0",
+        "@microsoft/applicationinsights-react-js": "^17.3.2",
+        "@microsoft/applicationinsights-web": "^3.3.2",
         "@next-auth/prisma-adapter": "^1.0.7",
         "@next/third-parties": "latest",
         "@prisma/client": "^5.7.0",

pages/_app.js

@@ -8,6 +8,7 @@ import { PersistGate } from "redux-persist/integration/react";
 import { SessionProvider as AuthProvider } from "next-auth/react";
 import { Tracking } from "../components/tracking";
 import { GoogleAnalytics } from "@next/third-parties/google";
+import Azureappinsights from "../components/azureappinsights";
 const MyApp = ({ Component, pageProps: { session, ...pageProps } }) => {
     const store = useStore((state) => state);
     const persistor = persistStore(store, {}, function () {
@@ -21,7 +22,9 @@ const MyApp = ({ Component, pageProps: { session, ...pageProps } }) => {
                     persistor={store.__persistor}
                     loading={<Loading />}
                 >
-                    <Component {...pageProps} />
+                    <Azureappinsights>
+                        <Component {...pageProps} />
+                    </Azureappinsights>
                     <GoogleAnalytics gaId="G-GTWW3JT03Z" />
                 </PersistGate>
             </Provider>

pages/_document.js

@@ -42,10 +42,10 @@ class MyDocument extends Document {
         csp += `form-action 'self' ` + process.env.NEXTAUTH_URL + ` ;`;
         csp += `object-src 'self' data:;`;
         csp += `default-src 'self' https://www.google-analytics.com;`;
-        csp += `connect-src 'self' https://region1.google-analytics.com;`;
+        csp += `connect-src 'self' https://ukwest-0.in.applicationinsights.azure.com https://js.monitor.azure.com https://region1.google-analytics.com;`;
-        csp += `script-src 'self' 'unsafe-eval' 'unsafe-inline'  https://region1.google-analytics.com https://www.google-analytics.com/ https://tagmanager.google.com/ https://www.googletagmanager.com/;`;
+        csp += `script-src 'self' 'unsafe-eval' 'unsafe-inline'   https://ukwest-0.in.applicationinsights.azure.com https://region1.google-analytics.com https://www.google-analytics.com/ https://tagmanager.google.com/ https://www.googletagmanager.com/;`;
         csp += `style-src 'self' 'unsafe-inline' https://pro.fontawesome.com/ https://www.google-analytics.com https://tagmanager.google.com/ https://www.googletagmanager.com/ https://fonts.googleapis.com/;`;
-        csp += `img-src 'self' 'unsafe-inline' https://fonts.gstatic.com https://www.googletagmanager.com https://www.google-analytics.com https://ssl.gstatic.com/ data:;`;
+        csp += `img-src 'self' 'unsafe-inline'  https://www.gov.wales https://gov.wales https://fonts.gstatic.com https://www.googletagmanager.com https://www.google-analytics.com https://ssl.gstatic.com/ data:;`;
         csp += `font-src 'self' 'unsafe-inline' https://pro.fontawesome.com/ https://fonts.gstatic.com/ data:;`;
 
         return (