Introduction

There are days in my job when I am implementing a new feature, fixing a bug or documenting some stuff. Most days are occupied with this stuff.

But some days are all about digging into changelog, commits, issues etc to find the cause of some unexpected behaviour of the library/framework being used.

In this article, I will be sharing instances of when at work, I had to deal with the above.

Also, I am a Software Developer at Hashnode and my experiences are derived from working here. It's a crisp collection of debugging stories and tagged as part of

Although this article won't be eligible for the writeathon, it might help you steer yourself in the right direction while solving your next bug 😉.

1. Next.JS middleware not working suddenly as expected

I wrote a whole article on this one for our engineering blog last year. You can check it out below:-

TL;DR :-

• Went to Github to check if in the last 24 hours, Next.js shipped something related to middleware.

• Saw a breaking change in how query parameters behave within middleware in the latest canary release.

• Realised that middleware is in Beta and isn't bound by semantic versioning. That's why the unexpected behaviour.

• Fixed the code within middleware according to the latest changes.

2. Next 12 -> Next 13 upgrade causes product tour to fail

• We recently upgraded the codebase powering hashnode.com from Next 12 to Next 13.

• On production, we observed that the onboarding product tour for new users isn't working correctly anymore.

• Everything works correctly in local development. But I was able to replicate the same by running the built output locally.

• This meant something was wrong with the built output.

• I went to the library's Github Issues tab and started searching for stuff related to Next JS which led me to find the following issue :-

• The following comment by the maintainer helped in knowing the cause and fix for the issue

  

• Jumping to the discussion thread above, the swc maintainer had already acknowledged the issue which whose patch will land in version Next 13.0.7. The PR with fix:-

• Till then just adding swcMinify:false to next.config.js solved the issue and the built output was correct. Starting from Next 13, swcMinify was set to true by default unlike the previous versions and that's why we only saw this behaviour on the update.

3. The Blog Stats graph started indefinitely shrinking on browser zoom at 90%

• The first step for me here was to simply google the above title as it is which landed me here

• The above discussion led me to the following PR which was opened to fix it

• This fix landed on the version 4.1.1 of the chart.js library. So I simply updated our library version to the latest one (4.2.0) since that already has the patch.

4. withAxiom API wrapper increased our Vercel serverless execution GB hours

• We use axiom for logging purposes at Hashnode.

• In early January, we wrapped one of our /api handler with the withAxiom HOF.

• We observed that since then our serverless execution GB hours SKYROCKETED!!

  

• Further, we saw how the internal implementation of withAxiom was and found out that there were a couple of awaits that dealt with flushing the logs and increased our GB hours.

• So we removed that wrapper function and saw the GB hours stabilise again. We already informed the maintainers about it and they are thinking of a solution to rectify the behaviour.

5. unoptimized:true not working in next.config.js as we expected

• If you go to next.js docs, you will find how one can disable the image optimization by setting unoptimized:true in the next.config.js

• But the above wasn't working for us in one of the projects but surprisingly working in another.

• The difference between both was the version of Next JS that we were running.

• The one where we had Next 13, the above worked. The one where we had Next 12.2.3, it didn't.

• So I dug up the releases by going to Github and found out that the support for stable unoptimized landed in version 12.3.0. Before that, you can only replicate the same functionality by setting the flag inside the experimental object of next.config.js.

• Before 12.3.0 :-

    // next.config.js 
  
    {
    experimental:
        {
          images: 
           {
            unoptimized:true
           }
        }
    }
  

• After 12.3.0 :-

    // next.config.js 
  
    {
      images: 
         {
          unoptimized:true
         }
    }
  

• Validated the same by going to the changelog blog by Vercel.

• So just updated the non-working project to 12.3.0 and the unoptimized:true started to work as we intended.

Conclusion

It does feel like detective work. You are going through clues, clicking a link, and getting redirected to something similar. Hopping from one issue, commit to another, you finally find the line of code or PR which resolves it all for you.

Also, expecting oneself to do this on Day 1 of their career or a new job is probably not the smartest strategy. It takes time to get into the flow of finding patterns and I think past experiences just keep adding up to it.

Feel free to share similar instances of work in the comment section!

Thank you for your time :)