Hosting·4 min read

React error 418, 423 or 425 in your log: almost never an outage

These three error numbers show up in nearly every error log of a React or Next.js site. They usually come from one visitor with a browser extension, and React recovers by itself. Here is how to separate them from real problems.

Look at the error log of this website for the past week. Group the entries by
type, say how many separate visitors there are per type, and name only the
ones I should act on.

Set up alerting on your React or Next.js site and the odds are your first alarm is about error 418, 423 or 425. You get a fright, you check the site, and everything works. That is no coincidence. All three numbers are about the same subject, they resolve themselves, and in practice they are nearly always caused by something on one visitor's computer.

For completeness: in a built site React does not ship full error texts, only a number. You look up the full text on React's own error page, for example react.dev/errors/418.

What hydration is

A Next.js page reaches your visitor in two parts. First the ready made HTML from the server, so there is something to see straight away. Then React in the browser takes over that same page, so buttons and forms start working. That takeover is called hydration.

While doing it, React compares what it would build in the browser with what the server already put there. If those two are not equal, it reports that and rebuilds that part of the page in the browser. That is what those three numbers tell you: there was a difference between server and browser, and it has been repaired. At most, the visitor sees a flicker.

Why it is usually one visitor

The differences we see in practice rarely come from our own code. They come from something sitting between the server and React, changing the page:

  • Translation extensions. An extension that translates the page automatically changes the text before React makes its comparison. Every translated word is a difference.
  • Reading aids and text extensions. Anything that rewrites, highlights or repunctuates words does the same.
  • Ad and privacy blockers that remove elements.
  • A browser that autofills forms before React gets to them.

That also explains the pattern in your log: ten entries, all within a minute, all from the same visitor with the same browser version. That is not an outage, that is one person with an extension looking at a few pages.

When it does mean something

There are three cases where you should take these entries seriously.

Many different visitors at once. If the number of separate visitors climbs after a release, you introduced a difference yourself. Look for code that produces something different in the browser than on the server: a date or time formatted without a time zone, a random number, a width read from the window, or anything that uses the local language setting.

An entry on one fixed page. If it always comes from the same path, it is in that page and not in an extension.

The repair is visible. If the page clearly jumps, or content disappears, the difference is big enough to act on regardless of the visitor count.

A threshold that works

We only alert on these numbers when there are three separate visits with the same error within six hours. Anything below that goes into an overview we read once a week, not into an alarm.

That threshold is deliberately not "three entries" but "three visits". One visitor with a translation extension easily produces ten entries within half a minute. So always group per visit before you start counting, or your phone goes off for one person.

If you want to check it yourself without a dashboard, this is the instruction that works fastest:

Take today's entries from the error log and put them in a table: time, path,
error number and browser. Note whether lines belong together in one visit.
Then tell me what stands out.

Common mistakes

"I suppressed the entry and now the problem is gone." You removed the entries, not the differences. With a real hydration difference your visitor still sees a page being rebuilt. Suppress the noise with a threshold, not by ignoring the number.

"I am going to block my visitors' browser extensions." You cannot. At most you can keep your own code from being sensitive to small differences in text.

"I only see this error on my own computer." Good chance you have an extension that modifies the page. Try it in a clean window without extensions before you start digging.

"My log is full, so my site is unreliable." Look at the number of separate visitors first. A hundred entries from four visitors is something entirely different from a hundred entries from ninety visitors.

"I fixed it by switching off hydration for that part." Sometimes that is the right answer, for example for a timestamp that differs per visitor. Do it deliberately and only on the part that really differs, not on a whole page.

MK
Maarten Keizer

Founder of Invoker. Over twenty years in hosting, system administration and web development; builds the Claude hosting himself and tests everything on our own servers first.

about maarten