Fix: Additional bugs and code quality improvements (#4210)

* Fix: Log unhandled async error in constructor

The constructor's initial load() call silently swallowed errors with
.catch(() => null), making debugging difficult when initial load fails.

Issues fixed:
- Added console.error to log the error for debugging
- Error event is still emitted inside load() as documented
- Developers can now see initial load failures in console
- No change to error event behavior

While errors cannot be caught from a constructor call, this provides
visibility into initial load failures for debugging purposes.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* Fix: RecordPlugin blob URL memory leak

The RecordPlugin created blob URLs with URL.createObjectURL() but
never revoked them, causing memory leaks during multiple recordings.

Issues fixed:
- Added recordedBlobUrl property to track created blob URLs
- Revoke previous blob URL before creating new one
- Revoke blob URL in destroy() to free memory
- Prevents blob accumulation during multiple recording sessions

Each recording now properly cleans up its blob URL before creating
a new one, preventing memory leaks from unreleased blob references.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* Fix: Clear ResizeObserver reference after disconnect

The Renderer's destroy() method disconnected the ResizeObserver but
didn't clear the reference, causing minor memory retention.

Issues fixed:
- Set resizeObserver to null after disconnect()
- Ensures reference is cleared for garbage collection
- Prevents disconnected observer from remaining in memory

While the observer was disconnected, the reference prevented it from
being garbage collected. Now properly releases the reference.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* Fix: Clear debounce timeout on destroy in drag handler

The drag handler had a pending setTimeout that wasn't cleared when
WaveSurfer was destroyed, potentially causing seekTo() calls on
destroyed instances.

Issues fixed:
- Store unsubscribeDrag separately from subscriptions array
- Add cleanup function that clears timeout and unsubscribes
- Prevents setTimeout callback from executing after destroy
- Avoids potential null reference errors

The debounce timeout is now properly cleared when the instance is
destroyed, preventing orphaned timeout callbacks.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* Fix: Add numberOfChannels bounds check in regions

The region element initialization could divide by zero if
numberOfChannels was 0, resulting in Infinity for elementHeight.

Issues fixed:
- Added check for numberOfChannels > 0 before division
- Prevents Infinity from being set as CSS height value
- Falls back to default 100% height for invalid channel counts
- Ensures region rendering doesn't break with edge case data

The region now safely handles cases where numberOfChannels is 0
or undefined, preventing invalid CSS values.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* Fix: Handle empty color array with default value

The convertColorValues() method returned empty string for empty
arrays, which could cause rendering issues. Now returns default color.

Issues fixed:
- Added explicit check for empty color array (length === 0)
- Returns default waveColor '#999' instead of empty string
- Ensures waveform always has a valid color value
- Prevents potential rendering failures with invalid colors

Empty color arrays now fall back to a sensible default rather than
an empty string that could break rendering.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* Fix: Close previous AudioContext in RecordPlugin startMic

The startMic() method created new AudioContext instances without
closing previous ones when called multiple times, causing resource
exhaustion.

Issues fixed:
- Added check for existing micStream before starting new one
- Call stopMic() to clean up previous AudioContext
- Prevents AudioContext accumulation from multiple startMic() calls
- Ensures system audio resources are properly released

Each startMic() call now properly closes the previous AudioContext
before creating a new one, preventing audio resource exhaustion.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* Fix: Remove event listeners from detached region content

The setContent() method removed old content elements without removing
their event listeners first, causing memory leaks from orphaned listeners
on detached DOM nodes.

Issues fixed:
- Store content event listeners in properties for later removal
- Remove listeners from old content before detaching it
- Re-add listeners to new content after setting it
- Prevents memory leaks from orphaned event listeners

Event listeners on region content are now properly cleaned up when
content is changed, preventing memory leaks from detached DOM nodes.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* Fix: Add iteration limit to prevent infinite recursion in Fetcher

The watchProgress() recursive read() function had no safeguards against
malformed streams that never signal completion, potentially causing
infinite recursion.

Issues fixed:
- Added maxIterations limit (100,000) to prevent infinite loops
- Added iteration counter to track read attempts
- Logs error and exits if limit is reached
- Protects against malformed or never-ending streams

While reader.read() should eventually return done: true, this provides
a safety net for edge cases with malformed streams or protocol errors.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: katspaugh

src/fetcher.ts

@@ -4,6 +4,8 @@ async function watchProgress(response: Response, progressCallback: (percentage:
 
   const contentLength = Number(response.headers.get('Content-Length')) || 0
   let receivedLength = 0
+  const maxIterations = 100000 // Safety limit to prevent infinite loops
+  let iterations = 0
 
   // Process the data
   const processChunk = async (value: Uint8Array | undefined) => {
@@ -14,6 +16,12 @@ async function watchProgress(response: Response, progressCallback: (percentage:
   }
 
   const read = async () => {
+    // Safety check to prevent infinite recursion
+    if (iterations++ > maxIterations) {
+      console.error('Fetcher: Maximum iterations reached, stopping read loop')
+      return
+    }
+
     let data
     try {
       data = await reader.read()

src/plugins/record.ts

@@ -67,6 +67,7 @@ class RecordPlugin extends BasePlugin<RecordPluginEvents, RecordPluginOptions> {
   private micStream: MicStream | null = null
   private unsubscribeDestroy?: () => void
   private unsubscribeRecordEnd?: () => void
+  private recordedBlobUrl: string | null = null
 
   /** Create an instance of the Record plugin */
   constructor(options: RecordPluginOptions) {
@@ -213,6 +214,11 @@ class RecordPlugin extends BasePlugin<RecordPluginEvents, RecordPluginOptions> {
 
   /** Request access to the microphone and start monitoring incoming audio */
   public async startMic(options?: RecordPluginDeviceOptions): Promise<MediaStream> {
+    // Stop previous mic stream if exists to clean up AudioContext
+    if (this.micStream) {
+      this.stopMic()
+    }
+
     let stream: MediaStream
     try {
       stream = await navigator.mediaDevices.getUserMedia({
@@ -272,7 +278,12 @@ class RecordPlugin extends BasePlugin<RecordPluginEvents, RecordPluginOptions> {
       this.emit(ev, blob)
       if (this.options.renderRecordedAudio) {
         this.applyOriginalOptionsIfNeeded()
-        this.wavesurfer?.load(URL.createObjectURL(blob))
+        // Revoke previous blob URL before creating a new one
+        if (this.recordedBlobUrl) {
+          URL.revokeObjectURL(this.recordedBlobUrl)
+        }
+        this.recordedBlobUrl = URL.createObjectURL(blob)
+        this.wavesurfer?.load(this.recordedBlobUrl)
       }
     }
 
@@ -355,6 +366,11 @@ class RecordPlugin extends BasePlugin<RecordPluginEvents, RecordPluginOptions> {
     super.destroy()
     this.stopRecording()
     this.stopMic()
+    // Revoke blob URL to free memory
+    if (this.recordedBlobUrl) {
+      URL.revokeObjectURL(this.recordedBlobUrl)
+      this.recordedBlobUrl = null
+    }
   }
 
   private applyOriginalOptionsIfNeeded() {

src/plugins/regions.ts

@@ -102,6 +102,8 @@ class SingleRegion extends EventEmitter<RegionEvents> implements Region {
   public subscriptions: (() => void)[] = []
   public updatingSide?: UpdateSide = undefined
   private isRemoved = false
+  private contentClickListener?: (e: MouseEvent) => void
+  private contentBlurListener?: () => void
 
   constructor(
     params: RegionParams,
@@ -218,7 +220,7 @@ class SingleRegion extends EventEmitter<RegionEvents> implements Region {
     let elementTop = 0
     let elementHeight = 100
 
-    if (this.channelIdx >= 0 && this.channelIdx < this.numberOfChannels) {
+    if (this.channelIdx >= 0 && this.numberOfChannels > 0 && this.channelIdx < this.numberOfChannels) {
       elementHeight = 100 / this.numberOfChannels
       elementTop = elementHeight * this.channelIdx
     }
@@ -284,8 +286,10 @@ class SingleRegion extends EventEmitter<RegionEvents> implements Region {
     )
 
     if (this.contentEditable && this.content) {
-      this.content.addEventListener('click', (e) => this.onContentClick(e))
-      this.content.addEventListener('blur', () => this.onContentBlur())
+      this.contentClickListener = (e) => this.onContentClick(e)
+      this.contentBlurListener = () => this.onContentBlur()
+      this.content.addEventListener('click', this.contentClickListener)
+      this.content.addEventListener('blur', this.contentBlurListener)
     }
   }
 
@@ -375,6 +379,16 @@ class SingleRegion extends EventEmitter<RegionEvents> implements Region {
   public setContent(content: RegionParams['content']) {
     if (!this.element) return
 
+    // Remove event listeners from old content before removing it
+    if (this.content && this.contentEditable) {
+      if (this.contentClickListener) {
+        this.content.removeEventListener('click', this.contentClickListener)
+      }
+      if (this.contentBlurListener) {
+        this.content.removeEventListener('blur', this.contentBlurListener)
+      }
+    }
+
     this.content?.remove()
     if (!content) {
       this.content = undefined
@@ -394,6 +408,11 @@ class SingleRegion extends EventEmitter<RegionEvents> implements Region {
     }
     if (this.contentEditable) {
       this.content.contentEditable = 'true'
+      // Re-add event listeners to new content
+      this.contentClickListener = (e) => this.onContentClick(e)
+      this.contentBlurListener = () => this.onContentBlur()
+      this.content.addEventListener('click', this.contentClickListener)
+      this.content.addEventListener('blur', this.contentBlurListener)
     }
     this.content.setAttribute('part', 'region-content')
     this.element.appendChild(this.content)

src/renderer.ts

@@ -297,7 +297,10 @@ class Renderer extends EventEmitter<RendererEvents> {
   destroy() {
     this.subscriptions.forEach((unsubscribe) => unsubscribe())
     this.container.remove()
-    this.resizeObserver?.disconnect()
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect()
+      this.resizeObserver = null
+    }
     this.unsubscribeOnScroll?.forEach((unsubscribe) => unsubscribe())
     this.unsubscribeOnScroll = []
   }
@@ -329,6 +332,7 @@ class Renderer extends EventEmitter<RendererEvents> {
   // Convert array of color values to linear gradient
   private convertColorValues(color?: WaveSurferOptions['waveColor']): string | CanvasGradient {
     if (!Array.isArray(color)) return color || ''
+    if (color.length === 0) return '#999' // Return default color for empty array
     if (color.length < 2) return color[0] || ''
 
     const canvasElement = document.createElement('canvas')

src/wavesurfer.ts

@@ -200,7 +200,10 @@ class WaveSurfer extends Player<WaveSurferEvents> {
       if (initialUrl || (peaks && duration)) {
         // Swallow async errors because they cannot be caught from a constructor call.
         // Subscribe to the wavesurfer's error event to handle them.
-        this.load(initialUrl, peaks, duration).catch(() => null)
+        this.load(initialUrl, peaks, duration).catch((err) => {
+          // Log error for debugging while still emitting error event
+          console.error('WaveSurfer initial load error:', err)
+        })
       }
     })
   }
@@ -318,34 +321,38 @@ class WaveSurfer extends Player<WaveSurferEvents> {
 
     // Drag
     {
-      let debounce: ReturnType<typeof setTimeout>
-      this.subscriptions.push(
-        this.renderer.on('drag', (relativeX) => {
-          if (!this.options.interact) return
-
-          // Update the visual position
-          this.renderer.renderProgress(relativeX)
-
-          // Set the audio position with a debounce
-          clearTimeout(debounce)
-          let debounceTime
-
-          if (this.isPlaying()) {
-            debounceTime = 0
-          } else if (this.options.dragToSeek === true) {
-            debounceTime = 200
-          } else if (typeof this.options.dragToSeek === 'object' && this.options.dragToSeek !== undefined) {
-            debounceTime = this.options.dragToSeek['debounceTime']
-          }
+      let debounce: ReturnType<typeof setTimeout> | undefined
+      const unsubscribeDrag = this.renderer.on('drag', (relativeX) => {
+        if (!this.options.interact) return
+
+        // Update the visual position
+        this.renderer.renderProgress(relativeX)
+
+        // Set the audio position with a debounce
+        clearTimeout(debounce)
+        let debounceTime
+
+        if (this.isPlaying()) {
+          debounceTime = 0
+        } else if (this.options.dragToSeek === true) {
+          debounceTime = 200
+        } else if (typeof this.options.dragToSeek === 'object' && this.options.dragToSeek !== undefined) {
+          debounceTime = this.options.dragToSeek['debounceTime']
+        }
 
-          debounce = setTimeout(() => {
-            this.seekTo(relativeX)
-          }, debounceTime)
+        debounce = setTimeout(() => {
+          this.seekTo(relativeX)
+        }, debounceTime)
 
-          this.emit('interaction', relativeX * this.getDuration())
-          this.emit('drag', relativeX)
-        }),
-      )
+        this.emit('interaction', relativeX * this.getDuration())
+        this.emit('drag', relativeX)
+      })
+
+      // Clear debounce timeout on destroy
+      this.subscriptions.push(() => {
+        clearTimeout(debounce)
+        unsubscribeDrag()
+      })
     }
   }