fix: stop third-party analytics load failures from reporting as product errors

Author: mattmillerai

src/main.ts

@@ -19,6 +19,10 @@ import {
   configValueOrDefault,
   remoteConfig
 } from '@/platform/remoteConfig/remoteConfig'
+import {
+  markStoresPending,
+  markStoresReady
+} from '@/platform/telemetry/storeReadiness'
 import { syncHostUserIdWithFirebaseAuth } from '@/platform/telemetry/hostUserIdSync'
 import '@/lib/litegraph/public/css/litegraph.css'
 import router from '@/router'
@@ -40,6 +44,8 @@ const { refreshRemoteConfig } =
   await import('@/platform/remoteConfig/refreshRemoteConfig')
 await refreshRemoteConfig({ useAuth: false })
 
+markStoresPending()
+
 if (isCloud) {
   const { initTelemetry } = await import('@/platform/telemetry/initTelemetry')
   await initTelemetry()
@@ -142,6 +148,8 @@ app
     modules: [VueFireAuth()]
   })
 
+markStoresReady()
+
 if (isCloud && hasHostTelemetryBridge) {
   syncHostUserIdWithFirebaseAuth()
 }

src/platform/telemetry/datadogRumBeforeSend.test.ts

@@ -20,6 +20,41 @@ describe('rumBeforeSend', () => {
     expect(rumBeforeSend(event, fromPartial({}))).toBe(false)
   })
 
+  it('drops resource load failures from origins we do not control', () => {
+    const event = fromPartial<RumErrorEvent>({
+      type: 'error',
+      error: {
+        message: '[resource:loadError]',
+        source: 'source',
+        resource: { url: 'https://connect.facebook.net/en_US/fbevents.js' }
+      }
+    })
+
+    expect(rumBeforeSend(event, fromPartial({}))).toBe(false)
+  })
+
+  it('keeps resource load failures from our own origin', () => {
+    const event = fromPartial<RumErrorEvent>({
+      type: 'error',
+      error: {
+        message: '[resource:loadError]',
+        source: 'source',
+        resource: { url: 'https://cloud.comfy.org/assets/app.js' }
+      }
+    })
+
+    expect(rumBeforeSend(event, fromPartial({}))).toBe(true)
+  })
+
+  it('keeps a runtime error thrown by a third-party script', () => {
+    const event = createErrorEvent(
+      'gtag is not a function',
+      'at push (https://www.googletagmanager.com/gtm.js:1:2)'
+    )
+
+    expect(rumBeforeSend(event, fromPartial({}))).toBe(true)
+  })
+
   it('keeps application errors and tags their origin', () => {
     const event = createErrorEvent(
       'Application failed',

src/platform/telemetry/datadogRumBeforeSend.ts

@@ -9,6 +9,32 @@ const RUM_NOISE_HOSTS = [
   'googletagmanager.com'
 ]
 
+/**
+ * Origins of analytics/marketing scripts we embed but do not host. A load
+ * failure from one of these is a client-side blocker (ad blocker, tracking
+ * protection, corporate proxy, strict DNS), not a product defect, so it must
+ * not count the session as errored. Only load failures are dropped — a runtime
+ * error thrown by one of these scripts still reports.
+ */
+const THIRD_PARTY_SCRIPT_ORIGINS = [
+  'connect.facebook.net',
+  'cdn.sy-d.io',
+  'e2.sy-d.io',
+  'googletagmanager.com',
+  'google-analytics.com',
+  'utt.impactcdn.com',
+  'px.ads.linkedin.com'
+]
+
+const RESOURCE_LOAD_FAILURE_MARKERS = [
+  'resource:loadError',
+  'loadError',
+  'Failed to load',
+  'Failed to fetch',
+  'Load failed',
+  'csp_violation'
+]
+
 const FIRST_PARTY_EXTENSION_FOLDERS = new Set(['cloud', 'core'])
 
 type RumErrorOrigin =
@@ -33,12 +59,25 @@ export function classifyRumErrorOrigin(stack?: string): RumErrorOrigin {
   return { origin: 'third_party' }
 }
 
+function isThirdPartyLoadFailure(event: RumErrorEvent): boolean {
+  const resourceUrl = event.error.resource?.url
+  const target = resourceUrl ?? event.error.message
+  if (
+    !resourceUrl &&
+    !RESOURCE_LOAD_FAILURE_MARKERS.some((marker) => target.includes(marker))
+  ) {
+    return false
+  }
+  return THIRD_PARTY_SCRIPT_ORIGINS.some((origin) => target.includes(origin))
+}
+
 function shouldKeepRumEvent(event: Parameters<RumBeforeSend>[0]): boolean {
   if (event.type !== 'error') return true
 
   const message = event.error.message
   if (message.startsWith('intervention:')) return false
   if (message.includes('ResizeObserver loop')) return false
+  if (isThirdPartyLoadFailure(event)) return false
 
   const isNetworkNoise =
     message.includes('csp_violation') || message.includes('Failed to fetch')

src/platform/telemetry/providers/cloud/CustomerIoTelemetryProvider.ts

@@ -4,6 +4,8 @@ import { watch } from 'vue'
 
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { i18n } from '@/i18n'
+import { whenStoresReady } from '@/platform/telemetry/storeReadiness'
+import { reportThirdPartyLoadFailure } from '@/platform/telemetry/thirdPartyLoadFailure'
 import type { AuthUserInfo } from '@/types/authTypes'
 
 import { TelemetryEvents } from '../../types'
@@ -67,7 +69,15 @@ export class CustomerIoTelemetryProvider implements TelemetryProvider {
     }
 
     void import('@customerio/cdp-analytics-browser')
-      .then(({ AnalyticsBrowser, InAppPlugin }) => {
+      .catch((error) => {
+        reportThirdPartyLoadFailure('Customer.io', error)
+        this.isEnabled = false
+        this.eventQueue = []
+        return null
+      })
+      .then(async (sdk) => {
+        if (!sdk) return
+        const { AnalyticsBrowser, InAppPlugin } = sdk
         const analytics = AnalyticsBrowser.load({ writeKey })
         const inAppRegistration = analytics.register(
           InAppPlugin({
@@ -81,6 +91,7 @@ export class CustomerIoTelemetryProvider implements TelemetryProvider {
         )
         this.analytics = analytics
 
+        await whenStoresReady()
         const currentUser = useCurrentUser()
         const identifyResolvedUser = (user: AuthUserInfo) => {
           const identity = {
@@ -130,7 +141,7 @@ export class CustomerIoTelemetryProvider implements TelemetryProvider {
           })
       })
       .catch((error) => {
-        console.error('Failed to load Customer.io:', error)
+        console.error('Failed to initialize Customer.io:', error)
         this.isEnabled = false
         this.eventQueue = []
       })

src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.ts

@@ -3,6 +3,8 @@ import { omit } from 'es-toolkit'
 import { watch } from 'vue'
 
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
+import { whenStoresReady } from '@/platform/telemetry/storeReadiness'
+import { reportThirdPartyLoadFailure } from '@/platform/telemetry/thirdPartyLoadFailure'
 import {
   checkForCompletedTopup as checkTopupUtil,
   clearTopupTracking as clearTopupUtil,
@@ -106,7 +108,13 @@ export class MixpanelTelemetryProvider implements TelemetryProvider {
       try {
         // Dynamic import to avoid bundling mixpanel in OSS builds
         void import('mixpanel-browser')
+          .catch((error) => {
+            reportThirdPartyLoadFailure('Mixpanel', error)
+            this.isEnabled = false
+            return null
+          })
           .then((mixpanelModule) => {
+            if (!mixpanelModule) return
             this.mixpanel = mixpanelModule.default
             this.mixpanel.init(token, {
               debug: import.meta.env.DEV,
@@ -117,16 +125,22 @@ export class MixpanelTelemetryProvider implements TelemetryProvider {
               loaded: () => {
                 this.isInitialized = true
                 this.flushEventQueue() // flush events that were queued while initializing
-                useCurrentUser().onUserResolved((user) => {
-                  if (this.mixpanel && user.id) {
-                    this.mixpanel.identify(user.id)
-                  }
-                })
+                void whenStoresReady()
+                  .then(() => {
+                    useCurrentUser().onUserResolved((user) => {
+                      if (this.mixpanel && user.id) {
+                        this.mixpanel.identify(user.id)
+                      }
+                    })
+                  })
+                  .catch((error) => {
+                    console.error('Failed to identify Mixpanel user:', error)
+                  })
               }
             })
           })
           .catch((error) => {
-            console.error('Failed to load Mixpanel:', error)
+            console.error('Failed to initialize Mixpanel:', error)
             this.isEnabled = false
           })
       } catch (error) {

src/platform/telemetry/providers/cloud/PostHogTelemetryProvider.initFailure.test.ts

@@ -0,0 +1,71 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import type * as VueModule from 'vue'
+
+const hoisted = vi.hoisted(() => ({
+  init: vi.fn(),
+  onUserResolved: vi.fn(),
+  onUserLogout: vi.fn()
+}))
+
+vi.mock('posthog-js', () => ({
+  default: {
+    init: hoisted.init,
+    capture: vi.fn(),
+    identify: vi.fn(),
+    register: vi.fn(),
+    people: { set: vi.fn(), set_once: vi.fn() },
+    reset: vi.fn()
+  }
+}))
+
+vi.mock('@/composables/auth/useCurrentUser', () => ({
+  useCurrentUser: () => ({
+    onUserResolved: hoisted.onUserResolved,
+    onUserLogout: hoisted.onUserLogout
+  })
+}))
+
+vi.mock('@/platform/remoteConfig/remoteConfig', async () => {
+  const { ref } = await vi.importActual<typeof VueModule>('vue')
+  return { remoteConfig: ref(null) }
+})
+
+vi.mock('@/composables/billing/useBillingContext', async () => {
+  const { ref } = await vi.importActual<typeof VueModule>('vue')
+  return { useBillingContext: () => ({ tier: ref(null) }) }
+})
+
+import { PostHogTelemetryProvider } from './PostHogTelemetryProvider'
+
+function messagesFor(spy: { mock: { calls: unknown[][] } }): string[] {
+  return spy.mock.calls
+    .map((args) => String(args[0]))
+    .filter((message) => message.includes('PostHog'))
+}
+
+describe('PostHogTelemetryProvider initialisation failures', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    window.__CONFIG__ = {
+      posthog_project_token: 'phc_test_token'
+    } as typeof window.__CONFIG__
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('surfaces an error when our own initialisation throws', async () => {
+    hoisted.init.mockImplementation(() => {
+      throw new TypeError("Cannot read properties of undefined (reading '_s')")
+    })
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const error = vi.spyOn(console, 'error').mockImplementation(() => {})
+
+    new PostHogTelemetryProvider()
+    await new Promise((resolve) => setTimeout(resolve, 0))
+
+    expect(messagesFor(error)).toEqual(['Failed to initialize PostHog:'])
+    expect(messagesFor(warn)).toEqual([])
+  })
+})

src/platform/telemetry/providers/cloud/PostHogTelemetryProvider.ts

@@ -7,6 +7,8 @@ import { createPostHogBeforeSend } from '@comfyorg/shared-frontend-utils/piiUtil
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
+import { whenStoresReady } from '@/platform/telemetry/storeReadiness'
+import { reportThirdPartyLoadFailure } from '@/platform/telemetry/thirdPartyLoadFailure'
 import type { RemoteConfig } from '@/platform/remoteConfig/types'
 import { getExecutionContext } from '@/platform/telemetry/utils/getExecutionContext'
 
@@ -141,7 +143,13 @@ export class PostHogTelemetryProvider implements TelemetryProvider {
     if (apiKey) {
       try {
         void import('posthog-js')
-          .then((posthogModule) => {
+          .catch((error) => {
+            reportThirdPartyLoadFailure('PostHog', error)
+            this.isEnabled = false
+            return null
+          })
+          .then(async (posthogModule) => {
+            if (!posthogModule) return
             this.posthog = posthogModule.default
             const serverConfig = remoteConfig.value?.posthog_config ?? {}
             this.posthog!.init(apiKey, {
@@ -168,6 +176,7 @@ export class PostHogTelemetryProvider implements TelemetryProvider {
             this.flushEventQueue()
             this.registerDesktopEntryProps()
 
+            await whenStoresReady()
             const currentUser = useCurrentUser()
             currentUser.onUserResolved((user) => {
               if (this.posthog && user.id) {
@@ -190,7 +199,7 @@ export class PostHogTelemetryProvider implements TelemetryProvider {
             })
           })
           .catch((error) => {
-            console.error('Failed to load PostHog:', error)
+            console.error('Failed to initialize PostHog:', error)
             this.isEnabled = false
           })
       } catch (error) {

src/platform/telemetry/storeReadiness.test.ts

@@ -0,0 +1,39 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import {
+  markStoresPending,
+  markStoresReady,
+  whenStoresReady
+} from './storeReadiness'
+
+afterEach(() => {
+  markStoresReady()
+  setActivePinia(undefined)
+})
+
+describe('whenStoresReady', () => {
+  it('resolves immediately when no pending window was opened', async () => {
+    await expect(whenStoresReady()).resolves.toBeUndefined()
+  })
+
+  it('blocks while stores are pending and resolves when they are ready', async () => {
+    markStoresPending()
+    const resolved = vi.fn()
+    void whenStoresReady().then(resolved)
+
+    await Promise.resolve()
+    expect(resolved).not.toHaveBeenCalled()
+
+    markStoresReady()
+    await whenStoresReady()
+    expect(resolved).toHaveBeenCalledOnce()
+  })
+
+  it('resolves during a pending window once a Pinia instance is active', async () => {
+    markStoresPending()
+    setActivePinia(createPinia())
+
+    await expect(whenStoresReady()).resolves.toBeUndefined()
+  })
+})