#2 Making mistakes, and being willing to share the lessons I’ve learned

I would like to share with you an extreme case study that I had today.

The bug: We don’t show your comment when you comment on a newly created post.

The symptom: The bug happened after a changed i’ve done recently.

My suspect: I compared the new code with the old code and realized the opportunity object on both sides are slightly the same, but one property named `__pubSubEvents`. on the old code it has an object with 3 items in it. whereas on the new code, it was an empty object. So I suspected this change to be related somehow to the bug. still couldn’t proof it. but most of it, didnt understand what cause this to happen.

Further investigation: after deep deep investigation, I realized that the `__pubSubEvents` are actually responsible for updating the screen after posting a comment. so now I was sure that it is related.

Still didnt know why it returns an empty object.

Further investigation #2: I realized the comments are visible only if initialCommentsCount > 0:

<div ng-if=”networkCommentsVm.initialCommentsCount > 0">

the only way to update that `initialCommentsCount` variable is on the following `success` function:

this.activityObject.on(‘success’, function () {
if (this.initialCommentsCount === undefined && this.activityObject.feed) {

This somehow is not called…..

Further investigation #3: At that stage I was talking to a colleague, to help me understand how the pubSubEvents are working on our system. He pointed to me that the only way to empty the __pubSubEvents is by using the `off` function.

Solution Found: a quick find led me to find a line that I wrote 2 weeks ago: `referral.off(‘success’)`.

removing that line did solve the issue!

yay!! what a ride! Finally !!!!!!!!!!!!!!!!!!!!!!!!!!

Final Solution: But, removing that code was not an option to me since I wrote this line of code on purpose. I wanted to free the listener to the referral `success` event, but I didn’t want to free any `success` event of that object. So instead of `referral.off(‘success’)` I’ve read that I can pass the callback function name as a second parameter., and that will just free the specific listener.

But oh, I was using an anonymous function! so I need to make it a non-anonymous function first.

So I wrote: `this._onSaveNetwrorkReferralSuccess: function() { … }`

And to assign that function to the event I wrote

`referral.on(“success”, this._onSaveNetwrorkReferralSuccess.bind(this));`

and on $destroy I wrote:

`referral.off(“success”, this._onSaveNetwrorkReferralSuccess);`

Error: But oh… this doesnt seem to work…. Ummm… what’s going on…. after 10 hours I’m losing it…

After I thought about it, I remembered a lesson I’ve learned when I was coding in ReactJS not so long ago, `bind` function creates a new function, so my `off` function is not freeing the newly created function that was created by the bind function, but another one.

Final Final Solution: So. I solved this by writing:

`this._onSaveNetwrorkReferralSuccess = this._onSaveNetwrorkReferralSuccess.bind(this)`

by this, I could use the same name on both `on` and `off` events.


Lesson Learned:

1. As the `PubSub` pattern is commonly used in our code base, it is good to have everyone aligned with how it exactly works.

2. it’s a good practice to see how `bind` works in “real” scenario.

3. Using `off`, may be thought as redundant, but it in my opinion it is extremely important that we will remember to free memory from listeners, and timers on $destroy functions.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.