Error monitoring for v0 apps

v0 ships you a Next.js app. This tells you when it breaks in front of real users.

The fast way: ask your AI tool

v0 generates Next.js, so the snippet goes in your root layout.

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 inside the <head> of your root layout — usually app/layout.tsx, then redeploy.

app/layout.tsx — 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 v0 to fix it.

The fast way: ask your AI tool

v0 generates Next.js, so the snippet goes in your root layout.

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 inside the <head> of your root layout — usually app/layout.tsx, then redeploy.

app/layout.tsx — 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.