Refactor scripts/sentry client init to use store actions instead of directly acting on observables, add unit test

Author: webstackdev

_TODO.md

@@ -1,5 +1,9 @@
 # TODO
 
+## Sentry feedback, chat bot tying into my phone and email
+
+See note in src/components/scripts/sentry/client.ts - "User Feedback - allow users to report issues"
+
 ## Centralize toast notifications to Toast component
 
 - Right now, the consent/preferences component has its own showNotification() method and toast handling. We have a centralized Toast component but is only being used for network availability right now. Maybe refactor to use a single Toast component, and move the network availability logic somewhere else like bootstrap.

src/components/scripts/sentry/__tests__/helpers.spec.ts

@@ -0,0 +1,90 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { beforeSendHandler, updateConsentContext } from '../helpers'
+
+const mockScope = {
+  setContext: vi.fn(),
+}
+
+const isDevMock = vi.hoisted(() => vi.fn(() => false))
+const getConsentSnapshotMock = vi.hoisted(() => vi.fn(() => ({
+  analytics: true,
+})))
+
+vi.mock('@components/scripts/utils/environmentClient', () => ({
+  isDev: isDevMock,
+}))
+
+vi.mock('@components/scripts/store/consent', () => ({
+  getConsentSnapshot: getConsentSnapshotMock,
+}))
+
+vi.mock('@sentry/browser', () => ({
+  getCurrentScope: () => mockScope,
+}))
+
+const consoleLogSpy = vi.spyOn(console, 'log').mockImplementation(() => {})
+
+const createEvent = (): Parameters<typeof beforeSendHandler>[0] => ({
+  user: { 'ip_address': '127.0.0.1' },
+  request: { headers: { 'user-agent': 'test' } },
+  breadcrumbs: [{ message: 'clicked' }],
+}) as Parameters<typeof beforeSendHandler>[0]
+
+describe('sentry helpers', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    isDevMock.mockReturnValue(false)
+    getConsentSnapshotMock.mockReturnValue({ analytics: true })
+    consoleLogSpy.mockClear()
+  })
+
+  describe('beforeSendHandler', () => {
+    it('skips sending events in development', () => {
+      isDevMock.mockReturnValue(true)
+      const event = createEvent()
+
+      const result = beforeSendHandler(event)
+
+      expect(result).toBeNull()
+      expect(getConsentSnapshotMock).not.toHaveBeenCalled()
+    })
+
+    it('returns event unchanged when analytics consent exists', () => {
+      getConsentSnapshotMock.mockReturnValue({ analytics: true })
+
+      const event = createEvent()
+      const result = beforeSendHandler(event)
+
+      expect(result).toBe(event)
+      expect(event.user?.ip_address).toBe('127.0.0.1')
+      expect(event.request?.headers).toEqual({ 'user-agent': 'test' })
+      expect(event.breadcrumbs).toHaveLength(1)
+    })
+
+    it('scrubs PII when analytics consent is missing', () => {
+      getConsentSnapshotMock.mockReturnValue({ analytics: false })
+
+      const event = createEvent()
+      const result = beforeSendHandler(event)
+
+      expect(result).toBe(event)
+      expect(event.user?.ip_address).toBeUndefined()
+      expect(event.request?.headers).toBeUndefined()
+      expect(event.breadcrumbs).toHaveLength(0)
+    })
+  })
+
+  describe('updateConsentContext', () => {
+    it('sets consent context and logs status', () => {
+      updateConsentContext(true)
+
+      expect(mockScope.setContext).toHaveBeenCalledWith('consent', {
+        analytics: true,
+        timestamp: expect.any(String),
+      })
+      expect(consoleLogSpy).toHaveBeenCalledWith(
+        '🔒 Sentry PII enabled based on analytics consent'
+      )
+    })
+  })
+})

src/components/scripts/sentry/client.ts

@@ -11,8 +11,9 @@ import {
   linkedErrorsIntegration,
 } from '@sentry/browser'
 import { SENTRY_DSN } from 'astro:env/client'
-import { isDev, getPackageRelease } from '@components/scripts/utils/environmentClient'
-import { $consent } from '@components/scripts/store/consent'
+import { getPackageRelease } from '@components/scripts/utils/environmentClient'
+import { getAnalyticsConsentPreference } from '@components/scripts/store/consent'
+import { beforeSendHandler } from '@components/scripts/sentry/helpers'
 
 /**
  * Client-side Sentry initialization with GDPR-compliant PII handling
@@ -33,8 +34,7 @@ import { $consent } from '@components/scripts/store/consent'
 export class SentryBootstrap {
   static init(): void {
     // Check analytics consent for PII handling
-    const consentState = $consent.get()
-    const hasAnalyticsConsent = consentState.analytics
+    const hasAnalyticsConsent = getAnalyticsConsentPreference()
 
     const client = new BrowserClient({
       dsn: SENTRY_DSN,
@@ -103,33 +103,7 @@ export class SentryBootstrap {
        * Before sending events, you can modify or drop them
        * Useful for filtering sensitive data based on consent
        */
-      beforeSend(event, _hint) {
-        // Don't send errors in development
-        if (isDev()) {
-          return null
-        }
-
-        // If no analytics consent, scrub PII from event
-        const currentConsent = $consent.get()
-        if (!currentConsent.analytics) {
-          // Remove IP address
-          if (event.user) {
-            delete event.user.ip_address
-          }
-
-          // Remove user agent and other request data
-          if (event.request) {
-            delete event.request.headers
-          }
-
-          // Clear breadcrumbs that may contain user interactions
-          if (event.breadcrumbs) {
-            event.breadcrumbs = []
-          }
-        }
-
-        return event
-      },
+      beforeSend: beforeSendHandler,
     })
 
     getCurrentScope().setClient(client)
@@ -138,20 +112,4 @@ export class SentryBootstrap {
     console.log('✅ Sentry monitoring initialized')
   }
 
-  /**
-   * Update Sentry context when consent changes
-   * Called by consent store subscriber
-   */
-  static updateConsentContext(hasAnalyticsConsent: boolean): void {
-    const scope = getCurrentScope()
-
-    // Set consent status in Sentry context
-    scope.setContext('consent', {
-      analytics: hasAnalyticsConsent,
-      timestamp: new Date().toISOString(),
-    })
-
-    // Log consent change
-    console.log(`🔒 Sentry PII ${hasAnalyticsConsent ? 'enabled' : 'disabled'} based on analytics consent`)
-  }
 }

src/components/scripts/sentry/helpers.ts

@@ -0,0 +1,44 @@
+import { getCurrentScope } from '@sentry/browser'
+import type { Event as SentryEvent } from '@sentry/types'
+import { isDev } from '@components/scripts/utils/environmentClient'
+import { getConsentSnapshot } from '@components/scripts/store/consent'
+
+/**
+ * Applies consent-aware filtering to Sentry events before they are sent.
+ */
+export function beforeSendHandler(event: SentryEvent): SentryEvent | null {
+  if (isDev()) {
+    return null
+  }
+
+  const currentConsent = getConsentSnapshot()
+  if (!currentConsent.analytics) {
+    if (event.user) {
+      delete event.user.ip_address
+    }
+
+    if (event.request) {
+      delete event.request.headers
+    }
+
+    if (event.breadcrumbs) {
+      event.breadcrumbs = []
+    }
+  }
+
+  return event
+}
+
+/**
+ * Sets Sentry scope context when consent changes to keep telemetry aligned with user preferences.
+ */
+export function updateConsentContext(hasAnalyticsConsent: boolean): void {
+  const scope = getCurrentScope()
+
+  scope.setContext('consent', {
+    analytics: hasAnalyticsConsent,
+    timestamp: new Date().toISOString(),
+  })
+
+  console.log(`🔒 Sentry PII ${hasAnalyticsConsent ? 'enabled' : 'disabled'} based on analytics consent`)
+}

src/components/scripts/store/__tests__/consent.spec.ts

@@ -1,4 +1,4 @@
-// @vitest-environment happy-dom
+// @vitest-environment jsdom
 /**
  * Unit tests for cookie consent state management
  */
@@ -19,6 +19,7 @@ import {
   getConsentCookie,
   setConsentCookie,
   removeConsentCookies,
+  getAnalyticsConsentPreference,
 } from '@components/scripts/store/consent'
 
 // Mock js-cookie
@@ -211,6 +212,16 @@ describe('Cookie Consent Management', () => {
     })
   })
 
+  describe('Analytics Consent Helpers', () => {
+    it('reports the current analytics consent preference', () => {
+      expect(getAnalyticsConsentPreference()).toBe(false)
+
+      updateConsent('analytics', true)
+
+      expect(getAnalyticsConsentPreference()).toBe(true)
+    })
+  })
+
   describe('Consent Cookie Helpers', () => {
     it('initializes consent cookies when analytics cookie is missing via initConsentCookies', () => {
       vi.mocked(getCookie).mockReturnValue(undefined)

src/components/scripts/store/consent.ts

@@ -158,6 +158,10 @@ export function getFunctionalConsentPreference(): boolean {
   return $hasFunctionalConsent.get()
 }
 
+export function getAnalyticsConsentPreference(): boolean {
+  return $hasAnalyticsConsent.get()
+}
+
 /**
  * Subscribe to functional consent changes with immediate synchronization
  */
@@ -347,8 +351,8 @@ export function initConsentSideEffects(): void {
   $hasAnalyticsConsent.subscribe((hasConsent) => {
     try {
       // Dynamically import to avoid circular dependencies and allow lazy loading
-      import('@components/scripts/sentry/client').then(({ SentryBootstrap }) => {
-        SentryBootstrap.updateConsentContext(hasConsent)
+      import('@components/scripts/sentry/helpers').then(({ updateConsentContext }) => {
+        updateConsentContext(hasConsent)
       }).catch((error) => {
         // Sentry may not be initialized in all environments
         console.warn('Failed to update Sentry consent context:', error)