Een fout in de browser zie je niet in je serverlogs. Je bezoeker ziet een knop die niets doet, en vertrekt. Met de Sentry SDK voor React en errors.nl komt elke fout binnen, met de browser, de pagina en wat de bezoeker vlak daarvoor deed. Met source maps zie je de echte regel in je eigen code, niet in een geminificeerd bundle.
1. Maak een project aan
Log in bij errors.nl, maak een organisatie en een project aan en kopieer de DSN. Die ziet eruit als https://<sleutel>@ingest.errors.nl/<project>.
2. Installeer de SDK
npm install @sentry/react
3. Start hem voor je app
In main.tsx, voordat je React rendert:
import * as Sentry from "@sentry/react"; import { createRoot } from "react-dom/client"; Sentry.init({ dsn: "https://<sleutel>@ingest.errors.nl/<project>", environment: import.meta.env.MODE, release: import.meta.env.VITE_RELEASE, }); createRoot(document.getElementById("root")!, { onUncaughtError: Sentry.reactErrorHandler(), }).render(<App />);
De DSN mag in je frontend-code staan: hij kan alleen fouten insturen, niets uitlezen.
4. Een error boundary
Zonder error boundary wordt bij een fout je hele app wit. Met de boundary van de SDK toon je een nette melding en wordt de fout verstuurd:
<Sentry.ErrorBoundary fallback={<p>Er ging iets mis. Probeer het opnieuw.</p>}>
<Checkout />
</Sentry.ErrorBoundary>Gebruik je Vue, dan installeer je @sentry/vue en geef je je app mee aan Sentry.init. Voor gewone JavaScript is er @sentry/browser. De rest van deze gids werkt hetzelfde.
5. Source maps
Een stacktrace als index-4f2a.js:1:48213 helpt je niet. Laat Vite source maps maken, maar zonder verwijzing in je bundle, zodat bezoekers ze niet zien:
export default defineConfig({ build: { sourcemap: "hidden" }, });
Upload de maps na de build met het upload-token van je project, en haal ze daarna uit de map die je publiceert:
VITE_RELEASE=webshop@$VERSION npm run build for map in dist/assets/*.js.map; do curl -sf https://ingest.errors.nl/api/sourcemaps \ -H "X-ErrorsNL-Upload-Token: $ERRORSNL_UPLOAD_TOKEN" \ -F release="webshop@$VERSION" \ -F url_prefix=/assets/ \ -F "file[]=@$map" done rm dist/assets/*.js.map
De release bij het uploaden moet gelijk zijn aan de release in Sentry.init. Het commando met je eigen token staat ook bij je project in het dashboard.
6. Ruis tegenhouden
Browserextensies en oude browsers geven fouten die niets met jouw code te maken hebben. Met ignoreErrors en allowUrls in Sentry.init houd je die tegen, voordat ze credits kosten:
allowUrls: [/https:\/\/(www\.)?mijnwinkel\.nl/], ignoreErrors: ["ResizeObserver loop limit exceeded"],
Persoonsgegevens
Session replay en performance-monitoring doet errors.nl niet. Laat die integraties weg, dan stuurt de SDK alleen fouten.
errors.nl filtert daarnaast wachtwoorden, tokens, e-mailadressen en rekeningnummers uit elke fout voordat we die opslaan. Meer daarover lees je in Foutmonitoring en de AVG.
Meldingen
Wil je weten wanneer er iets misgaat zonder het dashboard open te hebben? Zet bij je project een melding per e-mail aan, of koppel Slack, Teams, Discord of ntfy voor pushmeldingen op je telefoon.