DEV Community

rocketsquirreldev
rocketsquirreldev

Posted on

[x509Lab] Breaking Down a 4,500-Line Single File App: The Bugs I Found (x509Lab v1.7.1)

#architecture #frontend #javascript #webdev

Hey everyone, RocketSquirrel here. I am a solo developer building x509Lab, a browser-based visual tool for managing and testing X.509 certificate chains.

Lately, I realized my index.html file had bloated into a massive 4,558-line monster.

  • 1,248 lines of CSS inside <style>
  • 2,712 lines of JavaScript inside <script>
  • 598 lines of HTML structure

"As long as it runs fine," I kept telling myself. But finding a single utility function was becoming an endurance test. This weekend, I decided to refactor and split it up. Splitting the files took 5 minutes. But then, the real engineering work began because two hidden bugs crawled out.

Bug 1: The Illusion of Global event.target

I had a simple tab-switching function that worked flawlessly when clicking the UI:

function switchTab(tab) {
  document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
  event.target.classList.add('active'); // <-- The culprit
  if(tab==='verify') { verifyChain(); }
}
Enter fullscreen mode Exit fullscreen mode

In an inline HTML handler like <button onclick="switchTab('builder')">, the browser implicitly passes the event object. It always worked during manual clicking.

However, during refactoring, I triggered switchTab() programmatically in a script test. Boom: TypeError: Cannot read properties of undefined (reading 'target').

Because it was a single file, my manual test suite never hit this programmatic trigger. I had to refactor the function to search for the element explicitly using querySelector rather than relying on the implicit global event context.

Bug 2: Vercel's Catch-All Route Ate My Assets

Everything ran beautifully on my local server. I deployed to Vercel, opened the live link, and was greeted with a naked, unstyled HTML page. No CSS. No JS.

The issue was inside my vercel.json routing configuration:

"routes": [
  { "src": "/(.*)", "dest": "/index.html" }
]
Enter fullscreen mode Exit fullscreen mode

This catch-all route redirects every single path to index.html. When x509Lab was a single-file application, this was fine because there were no external static assets to fetch.

But once I broke it down, requests for /styles.css and /app.js were being intercepted by Vercel and serving the index.html payload instead. I patched it by adding explicit static file matching rules ahead of the catch-all redirect block.

Key Takeaways

  1. \"It just works\" hides bugs: The event.target bug was always there, sleeping silently because my manual test coverage was narrow.
  2. Local environment lies: A local file server will happily serve separate static files out of the box, but production deployment platforms (like Vercel) have complex routing engines that behave differently.
  3. Refactoring is testing: Moving text blocks from one file to another is easy. The real cost of refactoring is the rigorous regression testing required afterward to ensure nothing broke.

Now that the codebase is clean, my next task is writing formal unit tests for my custom ASN.1/DER parser. No more coding on prayer!

🔗 Check out the clean v1.7.1 build: https://x509lab.vercel.app

Top comments (0)