The latest articles on DEV Community by Adam Gierczak (@adambabinicz). https://dev.to/adambabinicz https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4224001%2Ff4035686-98a9-43a6-b347-f61dcdcd43b1.png https://dev.to/adambabinicz en Adam Gierczak Tue, 03 Nov 2026 10:29:17 +0000 https://dev.to/adambabinicz/inside-bugmortem-building-a-cyber-gothic-digital-morgue-for-production-crashes-with-kiro-25c https://dev.to/adambabinicz/inside-bugmortem-building-a-cyber-gothic-digital-morgue-for-production-crashes-with-kiro-25c <p>Every software engineer and Site Reliability Engineer (SRE) knows that cold, paralyzing dread: <strong>it’s 3:17 AM, PagerDuty is sounding alarms like an air-raid siren, the monitoring dashboard is flatlining at 0 BPM, and the terminal is vomiting thousands of incomprehensible red stack traces.</strong></p> <p>Most post-mortem tools treat catastrophic production outages like boring administrative chores — spreadsheets, sterile ticketing forms, and tedious retrospectives.</p> <p>For the <strong>Kiroween {2026} Hackathon</strong> (<em>Costume Contest: Spooky &amp; Distinctive Developer Tools</em> track), I set out to flip that dynamic completely.</p> <p>Meet <strong><a href="https://bugmortem.vercel.app" rel="noopener noreferrer">BugMortem</a></strong> — an interactive, cyber-gothic digital morgue and automated forensic report generator for catastrophic software failures.</p> <ul> <li>🌐 <strong>Live Autopsy Dashboard:</strong> <a href="https://bugmortem.vercel.app" rel="noopener noreferrer">bugmortem.vercel.app</a> </li> <li>🐙 <strong>Source Code:</strong> <a href="https://github.com/AdamBabinicz/bugmortem" rel="noopener noreferrer">github.com/AdamBabinicz/bugmortem</a> </li> </ul> <h2> ⚡ What is BugMortem? </h2> <p>BugMortem transforms real software catastrophes into a forensic, surgical investigation:</p> <ol> <li> <strong>Flatline HUD &amp; ECG Monitor:</strong> A cybernetic emergency room interface with audio-visual flatline cues, vitals monitoring, and instant incident severity classification (P0 Critical / P1 Major).</li> <li> <strong>The 4 Canonical Nightmares:</strong> Preloaded, forensic deep-dives into industry-standard software horrors: <ul> <li> <strong>React SSR / Next.js:</strong> <em>Hydration Mismatch Nightmare (P0)</em> — DOM tree divergence caused by illegal client-only browser state accessed during server render.</li> <li> <strong>Node.js Heap:</strong> <em>Silent Memory Leak &amp; Linux OOM Killer 137 (P0)</em> — Dangling <code>EventEmitter</code> closures retaining 4GB+ until the OS kernel sends <code>SIGKILL</code>.</li> <li> <strong>HTTP Handshake:</strong> <em>CORS &amp; Auth Headers Preflight Massacre (P1)</em> — Unhandled <code>OPTIONS</code> preflight cascades breaking SPAs on cross-domain APIs.</li> <li> <strong>PostgreSQL / Prisma:</strong> <em>Connection Pool Starvation (P1)</em> — Leaked database connections locking payment checkouts under high concurrency.</li> </ul> </li> <li> <strong>Forensic Timeline of Doom:</strong> Chronological reconstruction of the fatal seconds and telemetry alerts leading up to the collapse.</li> <li> <strong>Side-by-Side Code Autopsy:</strong> Direct juxtaposition of the cursed code against the resurrected, safe SRE solution — complete with 1-click clipboard copy.</li> <li> <strong>Custom Incident Ingestion (Live Morgue Intake):</strong> An interactive intake form allowing teams to paste their own real-world crash logs, select severity, and auto-generate an incident protocol.</li> <li> <strong>1-Click SRE Incident Protocol Exporter:</strong> Instant export to standardized, professional Markdown (<code>.md</code>) formatted for Jira, Confluence, and GitHub Issues.</li> </ol> <h2> 🏗️ Technical Architecture &amp; Ironclad Rules </h2> <p>BugMortem was engineered using modern web standards without sacrificing UX performance or accessibility:</p> <ul> <li> <strong>Framework:</strong> Next.js 16.4 App Router, TypeScript 5.9, Turbopack, and pnpm.</li> <li> <strong>Styling &amp; Theme:</strong> Tailwind CSS v4 with custom dark/light cyber-morgue tokens (<code>@variant dark</code>) and zero inline-styles.</li> <li> <strong>Pure i18n Architecture:</strong> Complete bilingual support (English default for Kiroween judges + Polish) driven by modular dictionaries (<code>src/i18n/locales/en.ts</code> and <code>pl.ts</code>). <strong>Zero hardcoded UI strings</strong> — 100% dynamic token resolution via typed hooks.</li> <li> <strong>Advanced Polish &amp; Typography Polish:</strong> Automated non-breaking space insertion (<code>text-wrap: pretty;</code>) to eliminate ugly hanging single-letter conjunctions on mobile viewports.</li> <li> <strong>Zero Bloat &amp; Mobile-First:</strong> Responsive forensic layout engineered from 320px screens to ultra-wide 4K workstations.</li> </ul> <h2> 🤖 Architected for Kiro: Specifications as Code (<code>/.kiro</code>) </h2> <p>One of the most powerful requirements of the Kiroween hackathon was embracing <strong>Kiro</strong> — an agentic development paradigm driven by formal project specifications.</p> <p>Instead of writing code blindly, the BugMortem codebase was structured around dedicated Kiro steering directories tracked in Git:</p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> text bugmortem/ ├── .kiro/ │ ├── specs/bugmortem/ │ │ ├── requirements.md # Formal functional/non-functional criteria │ │ └── tasks.md # Step-by-step verified roadmap │ └── steering/ │ └── rules.md # Strict architectural invariants </code></pre> </div> webdev devops kiroweenhackathon26 showdev