Integration

Error monitoring for v0 apps with BugTape

Q: Do I need the npm package?

No. The hosted module in Step 1 needs no install. Use @bugtape/sdk if you'd rather bundle it, and initialise it in a client component.

Add BugTape to a v0 Next.js app: browser errors with replay from the root layout, server errors through onRequestError, read by your agent over MCP.

Answer: v0 builds Next.js apps and deploys them to Vercel. To see the errors real users hit, ask v0 to add BugTape's browser script to the root layout, optionally add @bugtape/node for server errors, and connect your coding agent to BugTape's hosted MCP server. Vercel's runtime logs cover your functions on the server. BugTape adds the browser side: what the user did, the failed request, the console and the stack, grouped into one issue. We have not yet run a v0-specific end-to-end test, so this page marks which steps come from v0's docs.

No account: npx -y bugtape --help prints the commands and does not sign you in. The demo MCP at https://app.bugtape.ai/demo/mcp needs no sign-in. Your own workspace needs one.

Page owner: Jaco Veldsman, hi@bugtape.ai. Last checked 2026-11-02. v0, Vercel and Next.js facts come from their own docs on 2 November 2026, linked in each section.

Facts


What v0 builds	Next.js with the App Router, deployed to Vercel (v0 docs)
Browser capture	BugTape's hosted module loaded with `next/script` from the root layout, or `@bugtape/sdk` in a client component
Server capture	`@bugtape/node` through Next.js `onRequestError` in `instrumentation.ts` (Next.js 15 and later)
What your agent reads	Report text, timeline, the failed request, console and stack for one occurrence (`get_repro_context`). Replay is rebuilt from DOM events, not video
MCP server	`https://app.bugtape.ai/mcp`, OAuth or a `bt_pat_` token
Tested by BugTape in v0	Not yet. The Next.js recipe follows BugTape's docs and Next.js's own docs
Cost	Free plan, no card, 150 credits a month. Agent reads cost 2 credits on Free and Prepaid credits, free on Pro

What Vercel already gives you

Vercel's runtime logs show your functions' output. Retention is 1 hour on Hobby, 1 day on Pro and 3 days on Enterprise, longer with Observability Plus. In v0, Fix with v0 reads build logs when a deployment fails (v0 deployments).

Those tools see your server and your build. A JavaScript error in a visitor's browser never reaches them. BugTape records it there, with a short replay, and groups repeats into one issue.

Step 1: add BugTape to the browser

Start free, create a project and copy your bt_live_ key from Setup. Then ask v0:

Create app/bugtape-provider.tsx with this component and render it once in app/layout.tsx.

import Script from 'next/script';

export function BugTapeProvider() {
  return (
    <Script id="bugtape" type="module" strategy="afterInteractive">
      {`
        import { init } from 'https://app.bugtape.ai/bugtape.mjs';
        init({ apiKey: 'bt_live_your_key_here', privacy: 'strict' });
      `}
    </Script>
  );
}

This is BugTape's Next.js recipe. It adds no npm dependency and keeps the SDK out of server code. The bt_live_ key can only send reports, so it is safe in the browser. If you'd rather keep it in an environment variable, Next.js only exposes variables prefixed with NEXT_PUBLIC_ to the browser, and v0 sets them under Settings → Environment Variables (v0 docs).

privacy: 'strict' turns page text into solid blocks and drops query strings and request and response bodies before anything leaves the browser. Form fields are masked in every mode.

Step 2: add server errors (optional)

Ask v0 to install @bugtape/node and add this instrumentation.ts at the project root:

export async function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') (await import('@bugtape/node')).init({ service: 'web' });
}

export async function onRequestError(...args: Parameters<typeof import('@bugtape/node').captureRequestError>) {
  if (process.env.NEXT_RUNTIME === 'nodejs') await (await import('@bugtape/node')).captureRequestError(...args);
}

Next.js 15 and later call onRequestError for errors in pages, route handlers, server actions and middleware (Next.js docs). Add BUGTAPE_KEY (a key from Setup → Node.js) as an environment variable in v0 or Vercel. Server reports carry the route, service and release. They have no replay or console.

Step 3: deploy and check

Deploy, open the live app and trigger a test error, such as a button that throws. The issue appears in BugTape with the replay and the console. A sample from the Setup page does not prove your app is installed. A report from your own deployed app does.

Step 4: connect your coding agent

v0 can push to GitHub (v0 GitHub docs). If you also work on the code in Claude Code, Cursor or Codex, run:

npx -y bugtape connect claude   # or cursor, codex

Click Allow once, then ask: "Using BugTape, list my projects." When real errors arrive, ask your agent to read the top issue and open a pull request. You review it.

Step 5: or let v0 read BugTape (from v0's docs, not yet tested)

v0's MCP docs describe adding a custom server from the + menu in the prompt form, under MCPs, with OAuth, a bearer token or custom headers. For BugTape the URL is https://app.bugtape.ai/mcp. v0's docs say MCP tools are for v0 to use while it generates code; the app it builds cannot call them. That is the use here: v0 reads the BugTape issue, then edits the code. We have not confirmed this flow in v0 yet.

FAQ

Does v0 have error monitoring?

v0 links to Vercel's runtime logs and observability, and can fix failed builds from their logs. BugTape adds browser errors, failed requests and a short replay for each issue.

Do I need the npm package?

No. The hosted module in Step 1 needs no install. Use @bugtape/sdk if you'd rather bundle it, and initialise it in a client component.

Is the bt_live_ key safe in the browser?

Yes. A capture key can only send reports. Agent access uses separate OAuth grants or bt_pat_ tokens.

Has BugTape tested this in v0?

Not end to end yet. The steps follow BugTape's Next.js recipe and Node.js docs. The v0 MCP steps come from v0's docs.

Does it cost anything?

The Free plan is $0 with no credit card and includes 150 credits a month. Each agent read of a bug costs 2 credits on Free and Prepaid credits. Reads are free on Pro.