✨ [RUMF-1175] collect reports and csp violation

packages/core/src/domain/report/browser.types.ts

@@ -0,0 +1,47 @@
+export interface BrowserWindow {
+  ReportingObserver?: ReportingObserverConstructor
+}
+
+export interface ReportingObserver {
+  disconnect(): void
+  observe(): void
+  takeRecords(): Report[]
+}
+
+export interface ReportingObserverConstructor {
+  new (callback: ReportingObserverCallback, option: ReportingObserverOption): ReportingObserver
+}
+
+export type ReportType = 'intervention' | 'deprecation'
+
+export interface Report {
+  type: ReportType
+  url: string
+  body: DeprecationReportBody | InterventionReportBody
+}
+
+export interface ReportingObserverCallback {
+  (reports: Report[], observer: ReportingObserver): void
+}
+
+export interface ReportingObserverOption {
+  types: ReportType[]
+  buffered: boolean
+}
+
+interface DeprecationReportBody {
+  id: string
+  message: string
+  lineNumber: number
+  columnNumber: number
+  sourceFile: string
+  anticipatedRemoval?: Date
+}
+
+interface InterventionReportBody {
+  id: string
+  message: string
+  lineNumber: number
+  columnNumber: number
+  sourceFile: string
+}

packages/core/src/domain/report/reportObservable.spec.ts

@@ -0,0 +1,60 @@
+import type { Subscription } from '../../tools/observable'
+import { stubReportingObserver, stubCspEventListener } from '../../../test/stubReportApis'
+import { initReportObservable, RawReportType } from './reportObservable'
+
+describe('report observable', () => {
+  let reportingObserverStub: { reset(): void; raiseReport(type: string): void }
+  let cspEventListenerStub: { dispatchEvent(): void }
+  let consoleSubscription: Subscription
+  let notifyReport: jasmine.Spy
+
+  beforeEach(() => {
+    reportingObserverStub = stubReportingObserver()
+    cspEventListenerStub = stubCspEventListener()
+    notifyReport = jasmine.createSpy('notifyReport')
+  })
+
+  afterEach(() => {
+    reportingObserverStub.reset()
+    consoleSubscription.unsubscribe()
+  })
+  ;[RawReportType.deprecation, RawReportType.intervention].forEach((type) => {
+    it(`should notify ${type} reports`, () => {
+      consoleSubscription = initReportObservable([type]).subscribe(notifyReport)
+      reportingObserverStub.raiseReport(type)
+
+      const [report] = notifyReport.calls.mostRecent().args
+
+      expect(report).toEqual(
+        jasmine.objectContaining({
+          message: `${type}: foo bar`,
+          subtype: 'NavigatorVibrate',
+          type,
+        })
+      )
+    })
+  })
+
+  it(`should compute stack for ${RawReportType.intervention}`, () => {
+    consoleSubscription = initReportObservable([RawReportType.intervention]).subscribe(notifyReport)
+    reportingObserverStub.raiseReport(RawReportType.intervention)
+
+    const [report] = notifyReport.calls.mostRecent().args
+
+    expect(report.stack).toEqual(`NavigatorVibrate: foo bar
+  at <anonymous> @ http://foo.bar/index.js:20:10`)
+  })
+
+  it(`should notify ${RawReportType.cspViolation}`, () => {
+    consoleSubscription = initReportObservable([RawReportType.cspViolation]).subscribe(notifyReport)
+    cspEventListenerStub.dispatchEvent()
+
+    expect(notifyReport).toHaveBeenCalledOnceWith({
+      message: `csp_violation: 'blob' blocked by 'worker-src' directive`,
+      type: 'csp_violation',
+      subtype: 'worker-src',
+      stack: `worker-src: 'blob' blocked by 'worker-src' directive of the policy "worker-src 'none'"
+  at <anonymous> @ http://foo.bar/index.js:17:8`,
+    })
+  })
+})

packages/core/src/domain/report/reportObservable.ts

@@ -0,0 +1,124 @@
+import { toStackTraceString } from '../../tools/error'
+import { mergeObservables, Observable } from '../../tools/observable'
+import { DOM_EVENT, includes, addEventListener, safeTruncate } from '../../tools/utils'
+import { monitor } from '../internalMonitoring'
+import type { Report, BrowserWindow, ReportType } from './browser.types'
+
+export const RawReportType = {
+  intervention: 'intervention',
+  deprecation: 'deprecation',
+  cspViolation: 'csp_violation',
+} as const
+
+export type RawReportType = typeof RawReportType[keyof typeof RawReportType]
+
+export interface RawReport {
+  type: RawReportType
+  subtype: string
+  message: string
+  stack?: string
+}
+
+export function initReportObservable(apis: RawReportType[]) {
+  const observables: Array<Observable<RawReport>> = []
+
+  if (includes(apis, RawReportType.cspViolation)) {
+    observables.push(createCspViolationReportObservable())
+  }
+
+  const reportTypes = apis.filter((api: RawReportType): api is ReportType => api !== RawReportType.cspViolation)
+  if (reportTypes.length) {
+    observables.push(createReportObservable(reportTypes))
+  }
+
+  return mergeObservables<RawReport>(...observables)
+}
+
+function createReportObservable(reportTypes: ReportType[]) {
+  const observable = new Observable<RawReport>(() => {
+    if (!(window as BrowserWindow).ReportingObserver) {
+      return
+    }
+
+    const handleReports = monitor((reports: Report[]) =>
+      reports.forEach((report) => {
+        observable.notify(buildRawReportFromReport(report))
+      })
+    )
+
+    const observer = new (window as BrowserWindow).ReportingObserver!(handleReports, {
+      types: reportTypes,
+      buffered: true,
+    })
+
+    observer.observe()
+    return () => {
+      observer.disconnect()
+    }
+  })
+
+  return observable
+}
+
+function createCspViolationReportObservable() {
+  const observable = new Observable<RawReport>(() => {
+    const handleCspViolation = monitor((event: SecurityPolicyViolationEvent) => {
+      observable.notify(buildRawReportFromCspViolation(event))
+    })
+
+    const { stop } = addEventListener(document, DOM_EVENT.SECURITY_POLICY_VIOLATION, handleCspViolation)
+
+    return stop
+  })
+  return observable
+}
+
+function buildRawReportFromReport({ type, body }: Report): RawReport {
+  return {
+    type,
+    subtype: body.id,
+    message: `${type}: ${body.message}`,
+    stack: buildStack(body.id, body.message, body.sourceFile, body.lineNumber, body.columnNumber),
+  }
+}
+
+function buildRawReportFromCspViolation(event: SecurityPolicyViolationEvent): RawReport {
+  const type = RawReportType.cspViolation
+  const message = `'${event.blockedURI}' blocked by '${event.effectiveDirective}' directive`
+  return {
+    type: RawReportType.cspViolation,
+    subtype: event.effectiveDirective,
+    message: `${type}: ${message}`,
+    stack: buildStack(
+      event.effectiveDirective,
+      `${message} of the policy "${safeTruncate(event.originalPolicy, 100, '...')}"`,
+      event.sourceFile,
+      event.lineNumber,
+      event.columnNumber
+    ),
+  }
+}
+
+function buildStack(
+  name: string,
+  message: string,
+  sourceFile: string | undefined,
+  lineNumber: number | undefined,
+  columnNumber: number | undefined
+): string | undefined {
+  return (
+    sourceFile &&
+    toStackTraceString({
+      name,
+      message,
+      stack: [
+        {
+          func: '?',
+          url: sourceFile,
+          line: lineNumber,
+          column: columnNumber,
+        },
+      ],
+    })
+  )
+}

packages/core/src/index.ts

@@ -12,6 +12,7 @@ export {
 export { trackRuntimeError } from './domain/error/trackRuntimeError'
 export { computeStackTrace, StackTrace } from './domain/tracekit'
 export { defineGlobal, makePublicApi } from './boot/init'
+export { initReportObservable, RawReport, RawReportType } from './domain/report/reportObservable'
 export {
   startInternalMonitoring,
   InternalMonitoring,
@@ -50,6 +51,7 @@ export {
   createHandlingStack,
   RawError,
   toStackTraceString,
+  getFileFromStackTraceString,
 } from './tools/error'
 export { Context, ContextArray, ContextValue } from './tools/context'
 export { areCookiesAuthorized, getCookie, setCookie, deleteCookie, COOKIE_ACCESS_DELAY } from './browser/cookie'

packages/core/src/tools/error.spec.ts

@@ -1,5 +1,5 @@
 import type { StackTrace } from '../domain/tracekit'
-import { createHandlingStack, formatUnknownError } from './error'
+import { createHandlingStack, formatUnknownError, getFileFromStackTraceString } from './error'
 
 describe('formatUnknownError', () => {
   const NOT_COMPUTED_STACK_TRACE: StackTrace = { name: undefined, message: undefined, stack: [] } as any
@@ -72,6 +72,21 @@ describe('formatUnknownError', () => {
   })
 })
 
+describe('getFileFromStackTraceString', () => {
+  it('should get the first source file of the stack', () => {
+    expect(
+      getFileFromStackTraceString(`TypeError: oh snap!
+  at foo(1, bar) @ http://path/to/file.js:52:15
+  at <anonymous> @ http://path/to/file.js:12
+  at <anonymous>(baz) @ http://path/to/file.js`)
+    ).toEqual('http://path/to/file.js:52:15')
+  })
+
+  it('should get undefined if no source file is in the stack', () => {
+    expect(getFileFromStackTraceString(`TypeError: oh snap!`)).not.toBeDefined()
+  })
+})
+
 describe('createHandlingStack', () => {
   let handlingStack: string
   function internalCall() {

packages/core/src/tools/error.ts

@@ -27,6 +27,7 @@ export const ErrorSource = {
   LOGGER: 'logger',
   NETWORK: 'network',
   SOURCE: 'source',
+  REPORT: 'report',
 } as const
 
 export enum ErrorHandling {
@@ -72,6 +73,10 @@ export function toStackTraceString(stack: StackTrace) {
   return result
 }
 
+export function getFileFromStackTraceString(stack: string) {
+  return /@ (.+)/.exec(stack)?.[1]
+}
+
 export function formatErrorMessage(stack: StackTrace) {
   return `${stack.name || 'Error'}: ${stack.message!}`
 }

packages/core/src/tools/utils.spec.ts

@@ -292,6 +292,16 @@ describe('utils', () => {
       expect(truncated.length).toBe(7)
       expect(truncated).toBe('12345😎')
     })
+
+    it('should add the suffix when the string is truncated', () => {
+      const truncated = safeTruncate('12345😎890', 6, '...')
+      expect(truncated).toBe('12345😎...')
+    })
+
+    it('should not add the suffix when the string is not truncated', () => {
+      const truncated = safeTruncate('1234😎', 5, '...')
+      expect(truncated).toBe('1234😎')
+    })
   })
 
   it('should perform a draw', () => {

packages/core/src/tools/utils.ts

@@ -36,6 +36,7 @@ export const enum DOM_EVENT {
   INPUT = 'input',
   PLAY = 'play',
   PAUSE = 'pause',
+  SECURITY_POLICY_VIOLATION = 'securitypolicyviolation',
 }
 
 export enum ResourceType {
@@ -318,13 +319,14 @@ export function findCommaSeparatedValue(rawString: string, name: string) {
   return matches ? matches[1] : undefined
 }
 
-export function safeTruncate(candidate: string, length: number) {
+export function safeTruncate(candidate: string, length: number, suffix = '') {
   const lastChar = candidate.charCodeAt(length - 1)
-  // check if it is the high part of a surrogate pair
-  if (lastChar >= 0xd800 && lastChar <= 0xdbff) {
-    return candidate.slice(0, length + 1)
-  }
-  return candidate.slice(0, length)
+  const isLastCharSurrogatePair = lastChar >= 0xd800 && lastChar <= 0xdbff
+  const correctedLength = isLastCharSurrogatePair ? length + 1 : length
+
+  if (candidate.length <= correctedLength) return candidate
+
+  return `${candidate.slice(0, correctedLength)}${suffix}`
 }
 
 export interface EventEmitter {