[#2965] Add Siteimprove tracking for file-input errors

src/open_inwoner/js/components/index.js

@@ -32,6 +32,7 @@ import { TabPanel } from './tab-panels'
 import './toggle'
 import { StatusAccordion } from './cases/status_accordion'
 import './session'
+import './siteimprove/error-tracking'
 import './siteimprove/tracking'
 import './twofactor-sms'
 import { FileInput } from './form/FileInput'

src/open_inwoner/js/components/siteimprove/error-tracking.js

@@ -0,0 +1,108 @@
+// file-input-error-tracker.js
+
+// Mock _sz object for testing
+if (typeof _sz === 'undefined') {
+  var _sz = {
+    push: function (data) {
+      try {
+        console.log('Event pushed to _sz:', data)
+      } catch (error) {
+        console.error('Error occurred while pushing event data:', error)
+      }
+    },
+  }
+}
+
+let fileErrorObserver
+let trackingEnabled = false
+
+function trackFileErrors() {
+  // console.log("Checking for file errors...")
+
+  const sizeError = document.querySelector('.file-error__size')
+  const typeError = document.querySelector('.file-error__type')
+  const typeSizeError = document.querySelector('.file-error__type-size')
+
+  if (typeof _sz !== 'undefined') {
+    if (sizeError && sizeError.offsetParent !== null) {
+      // console.log("Size error is visible. Pushing event to _sz.")
+      _sz.push(['event', 'Mijn Aanvragen', 'Error', 'Error bestand te groot.'])
+    }
+    if (typeError && typeError.offsetParent !== null) {
+      // console.log("Type error is visible. Pushing event to _sz.")
+      _sz.push([
+        'event',
+        'Mijn Aanvragen',
+        'Error',
+        'Error verkeerd bestand type.',
+      ])
+    }
+    if (typeSizeError && typeSizeError.offsetParent !== null) {
+      // console.log("Type and size error is visible. Pushing event to _sz.")
+      _sz.push([
+        'event',
+        'Mijn Aanvragen',
+        'Error',
+        'Error bestand te groot en van verkeerde type.',
+      ])
+    }
+  }
+}
+
+function startTracking() {
+  if (trackingEnabled) {
+    // console.log("Tracking is already enabled. Skipping.")
+    return
+  }
+  trackingEnabled = true
+
+  fileErrorObserver = new MutationObserver(trackFileErrors)
+  fileErrorObserver.observe(document.body, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+  }) // Observe attributes as well
+  // console.log("Started tracking with MutationObserver.")
+}
+
+function stopTracking() {
+  if (!trackingEnabled) {
+    // console.log("Tracking is already disabled. Skipping.")
+    return
+  }
+  trackingEnabled = false
+
+  if (fileErrorObserver) {
+    fileErrorObserver.disconnect()
+    // console.log("Stopped tracking with MutationObserver.")
+  }
+}
+
+function checkAndStartTracking() {
+  // console.log("Checking for #document-upload element...")
+  const documentUpload = document.getElementById('document-upload')
+
+  if (documentUpload) {
+    // console.log("#document-upload found. Starting tracking.")
+    startTracking()
+  } else {
+    // console.log("#document-upload not found. Stopping tracking.")
+    stopTracking()
+  }
+}
+
+// Initial check when the script loads
+// console.log("Script loaded. Performing initial check.")
+checkAndStartTracking()
+
+// Observe changes to the document body to restart tracking if the form is added later
+const formObserver = new MutationObserver(checkAndStartTracking)
+formObserver.observe(document.body, { childList: true, subtree: true })
+console.log('Created MutationObserver for form changes.')
+
+// HTMX event listener
+document.body.addEventListener('htmx:afterSwap', () => {
+  console.log('htmx:afterSwap event triggered. Checking for #document-upload.')
+  checkAndStartTracking()
+})
+// console.log("Added HTMX event listener.");