Kijk in het foutlog van deze website naar de afgelopen week. Groepeer de
meldingen per soort, zeg hoeveel losse bezoekers er per soort zijn, en
noem alleen de meldingen die ik zou moeten oppakken.
Zet je een meldingssysteem op je React- of Next.js-site, dan is de kans groot dat je eerste alarm gaat over fout 418, 423 of 425. Je schrikt, je kijkt op de site, en alles werkt. Dat is geen toeval. Deze drie nummers gaan alle drie over hetzelfde onderwerp, ze lossen zichzelf op, en ze worden in de praktijk bijna altijd veroorzaakt door iets op de computer van één bezoeker.
Even voor de volledigheid: in een gebouwde site stuurt React geen hele foutteksten mee, maar een nummer. De volledige tekst zoek je op via de foutenpagina van React zelf, bijvoorbeeld react.dev/errors/418.
Wat hydratie is
Een Next.js-pagina komt in twee delen bij je bezoeker aan. Eerst de kant-en-klare HTML van de server, zodat er direct iets te zien is. Daarna neemt React in de browser diezelfde pagina over, zodat knoppen en formulieren gaan werken. Die overname heet hydratie.
Daarbij vergelijkt React wat hij in de browser zou maken met wat de server al had neergezet. Zijn die twee niet gelijk, dan meldt hij dat en bouwt hij dat stuk van de pagina opnieuw op in de browser. Dat is wat die drie nummers je vertellen: er zat verschil tussen server en browser, en het is hersteld. De bezoeker ziet hoogstens een flikkering.
Waarom het meestal één bezoeker is
De verschillen die wij in de praktijk zien, komen zelden uit onze eigen code. Ze komen van iets dat tussen de server en React in de pagina zit te wijzigen:
- Vertaalextensies. Een extensie die de pagina automatisch vertaalt, verandert de tekst voordat React zijn vergelijking maakt. Elk vertaald woord is een verschil.
- Leeshulp en tekstextensies. Alles dat woorden herschrijft, markeert of leestekens toevoegt doet hetzelfde.
- Advertentie- en privacyblokkers die elementen weghalen.
- Een browser die automatisch formulieren invult voordat React eraan toe is.
Dat verklaart ook het patroon in je log: tien meldingen, allemaal binnen een minuut, allemaal van dezelfde bezoeker met dezelfde browserversie. Dat is geen storing, dat is één persoon met een extensie die een paar pagina's bekijkt.
Wanneer het wel iets betekent
Er zijn drie gevallen waarin je deze meldingen serieus moet nemen.
Veel verschillende bezoekers tegelijk. Loopt het aantal losse bezoekers op na een uitrol, dan heb je zelf een verschil geïntroduceerd. Zoek dan naar code die in de browser iets anders oplevert dan op de server: een datum of tijd die je zonder tijdzone opmaakt, een willekeurig getal, een breedte die je uit het venster leest, of iets dat de lokale taalinstelling gebruikt.
Een melding op één vaste pagina. Komt het steeds van hetzelfde pad, dan zit het in die pagina en niet in een extensie.
Het herstel is zichtbaar. Springt de pagina duidelijk, of verdwijnt er inhoud, dan is het verschil groot genoeg om er wel iets aan te doen, ongeacht het aantal bezoekers.
Een drempel die werkt
Wij melden deze nummers pas als er binnen zes uur drie losse bezoeken zijn met dezelfde fout. Alles daaronder gaat in een overzicht dat we één keer per week nakijken, niet in een alarm.
Die drempel is bewust niet "drie meldingen", maar "drie bezoeken". Eén bezoeker met een vertaalextensie levert makkelijk tien meldingen op binnen een halve minuut. Groepeer dus altijd per bezoek voordat je gaat tellen, anders gaat je telefoon af voor één persoon.
Wil je het zelf nakijken zonder dashboard, dan is dit de opdracht die het snelst werkt:
Pak de meldingen van vandaag uit het foutlog en zet ze in een tabel: tijd,
pad, foutnummer en browser. Zet erbij of de regels bij elkaar horen in één
bezoek. Zeg daarna wat opvalt.
Veelgemaakte fouten
"Ik heb de melding onderdrukt en nu is het probleem weg." Je hebt de meldingen weg, niet de verschillen. Bij een echt hydratieverschil ziet je bezoeker nog steeds een pagina die herbouwd wordt. Onderdruk de ruis op basis van een drempel, niet door het nummer te negeren.
"Ik ga alle browserextensies van mijn bezoekers afvangen." Dat kan niet. Je kunt hoogstens voorkomen dat je eigen code gevoelig is voor kleine verschillen in tekst.
"Ik zie deze fout alleen op mijn eigen computer." Grote kans dat je zelf een extensie hebt die de pagina aanpast. Probeer het in een leeg venster zonder extensies voordat je gaat zoeken.
"Mijn log zit vol, dus mijn site is onbetrouwbaar." Kijk eerst naar het aantal losse bezoekers. Honderd meldingen van vier bezoekers is iets heel anders dan honderd meldingen van negentig bezoekers.
"Ik heb de melding opgelost door hydratie uit te zetten op dat stuk." Dat is soms het goede antwoord, bijvoorbeeld bij een tijdstip dat per bezoeker verschilt. Doe het bewust en alleen op het stukje dat echt verschilt, niet op een hele pagina.