Error monitoring for React apps

Catch the render crashes that leave your users staring at a blank white page.

The fast way: ask your AI tool

One script tag, plus an error boundary so a crash shows a message instead of nothing.

Paste this into your chat
Install Vigil error monitoring in this app. Follow the instructions at https://vigill.dev/skill?key=vg_pub_YOUR_KEY exactly, then confirm installation succeeded.

It will work out where the snippet goes, put it there, and check that it worked. If it gets stuck, the instructions tell it how to recover.

The manual way

Paste this in the <head> of index.html — usually index.html, then redeploy.

index.html — html
<script src="https://vigill.dev/v.js" data-vigil-key="vg_pub_YOUR_KEY"></script>

This key is meant to be public — it can only send errors in, never read anything out. Do not move it into an environment variable; static hosts have nothing to read one back at runtime.

When a React component throws while rendering, React removes the whole page and the browser never reports it. Wrapping your app catches those, and shows your users a message instead of a white screen.

App.tsx — tsx
import { VigilErrorBoundary } from '@vigil/react';
export default function App() {
  return (
    <VigilErrorBoundary>
      <YourApp />
    </VigilErrorBoundary>
  );
}

What happens next

Load your app once in a browser. Within a minute your dashboard confirms vigill.dev is watching. After that, if something breaks, you get an email that explains what happened in plain English — and a prompt you can paste straight back into React (Vite or CRA) to fix it.

The fast way: ask your AI tool

One script tag, plus an error boundary so a crash shows a message instead of nothing.

Paste this into your chat

Install Vigil error monitoring in this app. Follow the instructions at https://vigill.dev/skill?key=vg_pub_YOUR_KEY exactly, then confirm installation succeeded.

It will work out where the snippet goes, put it there, and check that it worked. If it gets stuck, the instructions tell it how to recover.

The manual way

Paste this in the <head> of index.html — usually index.html, then redeploy.

index.html — html

<script src="https://vigill.dev/v.js" data-vigil-key="vg_pub_YOUR_KEY"></script>

This key is meant to be public — it can only send errors in, never read anything out. Do not move it into an environment variable; static hosts have nothing to read one back at runtime.

What happens next