Skip to content

[BUG] : Cross-Tab State Synchronization Breakdown #1249

Description

@hrshjswniii

🚀 Program

GSSoC

🐛 Describe the bug

When a user updates, creates, or deletes voice profiles, quick replies, or favorites, VoiceForge dispatches single-window custom DOM events such as window.dispatchEvent(new CustomEvent("voiceforge:profileChanged")) ([useVoiceClone.js].

Because CustomEvent is scoped strictly to the local window context, open VoiceForge tabs in other browser windows do not receive notification of state changes. If a user deletes or switches active voice profiles in Tab A, Tab B remains on the outdated profile. Attempting to generate speech from Tab B results in API error responses due to invalid/deleted voice_id references.


🔁 Steps to Reproduce

Steps to reproduce the behavior:

  1. Open the VoiceForge application in two separate browser tabs side-by-side (Tab A and Tab B).
  2. In Tab A, go to 'Settings' and delete an existing voice profile or create a new one.
  3. In Tab A, add a new custom phrase to Quick Replies.
  4. Look at Tab B without refreshing the page.
  5. See that Tab B still displays the deleted voice profile as active and does not reflect the newly added Quick Reply.
  6. Triggering speech synthesis in Tab B using the deleted profile causes backend API failure (Voice profile not found).

✅ Expected Behavior

Voice profile modifications, active voice selection, quick replies, and speech history updates should sync seamlessly across all open browser tabs in real-time without requiring a manual page refresh.


❌ Actual Behavior

State changes are isolated to the single browser tab where the action took place. Other open tabs display stale data until manually reloaded.


🌱 Contributor Checklist

  • I am participating via GSSoC
  • I have read the contribution guidelines
  • I checked for existing issues before creating this

💻 Environment

  • Browser: Chrome / Edge
  • Device: Desktop
  • OS: Windows / macOS / Linux

📝 Additional Context

  • Affected files: [client/src/hooks/useVoiceClone.js:L25], [client/src/hooks/useSpeechHistory.js:L88-L118]
  • Suggested Resolution: Implement a BroadcastChannel("voiceforge_channel") or attach a global window.addEventListener("storage", ...) event listener inside state hooks (useVoiceClone, useSpeechHistory) to broadcast and receive state updates across browser tabs automatically.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions