Error monitoring for Next.js apps

One script tag in your root layout, and every client-side error arrives explained.

The fast way: ask your AI tool

Works with both the App Router and the Pages Router.

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 app/layout.tsx (App Router), or pages/_document.tsx (Pages Router) — 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 Next.js to fix it.