Seif Ahmed

Posted on Jul 19

How to Hunt a Bug Again (But at 10 AM ☀️)

#debugging #devjournal #frontend #ux

Background track playing: "Execution Clap" by Kasane Teto

The Story:

Picture this:

It is 10:00 AM.
I just finished building a full comment editing system for Vlox.
Right-click on any comment → update it instantly. Simple, right?

But then... the nightmare returned, but this time, in the morning. 🔥

The Nightmare Scenario 📉

I logged out to test something. When I logged back in, the "Edit" option for my own comments was gone—until I refreshed the page.

Even worse: if I logged out, the "Edit" option still appeared on comments that were not mine. It did not actually do anything (server-side validation blocked it), but it looked broken and confusing.

Bad UX. Broken state. My code was haunted. 👻

The Root Cause 🔍

The issue was simple—but hidden.

I was attaching the contextmenu event conditionally:

if (comment.by.username === window.currentUserQuickInfo.username) {
    // Attach edit event
}

This worked at render time. But when you log out or switch users, window.currentUserQuickInfo becomes stale. The event was either missing or sticking around when it should not. The state changed—but the UI did not know about it.

Failed Mission Log 🛰️

Attempt 1: Refresh the page after login 🔄

Result: It worked.
Problem: Users should not have to refresh to see basic state changes.
Verdict: Not acceptable for a real app.

Attempt 2: Remove the feature entirely ❌

Result: It worked perfectly.
Problem: It removed a useful feature.
Verdict: Throwing hours of work.

Attempt 3: Create a custom edit icon for everyone 🖊️

Result: Clicking it would do nothing for comments that were not yours.
Verdict: Server-side validation would block it, but the UX was still confusing.

The "Aha!" Moment 💡

What if I attach the event to every comment—but check ownership inside the event? Instead of deciding at render time, I decide at click time.

Before: Conditional attachment

if (comment.by.username === window.currentUserQuickInfo.username) {
  comment.on("contextmenu", ...);
}

After: Always attach, check inside

comment.on("contextmenu", function (e) {
  if (comment.by.username !== window.currentUserQuickInfo.username) return;
  // Show edit modal
});

Now the event is always there—and it only acts if the current user is the owner.

The Full Fix 🚀

I also made sure the state refreshed on logout:

signOutBtn.on("click", async function () {
  // ... logout logic
  getQuickInfo(); // This was the missing piece
});

Now the UI always reflects the current user state:

No more stale events.
No more confusing UI.
No page refresh needed.

Want to see the full code? Check out Vlox on GitHub.

DEV Community