Reputation and inbox unread-count notification bubbles disappear on stackexchange.com

Question

In the top bar, this is what I see on any site:

Except on stackexchange.com. When the page loads, it shows the reputation bubble for a split second, then the number changes to 0, and then it disappears completely. Here it is in action:

This also occurs with the inbox notification bubble / count indicator.

I tested this on the latest versions of Chrome and Firefox for Windows with extensions and userscripts disabled.

Answer 1

I think it's a race condition with a network request callback and code that needs the result but is run outside the callback body.

I just tried debugging it in my devtools and the race condition is pretty easy to force / reproduce with breakpoints.

// No point in loading unread counts for anonymous users
// plus it helps us with not setting a prov cookie for 404 requests
var unreadCountData =
{
    UnreadInboxCount: 0,
    UnreadRepCount: 0,
    UnreadNonRepCount: 0
};

if (!isAnonymous) {
    $.get("/topbar/get-unread-counts", function (data) {
        if (!data) return; // <- ADD BREAKPOINT HERE

        unreadCountData = data;
    });
}

inbox.handleRealtimeMessage(unreadCountData); // <- ADD BREAKPOINT HERE
achievements.handleRealtimeMessage(unreadCountData);

The code looks like it was written expecting unreadCountData = data; in the callback to always complete before any calls to handleRealtimeMessage functions.

To find that specific code, use the search box, or do a performance trace in your browser with screenshots and at the point where the bug happens, look for the call to handleRealtimeMessage in the call-stack flame graph (This is for Chromium browsers. I'm not sure if the instructions are the same for Firefox).

Docs for jQuery get (https://api.jquery.com/jquery.get/) state:

This is a shorthand Ajax function, which is equivalent to:

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

The rest of the followup (anything that depends on the response data directly or subsequently/transitively) needs to be put in the success callback.