Fix sentry error on consent

Author: webstackdev

src/components/CallToAction/Newsletter/client/__tests__/index.spec.ts

@@ -211,7 +211,7 @@ describe.each(newsletterVariants)('NewsletterFormElement web component (%s)', va
 
       expect(newsletterSubscribeMock).toHaveBeenCalledWith({
         email: 'test@example.com',
-        website_url: 'https://spam.example',
+        'website_url': 'https://spam.example',
         consentGiven: true,
       })
     })

src/components/CallToAction/Newsletter/client/index.ts

@@ -265,7 +265,7 @@ export class NewsletterFormElement extends LitElement {
       try {
         result = await actions.newsletter.subscribe({
           email,
-          ...(websiteUrl ? { website_url: websiteUrl } : {}),
+          ...(websiteUrl ? { 'website_url': websiteUrl } : {}),
           consentGiven,
           ...(DataSubjectId ? { DataSubjectId } : {}),
         })

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

@@ -706,6 +706,53 @@ describe('Consent side effects', () => {
     expect(handleScriptErrorSpy).not.toHaveBeenCalled()
   })
 
+  it('suppresses consent transport failures without reporting a script error', async () => {
+    vi.useFakeTimers()
+
+    consentCreateMock.mockRejectedValueOnce(new TypeError('Failed to fetch'))
+
+    const handleScriptErrorSpy = vi.spyOn(errorHandlerModule, 'handleScriptError')
+
+    let consentListener:
+      | ((_state: ConsentState, _oldState?: ConsentState) => Promise<void> | void)
+      | undefined
+    vi.spyOn($consent, 'subscribe').mockImplementation(listener => {
+      consentListener = listener
+      return () => {}
+    })
+    vi.spyOn($isConsentBannerVisible, 'subscribe').mockImplementation(() => () => {})
+    vi.spyOn($hasFunctionalConsent, 'subscribe').mockImplementation(() => () => {})
+    vi.spyOn($hasAnalyticsConsent, 'subscribe').mockImplementation(() => () => {})
+
+    initConsentSideEffects()
+
+    const oldState = {
+      analytics: false,
+      marketing: false,
+      functional: false,
+      DataSubjectId: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+    }
+    const newState = {
+      analytics: true,
+      marketing: false,
+      functional: false,
+      DataSubjectId: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+    }
+
+    await consentListener?.(newState, oldState)
+
+    await vi.advanceTimersByTimeAsync(250)
+
+    await vi.waitFor(() => {
+      expect(consentCreateMock).toHaveBeenCalledTimes(1)
+    })
+
+    await vi.advanceTimersByTimeAsync(30_000)
+
+    expect(consentCreateMock).toHaveBeenCalledTimes(1)
+    expect(handleScriptErrorSpy).not.toHaveBeenCalled()
+  })
+
   it('deletes the data subject id when functional consent is revoked', () => {
     let functionalListener: ((_hasConsent: boolean) => void) | undefined
     vi.spyOn($hasFunctionalConsent, 'subscribe').mockImplementation(listener => {

src/components/scripts/store/consent.ts

@@ -555,6 +555,21 @@ export function initConsentSideEffects(): void {
     return hasCheckpointMarkup
   }
 
+  const isConsentTransportError = (error?: ConsentActionError): boolean => {
+    const normalizedMessage = error?.message?.toLowerCase()
+    const causeRecord = getErrorRecord(error?.cause)
+    const causeName =
+      typeof causeRecord?.['name'] === 'string' ? causeRecord['name'].toLowerCase() : undefined
+
+    return Boolean(
+      causeName === 'aborterror' ||
+        normalizedMessage?.includes('failed to fetch') ||
+        normalizedMessage?.includes('load failed') ||
+        normalizedMessage?.includes('networkerror when attempting to fetch resource') ||
+        normalizedMessage?.includes('the internet connection appears to be offline')
+    )
+  }
+
   const ensureOnlineListener = () => {
     if (typeof window === 'undefined' || onlineListener) {
       return
@@ -667,6 +682,10 @@ export function initConsentSideEffects(): void {
       return
     }
 
+    if (isConsentTransportError(actionError)) {
+      return
+    }
+
     throw new ClientScriptError({
       message: serverMessage ?? 'Failed to record consent',
       cause: {