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 articleGeorge 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.
Having intuition for the foundational layers of our tools saves so much time and future headaches.
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?
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
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.