App insights clientside (#705)

Co-authored-by: devkokov <dm.kokov@gmail.com>

Author: LucasCairns

assets/js/appInsights.js

@@ -1,10 +1,17 @@
 import { ApplicationInsights } from '@microsoft/applicationinsights-web'
 import { ClickAnalyticsPlugin } from '@microsoft/applicationinsights-clickanalytics-js'
 
-document.addEventListener('DOMContentLoaded', function () {
-  if (!applicationInsightsConnectionString) {
+document.initialiseTelemetry = (
+  applicationInsightsConnectionString,
+  applicationInsightsRoleName,
+  assessmentId,
+  assessmentVersion,
+  userId,
+  sectionCode,
+) => {
+  if (!Boolean(applicationInsightsConnectionString)) {
     console.log('AppInsights not configured')
-    return 
+    return
   }
 
   console.log('Configuring AppInsights')
@@ -18,11 +25,12 @@ document.addEventListener('DOMContentLoaded', function () {
     config: {
       connectionString: applicationInsightsConnectionString,
       autoTrackPageVisitTime: true,
+      // extensions: [clickPluginInstance],
       extensionConfig: {
         [clickPluginInstance.identifier]: clickPluginConfig
       },
     }
-  })  
+  })
 
   const telemetryInitializer = (envelope) => {
     envelope.tags["ai.cloud.role"] = applicationInsightsRoleName
@@ -42,4 +50,4 @@ document.addEventListener('DOMContentLoaded', function () {
       name: 'AutoSaved',
     })
   })
-})
+}

assets/js/index.js

@@ -3,6 +3,7 @@ import * as mojFrontend from '@ministryofjustice/frontend'
 import accessibleAutocomplete from 'accessible-autocomplete'
 import './save-on-exit'
 import './modules'
+import './appInsights'
 
 govukFrontend.initAll()
 mojFrontend.initAll()

docker-compose.test.yml

@@ -5,7 +5,7 @@ services:
       HMPPS_AUTH_EXTERNAL_URL: http://hmpps-auth:9090/auth
       HMPPS_ARNS_HANDOVER_EXTERNAL_URL: http://arns-handover:7070
       OASYS_URL: http://oasys-ui:3000
-      KEEP_ALIVE: 30000      
+      KEEP_ALIVE: 30000
 
   arns-handover:
     environment:

package-lock.json

@@ -17,7 +17,7 @@ export default function setUpWebSecurity(): Router {
     helmet({
       contentSecurityPolicy: {
         directives: {
-          defaultSrc: ["'self'", 'js.monitor.azure.com', '*.applicationinsights.azure.com'],
+          defaultSrc: ["'self'", 'js.monitor.azure.com', '*.applicationinsights.azure.com/v2/track'],
           // This nonce allows us to use scripts with the use of the `cspNonce` local, e.g (in a Nunjucks template):
           // <script nonce="{{ cspNonce }}">
           // or

server/middleware/setUpWebSecurity.ts

@@ -75,7 +75,3 @@
     </form>
   </div>
 {% endblock %}
-
-{% block bodyEnd %}
-  <script type="module" src="/assets/js/app.js"></script>
-{% endblock %}

server/views/forms/default.njk

@@ -71,7 +71,7 @@
         </nav>
       </div>
       <div class="govuk-grid-column-three-quarters">
-        {% block backLink %}          
+        {% block backLink %}
         {% endblock %}
         {%- if errors | length -%}
           {{ govukErrorSummary({

server/views/forms/layout.njk

@@ -67,7 +67,3 @@
   <p class="govuk-body">This section is incomplete</p>
 {% endif %}
 {% endblock %}
-
-{% block bodyEnd %}
-  <script type="module" src="/assets/js/app.js"></script>
-{% endblock %}

server/views/forms/summary.njk

@@ -28,6 +28,18 @@
 
 {% block bodyEnd %}
   <script type="module" src="/assets/js/app.js"></script>
+  <script nonce="{{ cspNonce }}">
+    document.addEventListener('DOMContentLoaded', function () {
+      document.initialiseTelemetry(
+        '{{ applicationInsightsConnectionString | default('') }}',
+        '{{ applicationInsightsRoleName }}',
+        '{{ sessionData.assessmentId }}',
+        '{{ assessmentVersion }}',
+        '{{ sessionData.user.identifier }}',
+        '{{ form.section }}',
+      )
+    })
+  </script>
 {% endblock %}
 
 {% block footer %}