Error monitoring for Bolt.new apps

Find out when your Bolt app breaks in production, without reading a stack trace.

The fast way: ask your AI tool

Ask Bolt to install it in the chat — it has full access to your files.

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 Bolt to fix it.

← All docs