Add CSP-specific metrics and better error message (#815)

Author: silesky

examples/standalone-playground/package.json

@@ -5,10 +5,13 @@
     "hoistingLimits": "workspaces"
   },
   "scripts": {
-    "dev": "yarn concurrently 'yarn run -T watch --filter=standalone-playground' 'sleep 10 && npx http-server .'",
+    "dev": "yarn concurrently 'yarn run -T watch --filter=standalone-playground' 'sleep 10 && yarn http-server .'",
     "concurrently": "yarn run -T concurrently"
   },
   "dependencies": {
     "@segment/analytics-next": "workspace:^"
+  },
+  "devDependencies": {
+    "http-server": "14.1.1"
   }
 }

packages/browser/src/browser/__tests__/csp-detection.test.ts

@@ -1,7 +1,6 @@
 import jsdom, { JSDOM } from 'jsdom'
 import unfetch from 'unfetch'
 import { LegacySettings } from '..'
-import { onCSPError } from '../../lib/csp-detection'
 import { pWhile } from '../../lib/p-while'
 import { snippet } from '../../tester/__fixtures__/segment-snippet'
 import * as Factory from '../../test-helpers/factories'
@@ -122,15 +121,18 @@ describe('CSP Detection', () => {
   })
 
   it('does not revert to classic when CSP error is report only', async () => {
+    await import('../standalone')
     const ogScripts = Array.from(document.scripts)
 
     const warnSpy = jest.spyOn(console, 'warn')
-
-    await onCSPError({
-      blockedURI: 'cdn.segment.com',
-      disposition: 'report',
-    } as unknown as SecurityPolicyViolationEvent)
-
+    const cspSpy = jest.fn()
+    document.addEventListener('securitypolicyviolation', cspSpy)
+
+    const event = new window.Event('securitypolicyviolation') as any
+    event.disposition = 'report'
+    event.blockedURI = 'cdn.segment.com'
+    document.dispatchEvent(event)
+    expect(cspSpy).toBeCalled()
     expect(warnSpy).not.toHaveBeenCalled()
     expect(Array.from(document.scripts)).toEqual(ogScripts)
   })

packages/browser/src/browser/standalone.ts

@@ -24,22 +24,40 @@ import '../lib/csp-detection'
 import { shouldPolyfill } from '../lib/browser-polyfill'
 import { RemoteMetrics } from '../core/stats/remote-metrics'
 import { embeddedWriteKey } from '../lib/embedded-write-key'
-import { onCSPError } from '../lib/csp-detection'
+import {
+  loadAjsClassicFallback,
+  isAnalyticsCSPError,
+} from '../lib/csp-detection'
+
+let ajsIdentifiedCSP = false
+
+const sendErrorMetrics = (() => {
+  const metrics = new RemoteMetrics()
+  return (tags: string[]) => {
+    metrics.increment('analytics_js.invoke.error', [
+      ...tags,
+      `wk:${embeddedWriteKey()}`,
+    ])
+  }
+})()
 
 function onError(err?: unknown) {
   console.error('[analytics.js]', 'Failed to load Analytics.js', err)
-
-  new RemoteMetrics().increment('analytics_js.invoke.error', [
+  sendErrorMetrics([
     'type:initialization',
     ...(err instanceof Error
       ? [`message:${err?.message}`, `name:${err?.name}`]
       : []),
-    `wk:${embeddedWriteKey()}`,
   ])
 }
 
 document.addEventListener('securitypolicyviolation', (e) => {
-  onCSPError(e).catch(console.error)
+  if (ajsIdentifiedCSP || !isAnalyticsCSPError(e)) {
+    return
+  }
+  ajsIdentifiedCSP = true
+  sendErrorMetrics(['type:csp'])
+  loadAjsClassicFallback().catch(console.error)
 })
 
 /**

packages/browser/src/core/constants/index.ts

@@ -0,0 +1 @@
+export const SEGMENT_API_HOST = 'api.segment.io/v1'

packages/browser/src/core/stats/remote-metrics.ts

@@ -1,6 +1,7 @@
 import { fetch } from '../../lib/fetch'
 import { version } from '../../generated/version'
 import { getVersionType } from '../../plugins/segmentio/normalize'
+import { SEGMENT_API_HOST } from '../constants'
 
 export interface MetricsOptions {
   host?: string
@@ -60,7 +61,7 @@ export class RemoteMetrics {
   queue: RemoteMetric[]
 
   constructor(options?: MetricsOptions) {
-    this.host = options?.host ?? 'api.segment.io/v1'
+    this.host = options?.host ?? SEGMENT_API_HOST
     this.sampleRate = options?.sampleRate ?? 1
     this.flushTimer = options?.flushTimer ?? 30 * 1000 /* 30s */
     this.maxQueueSize = options?.maxQueueSize ?? 20

packages/browser/src/lib/csp-detection.ts

@@ -1,23 +1,17 @@
 import { loadScript } from './load-script'
 import { getLegacyAJSPath } from './parse-cdn'
 
-let ajsIdentifiedCSP = false
-
-export async function onCSPError(
-  e: SecurityPolicyViolationEvent & { disposition?: 'enforce' | 'report' }
-): Promise<void> {
-  if (e.disposition === 'report') {
-    return
-  }
-
-  if (!e.blockedURI.includes('cdn.segment') || ajsIdentifiedCSP) {
-    return
-  }
-
-  ajsIdentifiedCSP = true
+type CSPErrorEvent = SecurityPolicyViolationEvent & {
+  disposition?: 'enforce' | 'report'
+}
+export const isAnalyticsCSPError = (e: CSPErrorEvent) => {
+  return e.disposition !== 'report' && e.blockedURI.includes('cdn.segment')
+}
 
+export async function loadAjsClassicFallback(): Promise<void> {
   console.warn(
-    'Your CSP policy is missing permissions required in order to run Analytics.js 2.0'
+    'Your CSP policy is missing permissions required in order to run Analytics.js 2.0',
+    'https://segment.com/docs/connections/sources/catalog/libraries/website/javascript/upgrade-to-ajs2/#using-a-strict-content-security-policy-on-the-page'
   )
   console.warn('Reverting to Analytics.js 1.0')
 

packages/browser/src/plugins/segmentio/index.ts

@@ -11,6 +11,7 @@ import batch, { BatchingDispatchConfig } from './batched-dispatcher'
 import standard, { StandardDispatcherConfig } from './fetch-dispatcher'
 import { normalize } from './normalize'
 import { scheduleFlush } from './schedule-flush'
+import { SEGMENT_API_HOST } from '../../core/constants'
 
 type DeliveryStrategy =
   | {
@@ -71,7 +72,7 @@ export function segmentio(
   const inflightEvents = new Set<Context>()
   const flushing = false
 
-  const apiHost = settings?.apiHost ?? 'api.segment.io/v1'
+  const apiHost = settings?.apiHost ?? SEGMENT_API_HOST
   const protocol = settings?.protocol ?? 'https'
   const remote = `${protocol}://${apiHost}`
 

yarn.lock

@@ -926,6 +926,7 @@ __metadata:
   resolution: "@example/standalone-playground@workspace:examples/standalone-playground"
   dependencies:
     "@segment/analytics-next": "workspace:^"
+    http-server: 14.1.1
   languageName: unknown
   linkType: soft