August 8th, 2024

A heck of a wild bug chase

George Mauer detailed a debugging challenge with a Next.js application, where a 401 error arose from missing authentication cookies in production, highlighting the complexities of software development and interconnected tech components.

Read original articleLink Icon
A heck of a wild bug chase

George Mauer recounts a complex debugging experience involving a Next.js application that transitioned from a pilot phase to a full project. Initially, the application used JSON files for data storage and a simple AWS Lambda function to log user interactions. However, upon moving to an AWS infrastructure with Kubernetes, a 401 error emerged, indicating authentication issues. The debugging process revealed that the Auth0 session state was not being maintained in the production build due to a missing appSession cookie. This cookie was present in the development environment but disappeared in production, leading to automatic logout requests triggered by a prefetching feature in Next.js. The prefetching behavior caused the application to log out the user immediately after login, resulting in the absence of the necessary cookie for authenticated requests. Mauer emphasizes the intricate connections within the tech stack and how decisions in one area can lead to unexpected issues elsewhere, ultimately sharing a lesson in the complexities of software development.

- The debugging process revealed a 401 error due to missing authentication cookies in a production build.

- The issue stemmed from Next.js's prefetching feature, which triggered automatic logout requests.

- The transition from a pilot project to a full application highlighted the importance of maintaining session state.

- Mauer's experience illustrates the interconnectedness of different components in a tech stack.

- The story serves as a reminder of the complexities and challenges in software development.

Link Icon 9 comments
By @jof - 8 months
It seems to me like the underlying issue was ignoring HTTP semantics and making a state-changing link like a logout link a plain <a> (HTTP GET) and not something like a form submission (HTTP POST).

Having intuition for the foundational layers of our tools saves so much time and future headaches.

By @hschne - 8 months
> I didn’t want to deal with databases.

So instead I used a third party authentication service, store some data in JSON files, and also threw up a lamda gateway to store some more data in Google Sheets?

It's not relevant to the bug hunt, but I'm genuinely intrigued. Is this approach considered easier to work with than using a regular ol' DB?

By @williamdclt - 8 months
> It is wild how decisions made in one part of a technical stack can manifest at another point in time, in another place in the stack, and in such a convoluted manner.

While this isn't something that _only_ happens in modern javascript, it certainly is a pattern. These bugs are convoluted and difficult to debug because the technologies are convoluted, stacked on top of each other compounding the bugs, and devs do not understand the underlying platform.

Honestly, it's once-again a good case study for why I'd stay from NextJS or "modern JS" devs (despite being in this ecosystem myself, Node/React/RN):

- NextJS, one of the most modern techs in wide use, makes debugging _harder_ than vanilla JS?? This is crazy - Reimplementing browser behaviour in JS is _exactly_ what I would expect to be the root cause of various difficult-to-debug-and-to-fix bugs down the line - Using GET for a logout is a misunderstanding of HTTP semantics. This could have broken in other ways (eg integrating turbolinks in the app).

Well done for debugging and fixing this, but honestly... this doesn't speak to the strength of the technology choices or the author's understanding of the platform

By @andrewfromx - 8 months
I always do <a href="#" id="logout">logout</a> so there is no url to accidentally GET call anyways.
By @danjl - 8 months
Authentication is a major hurdle. Back in the days of desktop software, there was no authentication. Mobile apps can often avoid authentication too. Despite decades of web coding, and lots of "this authentication system will make life easy" claims, it is still hard and easy to mess up.
By @throw156754228 - 8 months
OP learnt about idempotency in http the hard way. However the post reminded me that I don't particularly like this hydration step of NextJS apps where there is javascript executing that is difficult if not impossible to step debug.
By @langsoul-com - 8 months
So would this simply work if the Link component from nextjs wasn't used?
By @realxrobau - 8 months
So, in summary, because you added a whole bunch of stuff that didn't need to be there, it broke. Colour me surprised.

It sounds like this could be implemented almost completely without any of that, especially as you were using JavaScript for the data.

All I can hope is that you've learnt a lesson about unnecessary overcomplication.