makethisbetter 1.1.1 → 1.1.2

package/dist/record/session.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"session.d.ts","sourceRoot":"","sources":["../../src/record/session.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAEvD,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AAQzC,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,UAAU,EAAE,CAAA;IACpB,QAAQ,EAAE,MAAM,CAAA;CACjB;AAkCD,qBAAa,aAAa;IACxB,OAAO,CAAC,MAAM,CAAmB;IACjC,OAAO,CAAC,MAAM,CAAsB;IACpC,OAAO,CAAC,SAAS,CAAI;IACrB,OAAO,CAAC,KAAK,CAA6C;IAC1D,OAAO,CAAC,YAAY,CAAyC;IAC7D,OAAO,CAAC,MAAM,CAAiB;IAC/B,OAAO,CAAC,YAAY,CAAC,CAAY;IACjC,OAAO,CAAC,OAAO,CAAQ;gBAEX,MAAM,EAAE,eAAe,EAAE,YAAY,CAAC,EAAE,MAAM,IAAI;IAKxD,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC;IA2B5B,IAAI,IAAI,eAAe;IAavB,WAAW,IAAI,MAAM;IAKrB,OAAO,IAAI,IAAI;IAUf,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,eAAe;CAOxB"}
+{"version":3,"file":"session.d.ts","sourceRoot":"","sources":["../../src/record/session.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAEvD,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AAQzC,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,UAAU,EAAE,CAAA;IACpB,QAAQ,EAAE,MAAM,CAAA;CACjB;AAyCD,qBAAa,aAAa;IACxB,OAAO,CAAC,MAAM,CAAmB;IACjC,OAAO,CAAC,MAAM,CAAsB;IACpC,OAAO,CAAC,SAAS,CAAI;IACrB,OAAO,CAAC,KAAK,CAA6C;IAC1D,OAAO,CAAC,YAAY,CAAyC;IAC7D,OAAO,CAAC,MAAM,CAAiB;IAC/B,OAAO,CAAC,YAAY,CAAC,CAAY;IACjC,OAAO,CAAC,OAAO,CAAQ;gBAEX,MAAM,EAAE,eAAe,EAAE,YAAY,CAAC,EAAE,MAAM,IAAI;IAKxD,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC;IA2B5B,IAAI,IAAI,eAAe;IAavB,WAAW,IAAI,MAAM;IAKrB,OAAO,IAAI,IAAI;IAUf,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,eAAe;CAOxB"}

package/dist/widget/controller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"controller.d.ts","sourceRoot":"","sources":["../../src/widget/controller.ts"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,oBAAoB,EAAc,MAAM,UAAU,CAAA;AAIhE,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,MAAM,CAAsB;IACpC,OAAO,CAAC,MAAM,CAAkB;IAChC,OAAO,CAAC,GAAG,CAA2B;IACtC,OAAO,CAAC,GAAG,CAAwB;IACnC,OAAO,CAAC,OAAO,CAAiC;IAChD,OAAO,CAAC,OAAO,CAAiC;IAChD,OAAO,CAAC,KAAK,CAA4B;IACzC,OAAO,CAAC,OAAO,CAA2B;IAC1C,OAAO,CAAC,OAAO,CAA2B;IAC1C,OAAO,CAAC,iBAAiB,CAAqC;IAC9D,OAAO,CAAC,SAAS,CAAW;IAC5B,OAAO,CAAC,gBAAgB,CAAuB;IAC/C,OAAO,CAAC,mBAAmB,CAAmC;IAC9D,OAAO,CAAC,QAAQ,CAAgC;IAChD,OAAO,CAAC,IAAI,CAAe;IAC3B,OAAO,CAAC,iBAAiB,CAA0B;IACnD,OAAO,CAAC,gBAAgB,CAAgC;gBAE5C,MAAM,EAAE,oBAAoB;IAcxC,OAAO,CAAC,OAAO;IAgBf,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,mBAAmB;IAiB3B,OAAO,CAAC,uBAAuB;IAwB/B,OAAO,CAAC,SAAS;YAcH,YAAY;IAmC1B,OAAO,CAAC,WAAW;IAgBnB,OAAO,CAAC,WAAW;IAkBnB,OAAO,CAAC,OAAO;IAiBf,OAAO,IAAI,IAAI;CAYhB"}
+{"version":3,"file":"controller.d.ts","sourceRoot":"","sources":["../../src/widget/controller.ts"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,oBAAoB,EAAc,MAAM,UAAU,CAAA;AAIhE,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,MAAM,CAAsB;IACpC,OAAO,CAAC,MAAM,CAAkB;IAChC,OAAO,CAAC,GAAG,CAA2B;IACtC,OAAO,CAAC,GAAG,CAAwB;IACnC,OAAO,CAAC,OAAO,CAAiC;IAChD,OAAO,CAAC,OAAO,CAAiC;IAChD,OAAO,CAAC,KAAK,CAA4B;IACzC,OAAO,CAAC,OAAO,CAA2B;IAC1C,OAAO,CAAC,OAAO,CAA2B;IAC1C,OAAO,CAAC,iBAAiB,CAAqC;IAC9D,OAAO,CAAC,SAAS,CAAW;IAC5B,OAAO,CAAC,gBAAgB,CAAuB;IAC/C,OAAO,CAAC,mBAAmB,CAAmC;IAC9D,OAAO,CAAC,QAAQ,CAAgC;IAChD,OAAO,CAAC,IAAI,CAAe;IAC3B,OAAO,CAAC,iBAAiB,CAA0B;IACnD,OAAO,CAAC,gBAAgB,CAAgC;gBAE5C,MAAM,EAAE,oBAAoB;IAcxC,OAAO,CAAC,OAAO;IAgBf,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,mBAAmB;IAiB3B,OAAO,CAAC,uBAAuB;IA6B/B,OAAO,CAAC,SAAS;YAcH,YAAY;IAmC1B,OAAO,CAAC,WAAW;IAgBnB,OAAO,CAAC,WAAW;IAkBnB,OAAO,CAAC,OAAO;IAiBf,OAAO,IAAI,IAAI;CAYhB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "makethisbetter",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Make This Better JS Widget SDK — embed user feedback collection in any website",
   "type": "module",
   "main": "./dist/makethisbetter.cjs.js",

package/src/api/client.test.ts

@@ -179,4 +179,37 @@ describe('ApiClient', () => {
     const client = new ApiClient('key', 'https://api.example.com', 0)
     await expect(client.submitFeedback(mockPayload, null)).rejects.toThrow()
   })
+
+  it('sends an idempotency key and reuses it across retries', async () => {
+    const calls: RequestInit[] = []
+    const fetchSpy = vi.spyOn(globalThis, 'fetch').mockImplementation(async (_url, init) => {
+      calls.push(init!)
+      if (calls.length === 1) return new Response('oops', { status: 500 })
+      return new Response(JSON.stringify({ id: 'fb_1' }), { status: 201 })
+    })
+
+    const client = new ApiClient('proj_test123', 'https://api.example.com', 0)
+    await client.submitFeedback(mockPayload, null)
+
+    expect(fetchSpy).toHaveBeenCalledTimes(2)
+    const key1 = (calls[0].headers as Record<string, string>)['X-Idempotency-Key']
+    const key2 = (calls[1].headers as Record<string, string>)['X-Idempotency-Key']
+    expect(key1).toBeTruthy()
+    expect(key2).toBe(key1)
+  })
+
+  it('uses a fresh idempotency key for each separate submission', async () => {
+    const keys: string[] = []
+    vi.spyOn(globalThis, 'fetch').mockImplementation(async (_url, init) => {
+      keys.push((init!.headers as Record<string, string>)['X-Idempotency-Key'])
+      return new Response(JSON.stringify({ id: 'fb_1' }), { status: 201 })
+    })
+
+    const client = new ApiClient('proj_test123', 'https://api.example.com')
+    await client.submitFeedback(mockPayload, null)
+    await client.submitFeedback(mockPayload, null)
+
+    expect(keys[0]).toBeTruthy()
+    expect(keys[0]).not.toBe(keys[1])
+  })
 })

package/src/api/client.ts

@@ -61,6 +61,10 @@ export class ApiClient {
     }
 
     const headers = await this.authHeaders()
+    // One key per submission, reused across retries: if the first POST
+    // reached the server but the response was lost, the retry must not
+    // create a second feedback.
+    headers['X-Idempotency-Key'] = generateIdempotencyKey()
     const res = await this.fetchWithRetry(`${this.apiUrl}/widget/feedbacks`, {
       method: 'POST',
       headers,
@@ -115,3 +119,10 @@ function delay(ms: number): Promise<void> {
   if (ms <= 0) return Promise.resolve()
   return new Promise(resolve => setTimeout(resolve, ms))
 }
+
+function generateIdempotencyKey(): string {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID()
+  }
+  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 12)}`
+}

package/src/context/frustration.test.ts

@@ -441,5 +441,29 @@ describe('FrustrationDetector', () => {
 
       document.body.removeChild(div)
     })
+
+    it('shares one MutationObserver across overlapping clicks and disconnects when done', () => {
+      const observeSpy = vi.spyOn(MutationObserver.prototype, 'observe')
+      const disconnectSpy = vi.spyOn(MutationObserver.prototype, 'disconnect')
+      makeDetector()
+      const div = document.createElement('div')
+      div.style.cursor = 'pointer'
+      div.textContent = 'fake button'
+      document.body.appendChild(div)
+
+      div.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+      vi.advanceTimersByTime(100)
+      div.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+
+      expect(observeSpy).toHaveBeenCalledTimes(1)
+      expect(disconnectSpy).not.toHaveBeenCalled()
+
+      vi.advanceTimersByTime(500)
+      expect(disconnectSpy).toHaveBeenCalledTimes(1)
+
+      document.body.removeChild(div)
+      observeSpy.mockRestore()
+      disconnectSpy.mockRestore()
+    })
   })
 })

package/src/context/frustration.ts

@@ -63,7 +63,9 @@ export class FrustrationDetector {
   private boundSubmitHandler: ((e: Event) => void) | null = null
   private boundInvalidHandler: ((e: Event) => void) | null = null
   private errorPageUrls = new Set<string>()
-  private pendingObservers: MutationObserver[] = []
+  private domObserver: MutationObserver | null = null
+  private pendingDomChecks = 0
+  private lastMutationAt = -1
 
   constructor(onFrustration: (event: FrustrationEvent) => void) {
     this.onFrustration = onFrustration
@@ -95,8 +97,7 @@ export class FrustrationDetector {
     this.stopFormTracking()
     this.errorPageUrls.clear()
 
-    for (const obs of this.pendingObservers) obs.disconnect()
-    this.pendingObservers = []
+    this.disconnectDomObserver()
   }
 
   private startNavigationTracking(): void {
@@ -276,28 +277,21 @@ export class FrustrationDetector {
     }
   }
 
+  // One shared observer for all in-flight dead-click checks, connected only
+  // while at least one check is pending — a full-page observer per click was
+  // too heavy on mutation-busy pages.
   private checkDeadClickDom(target: Element, clickTime: number): void {
     if (!this.looksInteractive(target)) return
 
-    let mutationSeen = false
-    const observer = new MutationObserver(() => {
-      mutationSeen = true
-    })
-
-    observer.observe(document.body, {
-      childList: true,
-      subtree: true,
-      attributes: true,
-      characterData: true,
-    })
-    this.pendingObservers.push(observer)
+    this.pendingDomChecks++
+    this.ensureDomObserver()
 
     setTimeout(() => {
-      observer.disconnect()
-      const idx = this.pendingObservers.indexOf(observer)
-      if (idx >= 0) this.pendingObservers.splice(idx, 1)
+      this.pendingDomChecks--
+      const mutated = this.lastMutationAt >= clickTime
+      if (this.pendingDomChecks === 0) this.disconnectDomObserver()
 
-      if (!mutationSeen && this.active) {
+      if (!mutated && this.active) {
         this.emitIfReady({
           signal: 'dead_click_dom',
           target: describeElement(target),
@@ -307,6 +301,24 @@ export class FrustrationDetector {
     }, DEAD_CLICK_DOM_DELAY_MS)
   }
 
+  private ensureDomObserver(): void {
+    if (this.domObserver) return
+    this.domObserver = new MutationObserver(() => {
+      this.lastMutationAt = Date.now()
+    })
+    this.domObserver.observe(document.body, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      characterData: true,
+    })
+  }
+
+  private disconnectDomObserver(): void {
+    this.domObserver?.disconnect()
+    this.domObserver = null
+  }
+
   private looksInteractive(el: Element): boolean {
     const style = window.getComputedStyle(el)
     if (style.cursor === 'pointer') return true

package/src/record/session.ts

@@ -14,7 +14,12 @@ export interface RecordingResult {
 }
 
 const MAX_DURATION_S = 60
-const RRWEB_CDN = 'https://cdn.jsdelivr.net/npm/rrweb@2/dist/rrweb.min.js'
+// Pinned version + SRI: this script executes on customers' pages, so a
+// floating tag or unverified content would be a supply-chain hole. Bumping
+// the version requires recomputing the hash from the exact CDN file:
+//   curl -sL <url> | openssl dgst -sha384 -binary | openssl base64 -A
+const RRWEB_CDN = 'https://cdn.jsdelivr.net/npm/rrweb@2.1.0/dist/rrweb.min.js'
+const RRWEB_SRI = 'sha384-6qZKf9GE/E2uhA8IdLwXsQiLN/jVx8mhA0i04rQ1aHLrs2URo3ivHlSbaccG59zt'
 
 let rrwebLoaded: Promise<RRWebRecordFn> | null = null
 
@@ -35,6 +40,8 @@ function loadViaCdn(): Promise<RRWebRecordFn> {
     if (win.rrweb?.record) { resolve(win.rrweb.record); return }
     const script = document.createElement('script')
     script.src = RRWEB_CDN
+    script.integrity = RRWEB_SRI
+    script.crossOrigin = 'anonymous'
     script.onload = () => {
       const w = globalThis as unknown as Window & { rrweb?: { record: RRWebRecordFn } }
       if (w.rrweb?.record) resolve(w.rrweb.record)

package/src/widget/controller.ts

@@ -122,6 +122,11 @@ export class WidgetController {
         if (!this.recordingManager) return
         this.recordingManager.stop()
         this.showPopup(window.innerWidth / 2, window.innerHeight / 2, this.messages.record.timer_label)
+      }).catch(() => {
+        // rrweb failed to load (network / SRI mismatch) — fall back to markup
+        if (this.mode !== 'recording') return
+        this.toolbar?.setMode('markup')
+        this.handleToolbarModeChange('markup')
       })
     } else {
       this.recordingManager?.destroy()