See your visitors' JavaScript and React errors

An error in the browser doesn't show up in your server logs. Your visitor sees a button that does nothing, and leaves. With the Sentry SDK for React and errors.nl every error comes in, with the browser, the page and what the visitor did just before. With source maps you see the real line in your own code, not in a minified bundle.

1. Create a project

Create a free account at errors.nl (or log in), create an organization and a project and copy the DSN. It looks like https://<key>@ingest.errors.nl/<project>.

2. Install the SDK

npm install @sentry/react

3. Start it before your app

In main.tsx, before you render React:

import * as Sentry from "@sentry/react";
import { createRoot } from "react-dom/client";

Sentry.init({
  dsn: "https://<key>@ingest.errors.nl/<project>",
  environment: import.meta.env.MODE,
  release: import.meta.env.VITE_RELEASE,
});

createRoot(document.getElementById("root")!, {
  onUncaughtError: Sentry.reactErrorHandler(),
}).render(<App />);

The DSN may live in your frontend code: it can only send errors in, not read anything.

4. An error boundary

Without an error boundary your whole app goes white on an error. With the SDK's boundary you show a proper message and the error is sent:

<Sentry.ErrorBoundary fallback={<p>Something went wrong. Please try again.</p>}>
  <Checkout />
</Sentry.ErrorBoundary>

Using Vue? Install @sentry/vue and pass your app to Sentry.init. For plain JavaScript there is @sentry/browser. The rest of this guide works the same.

5. Source maps

A stack trace like index-4f2a.js:1:48213 doesn't help you. Let Vite create source maps, but without a reference in your bundle, so visitors don't see them:

export default defineConfig({
  build: { sourcemap: "hidden" },
});

Upload the maps after the build with your project's upload token, then remove them from the folder you publish:

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

The release when uploading must match the release in Sentry.init. The command with your own token is also shown with your project in the dashboard.

6. Keep out the noise

Browser extensions and old browsers produce errors that have nothing to do with your code. With ignoreErrors and allowUrls in Sentry.init you stop them before they cost credits:

allowUrls: [/https:\/\/(www\.)?myshop\.com/],
ignoreErrors: ["ResizeObserver loop limit exceeded"],

Personal data

errors.nl does no session replay or performance monitoring. Leave those integrations out and the SDK only sends errors.

On top of that, errors.nl filters passwords, tokens, e-mail addresses and account numbers from every error before we store it. Read more in Error monitoring and the GDPR.

Notifications

Want to know when something goes wrong without keeping the dashboard open? Turn on e-mail notifications for your project, or connect Slack, Teams, Discord or ntfy for push notifications on your phone.

Start for free View the demo