@getoncall/next

Error monitoring for Next.js (App Router) — with plain-English diagnoses and verified fix PRs.

OnCall catches the errors your users hit, explains each in plain English, and — when you approve — opens a pull request that fixes the bug and confirms it held in production. This package wires the browser side into the App Router; pair it with @getoncall/node for route handlers and server actions.

Install — just ask your agent

In Cursor, Claude, Lovable, v0, or any AI editor, paste this (swap in your key):

Install OnCall in this Next.js app — add @getoncall/next and render <OnCallScript projectKey="onc_pk_your_project_key" /> in app/layout.tsx. Nothing else.

Connect the OnCall MCP server (npx @getoncall/mcp) and your agent installs and verifies it — client and server.

Install

npm install @getoncall/next

Add <OnCallScript /> to your root layout

// app/layout.tsx
import { OnCallScript } from "@getoncall/next";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <OnCallScript projectKey="onc_pk_your_project_key" />
        {children}
      </body>
    </html>
  );
}

That's the client side — uncaught errors, unhandled rejections, and console errors, with route + breadcrumb context.

Server side (route handlers, server actions)

Install @getoncall/node and init it once with your secret key:

import { initOncall, captureException } from "@getoncall/node";

initOncall({ key: process.env.ONCALL_SECRET_KEY! });

export async function POST(req: Request) {
  try {
    return await handle(req);
  } catch (err) {
    captureException(err, { route: "/api/checkout" });
    throw err;
  }
}

Keys

• Browser — public project key onc_pk_… (safe to ship).
• Server — secret key onc_sk_… from ONCALL_SECRET_KEY.

Both are on your project's install screen at intaglio.io.

Links

• 🌐 Dashboard & docs: intaglio.io
• 🐙 Source: github.com/Booger-Aids/oncall

MIT © OnCall