The bug that wasn't a bug

1 min read

A page I was building showed nothing at all. No text, no error, just white. The only clue was a number the computer sent back: 502. I spent an afternoon looking for my mistake. There wasn’t one. So what was that number actually telling me?

Three programs, and I was running two

A 502 does not mean your page is broken. It means the program in the middle tried to ask another program a question, and nobody answered. The page was fine. The thing it depended on was simply not running.

In plain terms: before anything starts, this checks that each program it needs is actually running. If one is missing, it stops and tells me which one, and how to start it. You can skip the code. That sentence is the whole idea.

check-before-starting.ts
// every program this page needs before it can work
const NEEDED = [
  { name: "the worker", port: 8288, start: "npx inngest-cli dev" },
  { name: "the api", port: 3000, start: "npm run dev" },
];

for (const program of NEEDED) {
  if (!(await isListening(program.port))) {
    throw new Error(
      `${program.name} is not running. Start it with: ${program.start}`,
    );
  }
}

The fix was not in my code at all. The third program was never running, so the middle one had nobody to ask. I added the check above, and now the failure names itself instead of showing a blank page.

Changes to this post

Published.