makethisbetter 1.0.0

package/src/annotate/toolbar.test.ts

@@ -0,0 +1,132 @@
+import { afterEach, describe, it, expect, vi } from 'vitest'
+import { ShadowContainer } from '../widget/shadow'
+import { AnnotationToolbar } from './toolbar'
+import { getMessages } from '../i18n'
+
+describe('AnnotationToolbar', () => {
+  let shadow: ShadowContainer
+  let toolbar: AnnotationToolbar
+  const messages = getMessages('en')
+
+  function setup(opts?: { onModeChange?: (mode: 'markup' | 'record') => void }) {
+    shadow = new ShadowContainer()
+    toolbar = new AnnotationToolbar(shadow, messages, vi.fn(), opts?.onModeChange)
+  }
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  describe('constructor', () => {
+    it('creates a toolbar element in the shadow root', () => {
+      setup()
+      expect(shadow.root.querySelector('.mtb-toolbar')).toBeInstanceOf(HTMLDivElement)
+      toolbar.destroy()
+    })
+
+    it('renders markup and record buttons', () => {
+      setup()
+      expect(shadow.root.querySelector('.mtb-toolbar-mode-markup')).toBeInstanceOf(HTMLButtonElement)
+      expect(shadow.root.querySelector('.mtb-toolbar-mode-record')).toBeInstanceOf(HTMLButtonElement)
+      toolbar.destroy()
+    })
+
+    it('renders the hint text', () => {
+      setup()
+      const hint = shadow.root.querySelector('.mtb-toolbar-hint')
+      expect(hint!.textContent).toBe(messages.toolbar.hint)
+      toolbar.destroy()
+    })
+
+    it('renders an exit button', () => {
+      setup()
+      expect(shadow.root.querySelector('.mtb-exit-btn')).toBeInstanceOf(HTMLButtonElement)
+      toolbar.destroy()
+    })
+
+    it('starts in markup mode with markup button active', () => {
+      setup()
+      expect(toolbar.getMode()).toBe('markup')
+      const markupBtn = shadow.root.querySelector('.mtb-toolbar-mode-markup')!
+      expect(markupBtn.classList.contains('active')).toBe(true)
+      toolbar.destroy()
+    })
+  })
+
+  describe('setMode', () => {
+    it('switches to record mode and updates active class', () => {
+      setup()
+      toolbar.setMode('record')
+      expect(toolbar.getMode()).toBe('record')
+
+      const markupBtn = shadow.root.querySelector('.mtb-toolbar-mode-markup')!
+      const recordBtn = shadow.root.querySelector('.mtb-toolbar-mode-record')!
+      expect(markupBtn.classList.contains('active')).toBe(false)
+      expect(recordBtn.classList.contains('active')).toBe(true)
+
+      const hint = shadow.root.querySelector('.mtb-toolbar-hint')!
+      expect(hint.textContent).toBe(messages.toolbar.hintRecord)
+      toolbar.destroy()
+    })
+
+    it('switches back to markup mode', () => {
+      setup()
+      toolbar.setMode('record')
+      toolbar.setMode('markup')
+      expect(toolbar.getMode()).toBe('markup')
+
+      const hint = shadow.root.querySelector('.mtb-toolbar-hint')!
+      expect(hint.textContent).toBe(messages.toolbar.hint)
+      toolbar.destroy()
+    })
+  })
+
+  describe('button clicks', () => {
+    it('calls onModeChange when markup button is clicked', () => {
+      const onModeChange = vi.fn()
+      setup({ onModeChange })
+      const markupBtn = shadow.root.querySelector('.mtb-toolbar-mode-markup')!
+      markupBtn.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+      expect(onModeChange).toHaveBeenCalledWith('markup')
+      toolbar.destroy()
+    })
+
+    it('calls onModeChange when record button is clicked', () => {
+      const onModeChange = vi.fn()
+      setup({ onModeChange })
+      const recordBtn = shadow.root.querySelector('.mtb-toolbar-mode-record')!
+      recordBtn.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+      expect(onModeChange).toHaveBeenCalledWith('record')
+      toolbar.destroy()
+    })
+
+    it('calls onExit when exit button is clicked', () => {
+      shadow = new ShadowContainer()
+      const onExit = vi.fn()
+      toolbar = new AnnotationToolbar(shadow, messages, onExit)
+
+      const exitBtn = shadow.root.querySelector('.mtb-exit-btn')!
+      exitBtn.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+      expect(onExit).toHaveBeenCalledOnce()
+      toolbar.destroy()
+    })
+
+    it('works without onModeChange callback', () => {
+      setup()
+      const recordBtn = shadow.root.querySelector('.mtb-toolbar-mode-record')!
+      expect(() => {
+        recordBtn.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+      }).not.toThrow()
+      expect(toolbar.getMode()).toBe('record')
+      toolbar.destroy()
+    })
+  })
+
+  describe('destroy', () => {
+    it('removes the toolbar element from the shadow root', () => {
+      setup()
+      toolbar.destroy()
+      expect(shadow.root.querySelector('.mtb-toolbar')).toBeNull()
+    })
+  })
+})

package/src/annotate/toolbar.ts

@@ -0,0 +1,81 @@
+import type { ShadowContainer } from '../widget/shadow'
+import type { I18nMessages } from '../i18n'
+
+export type ToolbarMode = 'markup' | 'record'
+
+export class AnnotationToolbar {
+  private el: HTMLDivElement
+  private hintEl!: HTMLSpanElement
+  private markupBtn!: HTMLButtonElement
+  private recordBtn!: HTMLButtonElement
+  private messages: I18nMessages
+  private currentMode: ToolbarMode = 'markup'
+
+  constructor(
+    shadow: ShadowContainer,
+    messages: I18nMessages,
+    onExit: () => void,
+    onModeChange?: (mode: ToolbarMode) => void,
+  ) {
+    this.messages = messages
+
+    this.el = shadow.el<HTMLDivElement>('div', 'mtb-toolbar')
+    this.el.innerHTML = this.buildHTML(messages)
+    shadow.append(this.el)
+
+    this.hintEl = this.el.querySelector('.mtb-toolbar-hint')!
+    this.markupBtn = this.el.querySelector('.mtb-toolbar-mode-markup')!
+    this.recordBtn = this.el.querySelector('.mtb-toolbar-mode-record')!
+
+    this.markupBtn.addEventListener('click', () => {
+      this.setMode('markup')
+      onModeChange?.('markup')
+    })
+    this.recordBtn.addEventListener('click', () => {
+      this.setMode('record')
+      onModeChange?.('record')
+    })
+    this.el.querySelector('.mtb-exit-btn')!.addEventListener('click', onExit)
+  }
+
+  private buildHTML(m: I18nMessages): string {
+    return `
+      <div class="mtb-toolbar-modes">
+        <button class="mtb-toolbar-mode-btn mtb-toolbar-mode-markup active">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><line x1="12" y1="3" x2="12" y2="7"/><line x1="12" y1="17" x2="12" y2="21"/><line x1="3" y1="12" x2="7" y2="12"/><line x1="17" y1="12" x2="21" y2="12"/></svg>${m.toolbar.markup}
+        </button>
+        <button class="mtb-toolbar-mode-btn mtb-toolbar-mode-record">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="4" fill="currentColor" stroke="none"/></svg>${m.toolbar.record}
+        </button>
+      </div>
+      <span class="mtb-toolbar-hint">${m.toolbar.hint}</span>
+      <span class="mtb-toolbar-sep"></span>
+      <button class="mtb-exit-btn">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M18 6L6 18M6 6l12 12"/>
+        </svg>${m.toolbar.exit}
+      </button>
+    `
+  }
+
+  setMode(mode: ToolbarMode): void {
+    this.currentMode = mode
+    if (mode === 'markup') {
+      this.markupBtn.classList.add('active')
+      this.recordBtn.classList.remove('active')
+      this.hintEl.textContent = this.messages.toolbar.hint
+    } else {
+      this.markupBtn.classList.remove('active')
+      this.recordBtn.classList.add('active')
+      this.hintEl.textContent = this.messages.toolbar.hintRecord
+    }
+  }
+
+  getMode(): ToolbarMode {
+    return this.currentMode
+  }
+
+  destroy(): void {
+    this.el.remove()
+  }
+}

package/src/api/client.test.ts

@@ -0,0 +1,75 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { ApiClient } from './client'
+import type { FeedbackPayload } from '../types'
+
+const mockPayload: FeedbackPayload = {
+  description: 'Test feedback',
+  page_url: 'https://example.com',
+  user_agent: 'Mozilla/5.0',
+  browser: 'Chrome 130',
+  os: 'macOS',
+  screen_width: 1440,
+  screen_height: 900,
+  console_errors: [],
+  annotations: [],
+}
+
+describe('ApiClient', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('sends POST to correct URL with project key header', async () => {
+    const fetchSpy = vi.spyOn(globalThis, 'fetch').mockResolvedValue(
+      new Response(null, { status: 201 }),
+    )
+
+    const client = new ApiClient('proj_test123', 'https://api.example.com')
+    await client.submitFeedback(mockPayload, null)
+
+    expect(fetchSpy).toHaveBeenCalledWith(
+      'https://api.example.com/widget/feedbacks',
+      expect.objectContaining({
+        method: 'POST',
+        headers: { 'X-Project-Key': 'proj_test123' },
+      }),
+    )
+  })
+
+  it('includes description in FormData', async () => {
+    let capturedBody: FormData | null = null
+    vi.spyOn(globalThis, 'fetch').mockImplementation(async (_url: RequestInfo | URL, init?: RequestInit) => {
+      capturedBody = init?.body instanceof FormData ? init.body : null
+      return new Response(null, { status: 201 })
+    })
+
+    const client = new ApiClient('key', 'https://api.example.com')
+    await client.submitFeedback(mockPayload, null)
+
+    expect(capturedBody).not.toBeNull()
+    const formData = capturedBody as unknown as FormData
+    expect(formData.get('feedback[description]')).toBe('Test feedback')
+  })
+
+  it('uploads screenshot when present', async () => {
+    let capturedBody: FormData | null = null
+    vi.spyOn(globalThis, 'fetch').mockImplementation(async (_url: RequestInfo | URL, init?: RequestInit) => {
+      capturedBody = init?.body instanceof FormData ? init.body : null
+      return new Response(null, { status: 201 })
+    })
+
+    const screenshot = new Blob(['png'], { type: 'image/png' })
+    const client = new ApiClient('key', 'https://api.example.com')
+    await client.submitFeedback(mockPayload, screenshot)
+
+    const formData = capturedBody as unknown as FormData
+    expect(formData.get('feedback[screenshot]')).toBeInstanceOf(File)
+  })
+
+  it('throws after retries exhausted', async () => {
+    vi.spyOn(globalThis, 'fetch').mockRejectedValue(new Error('Network error'))
+
+    const client = new ApiClient('key', 'https://api.example.com', 0)
+    await expect(client.submitFeedback(mockPayload, null)).rejects.toThrow()
+  })
+})

package/src/api/client.ts

@@ -0,0 +1,77 @@
+import type { FeedbackPayload } from '../types'
+
+const DEFAULT_API_URL = 'https://makethisbetter.dev/api/v1'
+
+export class ApiClient {
+  private apiUrl: string
+  private projectKey: string
+  private retryDelayMs: number
+
+  constructor(projectKey: string, apiUrl?: string, retryDelayMs = 1000) {
+    this.projectKey = projectKey
+    this.apiUrl = (apiUrl ?? DEFAULT_API_URL).replace(/\/$/, '')
+    this.retryDelayMs = retryDelayMs
+  }
+
+  async submitFeedback(payload: FeedbackPayload, screenshot: Blob | null): Promise<void> {
+    const form = new FormData()
+    form.append('feedback[description]', payload.description)
+    form.append('feedback[page_url]', payload.page_url)
+    form.append('feedback[user_agent]', payload.user_agent)
+    form.append('feedback[browser]', payload.browser)
+    form.append('feedback[os]', payload.os)
+    form.append('feedback[screen_width]', String(payload.screen_width))
+    form.append('feedback[screen_height]', String(payload.screen_height))
+    form.append('feedback[console_errors]', JSON.stringify(payload.console_errors))
+    form.append('feedback[annotations]', JSON.stringify(payload.annotations))
+
+    if (payload.target_element) {
+      form.append('feedback[target_element]', JSON.stringify(payload.target_element))
+    }
+    if (payload.user_id) form.append('feedback[user_id]', payload.user_id)
+    if (payload.user_email) form.append('feedback[user_email]', payload.user_email)
+    if (payload.user_name) form.append('feedback[user_name]', payload.user_name)
+
+    if (payload.recording_events && payload.recording_events.length > 0) {
+      const json = JSON.stringify(payload.recording_events)
+      const blob = new Blob([json], { type: 'application/json' })
+      form.append('feedback[recording]', blob, 'recording.json')
+      form.append('feedback[recording_duration]', String(payload.recording_duration ?? 0))
+    }
+
+    if (screenshot) {
+      form.append('feedback[screenshot]', screenshot, 'screenshot.png')
+    }
+
+    await this.fetchWithRetry(`${this.apiUrl}/widget/feedbacks`, {
+      method: 'POST',
+      headers: { 'X-Project-Key': this.projectKey },
+      body: form,
+    })
+  }
+
+  private async fetchWithRetry(url: string, init: RequestInit, retries = 1): Promise<Response> {
+    let res: Response
+    try {
+      res = await fetch(url, init)
+    } catch (err) {
+      if (retries > 0) {
+        await delay(this.retryDelayMs)
+        return this.fetchWithRetry(url, init, retries - 1)
+      }
+      throw err
+    }
+
+    if (res.ok) return res
+    if (res.status >= 500 && retries > 0) {
+      await delay(this.retryDelayMs)
+      return this.fetchWithRetry(url, init, retries - 1)
+    }
+    throw new Error(`HTTP ${res.status}`)
+  }
+}
+
+function delay(ms: number): Promise<void> {
+  if (ms <= 0) return Promise.resolve()
+  return new Promise(resolve => setTimeout(resolve, ms))
+}

package/src/context/collector.test.ts

@@ -0,0 +1,14 @@
+import { describe, it, expect } from 'vitest'
+import { collectPageContext } from './collector'
+
+describe('collectPageContext', () => {
+  it('returns required fields', () => {
+    const ctx = collectPageContext()
+    expect(typeof ctx.page_url).toBe('string')
+    expect(typeof ctx.user_agent).toBe('string')
+    expect(typeof ctx.browser).toBe('string')
+    expect(typeof ctx.os).toBe('string')
+    expect(typeof ctx.screen_width).toBe('number')
+    expect(typeof ctx.screen_height).toBe('number')
+  })
+})

package/src/context/collector.ts

@@ -0,0 +1,41 @@
+export interface PageContext {
+  page_url: string
+  user_agent: string
+  browser: string
+  os: string
+  screen_width: number
+  screen_height: number
+}
+
+export function collectPageContext(): PageContext {
+  return {
+    page_url: window.location.href,
+    user_agent: navigator.userAgent,
+    browser: detectBrowser(),
+    os: detectOS(),
+    screen_width: window.screen.width,
+    screen_height: window.screen.height,
+  }
+}
+
+function detectBrowser(): string {
+  const ua = navigator.userAgent
+  if (/Edg\//.test(ua)) return `Edge ${ua.match(/Edg\/(\S+)/)?.[1] ?? ''}`
+  if (/OPR\//.test(ua)) return `Opera ${ua.match(/OPR\/(\S+)/)?.[1] ?? ''}`
+  if (/Chrome\//.test(ua)) return `Chrome ${ua.match(/Chrome\/(\S+)/)?.[1] ?? ''}`
+  if (/Safari\//.test(ua) && /Version\//.test(ua)) return `Safari ${ua.match(/Version\/(\S+)/)?.[1] ?? ''}`
+  if (/Firefox\//.test(ua)) return `Firefox ${ua.match(/Firefox\/(\S+)/)?.[1] ?? ''}`
+  return 'Unknown'
+}
+
+function detectOS(): string {
+  const ua = navigator.userAgent
+  if (/Windows NT 10/.test(ua)) return 'Windows 10/11'
+  if (/Windows NT/.test(ua)) return 'Windows'
+  if (/Mac OS X 10_15|macOS 1[56789]/.test(ua)) return 'macOS'
+  if (/Mac OS X/.test(ua)) return 'macOS'
+  if (/Android/.test(ua)) return `Android ${ua.match(/Android (\d+)/)?.[1] ?? ''}`
+  if (/iPhone|iPad|iPod/.test(ua)) return 'iOS'
+  if (/Linux/.test(ua)) return 'Linux'
+  return 'Unknown'
+}

package/src/context/console.test.ts

@@ -0,0 +1,44 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { ConsoleErrorCollector } from './console'
+
+describe('ConsoleErrorCollector', () => {
+  let collector: ConsoleErrorCollector
+
+  afterEach(() => {
+    collector?.stop()
+  })
+
+  it('starts empty', () => {
+    collector = new ConsoleErrorCollector()
+    collector.start()
+    expect(collector.getErrors()).toHaveLength(0)
+  })
+
+  it('captures window.onerror events', () => {
+    collector = new ConsoleErrorCollector()
+    collector.start()
+
+    window.onerror?.('TypeError: test error', 'export.js', 42, 1, new Error('test error'))
+
+    expect(collector.getErrors()).toHaveLength(1)
+    expect(collector.getErrors()[0]).toContain('TypeError: test error')
+  })
+
+  it('deduplicates identical errors', () => {
+    collector = new ConsoleErrorCollector()
+    collector.start()
+
+    window.onerror?.('Same error', 'file.js', 1, 1, undefined)
+    window.onerror?.('Same error', 'file.js', 1, 1, undefined)
+
+    expect(collector.getErrors()).toHaveLength(1)
+  })
+
+  it('getErrors returns a copy', () => {
+    collector = new ConsoleErrorCollector()
+    collector.start()
+    const a = collector.getErrors()
+    const b = collector.getErrors()
+    expect(a).not.toBe(b)
+  })
+})

package/src/context/console.ts

@@ -0,0 +1,34 @@
+import { errorSource, type ErrorSourceEvent } from './error-source'
+
+const MAX_CONSOLE_ERRORS = 20
+
+export class ConsoleErrorCollector {
+  private errors: string[] = []
+  private unsubscribe: (() => void) | null = null
+
+  start(): void {
+    if (this.unsubscribe) return
+    this.unsubscribe = errorSource.subscribe((e) => this.record(e))
+  }
+
+  private record(e: ErrorSourceEvent): void {
+    const location = e.line != null ? ` (${e.line}:${e.col ?? 0})` : ''
+    this.addError(`${e.message}${location}`)
+  }
+
+  private addError(msg: string): void {
+    if (this.errors.length >= MAX_CONSOLE_ERRORS) return
+    if (!this.errors.includes(msg)) {
+      this.errors.push(msg)
+    }
+  }
+
+  getErrors(): string[] {
+    return [...this.errors]
+  }
+
+  stop(): void {
+    this.unsubscribe?.()
+    this.unsubscribe = null
+  }
+}

package/src/context/error-source.test.ts

@@ -0,0 +1,115 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { errorSource, type ErrorSourceEvent } from './error-source'
+
+describe('ErrorSource', () => {
+  let unsubs: (() => void)[]
+
+  beforeEach(() => {
+    unsubs = []
+  })
+
+  afterEach(() => {
+    unsubs.forEach((fn) => fn())
+  })
+
+  it('subscribe returns an unsubscribe function', () => {
+    const unsub = errorSource.subscribe(() => {})
+    unsubs.push(unsub)
+    expect(typeof unsub).toBe('function')
+  })
+
+  it('delivers window.onerror events to a subscriber', () => {
+    const received: ErrorSourceEvent[] = []
+    const unsub = errorSource.subscribe((e) => received.push(e))
+    unsubs.push(unsub)
+
+    window.onerror?.('Test error', 'test.js', 10, 5, new Error('boom'))
+
+    expect(received).toHaveLength(1)
+    expect(received[0].message).toBe('Test error')
+    expect(received[0].source).toBe('test.js')
+    expect(received[0].line).toBe(10)
+    expect(received[0].col).toBe(5)
+  })
+
+  it('delivers events to multiple subscribers', () => {
+    const a: ErrorSourceEvent[] = []
+    const b: ErrorSourceEvent[] = []
+    const unsubA = errorSource.subscribe((e) => a.push(e))
+    const unsubB = errorSource.subscribe((e) => b.push(e))
+    unsubs.push(unsubA, unsubB)
+
+    window.onerror?.('multi', 'file.js', 1, 1, undefined)
+
+    expect(a).toHaveLength(1)
+    expect(b).toHaveLength(1)
+    expect(a[0].message).toBe('multi')
+    expect(b[0].message).toBe('multi')
+  })
+
+  it('unsubscribing stops delivery to that listener', () => {
+    const received: ErrorSourceEvent[] = []
+    const unsub = errorSource.subscribe((e) => received.push(e))
+
+    window.onerror?.('before unsub', 'file.js', 1, 1, undefined)
+    expect(received).toHaveLength(1)
+
+    unsub()
+
+    window.onerror?.('after unsub', 'file.js', 2, 1, undefined)
+    expect(received).toHaveLength(1)
+  })
+
+  it('auto-unhooks window.onerror when last subscriber leaves', () => {
+    const onErrorBefore = window.onerror
+
+    const unsub1 = errorSource.subscribe(() => {})
+    const unsub2 = errorSource.subscribe(() => {})
+
+    expect(window.onerror).not.toBe(onErrorBefore)
+
+    unsub1()
+    expect(window.onerror).not.toBe(onErrorBefore)
+
+    unsub2()
+    expect(window.onerror).toBe(onErrorBefore)
+  })
+
+  it('captures unhandled promise rejections', () => {
+    const received: ErrorSourceEvent[] = []
+    const unsub = errorSource.subscribe((e) => received.push(e))
+    unsubs.push(unsub)
+
+    const event = new Event('unhandledrejection') as PromiseRejectionEvent
+    Object.defineProperty(event, 'reason', { value: new Error('rejected') })
+    window.dispatchEvent(event)
+
+    expect(received).toHaveLength(1)
+    expect(received[0].message).toBe('Unhandled rejection: rejected')
+  })
+
+  it('formats non-Error rejection reasons as strings', () => {
+    const received: ErrorSourceEvent[] = []
+    const unsub = errorSource.subscribe((e) => received.push(e))
+    unsubs.push(unsub)
+
+    const event = new Event('unhandledrejection') as PromiseRejectionEvent
+    Object.defineProperty(event, 'reason', { value: 'string reason' })
+    window.dispatchEvent(event)
+
+    expect(received).toHaveLength(1)
+    expect(received[0].message).toBe('Unhandled rejection: string reason')
+  })
+
+  it('chains to original window.onerror handler', () => {
+    const originalCalled = vi.fn()
+    window.onerror = originalCalled
+
+    const unsub = errorSource.subscribe(() => {})
+    unsubs.push(unsub)
+
+    window.onerror?.('chained', 'file.js', 1, 1, undefined)
+
+    expect(originalCalled).toHaveBeenCalledOnce()
+  })
+})

package/src/context/error-source.ts

@@ -0,0 +1,62 @@
+export interface ErrorSourceEvent {
+  message: string
+  source?: string
+  line?: number
+  col?: number
+  error?: unknown
+}
+
+type ErrorListener = (event: ErrorSourceEvent) => void
+
+class ErrorSource {
+  private listeners = new Set<ErrorListener>()
+  private originalOnError: OnErrorEventHandler | null = null
+  private rejectionHandler: ((e: PromiseRejectionEvent) => void) | null = null
+  private hooked = false
+
+  subscribe(listener: ErrorListener): () => void {
+    this.listeners.add(listener)
+    this.hook()
+    return () => {
+      this.listeners.delete(listener)
+      if (this.listeners.size === 0) this.unhook()
+    }
+  }
+
+  private hook(): void {
+    if (this.hooked) return
+    this.hooked = true
+
+    this.originalOnError = window.onerror
+    window.onerror = (msg, source, line, col, error) => {
+      this.emit({ message: String(msg), source, line, col, error })
+      if (this.originalOnError) {
+        return this.originalOnError.call(window, msg, source, line, col, error)
+      }
+      return false
+    }
+
+    this.rejectionHandler = (e: PromiseRejectionEvent) => {
+      const reason = e.reason instanceof Error ? e.reason.message : String(e.reason)
+      this.emit({ message: `Unhandled rejection: ${reason}` })
+    }
+    window.addEventListener('unhandledrejection', this.rejectionHandler)
+  }
+
+  private unhook(): void {
+    if (!this.hooked) return
+    this.hooked = false
+    window.onerror = this.originalOnError
+    this.originalOnError = null
+    if (this.rejectionHandler) {
+      window.removeEventListener('unhandledrejection', this.rejectionHandler)
+      this.rejectionHandler = null
+    }
+  }
+
+  private emit(event: ErrorSourceEvent): void {
+    for (const listener of this.listeners) listener(event)
+  }
+}
+
+export const errorSource = new ErrorSource()