Skip to content

bug: Real-time collaboration room sync via Firebase has no conflict resolution β€” two users typing simultaneously in the same room can produce garbled/merged code that neither user intendedΒ #883

Description

@prince-pokharna

πŸ› Problem Statement

Debugra's README documents: "Real-Time Collaboration β€” Create rooms, share a Room ID, and code together with live Firebase sync." The useRoom hook syncs code changes via Firebase Realtime Database or Firestore. However, the current implementation appears to use last-write-wins synchronization: when two users type simultaneously, each keystroke is written to Firebase and the last write wins, causing:

  • Lost keystrokes: User A types "function" while User B types "const" simultaneously. Depending on network timing, one user's changes are silently discarded.
  • Garbled state: Interleaved writes from two users can produce syntactically invalid code like funccotnst ion that neither user wrote.
  • No operational transformation or CRDT: Without OT/CRDT, any simultaneous edit is a race condition.

Proposed Fix

Implement Yjs (a battle-tested CRDT library) with Firebase as the sync backend:

// src/hooks/useRoom.js β€” replace raw Firebase write with Yjs

import * as Y from 'yjs';
import { FirebaseProvider } from 'y-firebase'; // or y-webrtc as fallback

const ydoc = new Y.Doc();
const yText = ydoc.getText('monaco');

// Connect Yjs document to Firebase for sync
const provider = new FirebaseProvider(firebaseDb, `rooms/${roomId}`, ydoc);

// Bind Monaco editor to Yjs document
import { MonacoBinding } from 'y-monaco';
new MonacoBinding(yText, monacoEditorRef.current.getModel(), new Set([monacoEditorRef.current]), provider.awareness);

Yjs's CRDT guarantees convergence β€” all users always reach the same final state regardless of write order or simultaneous edits. y-monaco provides a drop-in binding for Monaco Editor that requires no changes to the editor itself.

Dependencies to add:

npm install yjs y-firebase y-monaco

Files to Modify

File Change
src/hooks/useRoom.js Replace raw Firebase code writes with Yjs + FirebaseProvider
package.json Add yjs, y-firebase, y-monaco

Suggested labels: bug, collaboration, frontend, level: advanced

I would like to work on this. Could you please assign it to me?

Metadata

Metadata

Assignees

No one assigned

    Labels

    gssocOfficial GSSoC '26 issue tagtype:bugVulnerability or logical bug fixestype:designTactile visual design and UI alignmentstype:docsDocumentation and guide upgradestype:featureNew functional feature additionstype:testingIntegration and unit test coverage

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions