Tricky Javascript with a sprinkle of React
This week’s blog will summarize my 1+ month journey. I will be tackling this issue within Debugger.html.
The preview gets stuck when the cursor moves quickly over a variable in debug mode. The issue is quite hard to reproduce as it doesn’t always get produced each time the cursor slides over.
I was provided with a possible lead on where things might’ve gone haywire. Exploring the stack has lead me to onMouseOver, where it detects whether the cursor is over a variable. I noticed that this mouse event is attached to something called codeMirrorWrapper. This is a giant invisible mask that covers the entire debugger editor. Also, this function is a debounced function. Check out this link to learn more about debounce. So my initial thought is that the call to updatePreview() was somehow late to the party, using an old Event Target due to debounce. But removing or increasing the timer does not make a difference, so I moved on from this.
Since I was struggling to find a thread to hang on, I thought to myself maybe this bug was introduced in a past commit. All I have to do then is decipher one specific commit.
The term is git bisect. My professor’s blog post is very helpful in getting me started. What I discovered shocked me! The issue existed from the very moment the functionality to preview variables was introduced. So this issue wasn’t a regression of any sort. That much was confirmed.
Moving on…
I began to pair with a few mentors within the debugger community. The following summarizes some of the things we’ve tried or considered:
- Adding hover events to each individual variable during debug mode? Wayyy too costly in terms of performance(if the codebase is large).
- Ignore default behavior with Event.preventDefault().
- Adding/removing async/await to the updatePreview() call.
- Adding additional mouse states such as onMouseEnter and onMouseLeave to code mirror. Doesn’t pick up individual variables, the call only triggers when entering/exiting the editor mask.
At this point, I’m stumped along with the devs I’ve been pairing with. Time to get my hands really dirty. I began to spam console logs within the mouse events. I noticed something fishy… take a look at the below description of what I observed.
I’m not so sure why another set of onMouseOut and onMouseOver is called. So I added a onMouseOut event that contains the same logic as onMouseOver. Also, I removed a flag in updatePreview() to produce the following.
I got rid of the Preview…but this solution is far from being correct. The yellow highlight still remains.
I made a pull request just to showcase some progress, but I’m hoping to find the root cause in the near future.
I noticed that a class is added to the variable for the CSS to highlight. Further digging around lead me to a componentDidMount() call that marks a specific range of characters with this class. From here, I took a moment to explore a quick overview of React and the lifecycle of a component. Once again, I spammed the lifecycle calls with console logs. The popup was being rendered right after being unmounted. Which leads to componentWillUnmount() not being called to clear the marker(for highlight).
This is how far I’ve gotten. I look forward to continuing to tackle this issue in the near future.
TLDR: I’m still dealing with a tricky JavaScript issue that is hard to reproduce and hard to pinpoint the cause. Got the awesome opportunity to pair program with 3 other developers around the globe. Pushed myself to persevere and break problems down + learned a lot about JavaScript, React and Redux!
