The bugs that only exist in production

I build this site in the open. One monorepo, Fastify renders React, a small Hono API sits next to it, and all of it lives in k3s on a single ARM machine.

Locally the project runs in Docker too, with the source mounted, so the containers run exactly what I have just written.

This week, though, two bugs existed only in the production build. A good reason to write about them.

The padding that disappeared

Every page has its own spacing:

padding: 96px 24px 120px

And the shared .container set:

padding: 0 24px

The specificity is the same, so the rule the browser saw last wins.

In development the page's own style came last and everything looked fine. In production the order changed, .container won, the top padding became zero, and the text slid under the fixed header.

The fix is literally one word: padding-inline.

It handles the sides only and never touches the top or the bottom, so the order of the rules decides nothing any more.

The translations that were not there

In production the SSR plugin imports the server bundle while it registers with Fastify, before the server has started listening on its port.

And my entry called i18next.init() during that import. i18next loaded the locales over HTTP from that same server, which was not reachable yet.

The request failed, the error stayed in i18next's state, and from then on SSR answered with keys like stack_lead instead of translations.

In development this never happened: Vite loaded the entry on the first request, when the server was already up.

I moved the i18next init to the first render. And initImmediate: false closed one more race: init() no longer finishes before the locales are really in the store.

What they have in common

Both bugs are about the same thing: development and production are not quite the same program.

The order of the files changes, so does the moment the modules load and the order things start in. The tests did not catch it. Neither did I, until I built a real production image and opened it the way any visitor would.

So my production stack comes up with one command. And before I call anything done, I try to look at it there at least once.