Better Errors

Beta

A simpler, cheaper, faster alternative to Sentry. Instantly pinpoint and fix errors — no bloat.

Try for free

$0 while in beta!

MCP Server Integration

Fix errors directly in your editor with our MCP server for seamless ai-development workflow.

AI‑Driven Fix Suggestions

Get tailored code fixes and root‑cause insights generated from your own stack.

Clutter‑Free Dashboard

Only the error data you need — so you can focus on fixing, not filtering.

Zero Runtime Overhead

Lightweight Next.js client that won't slow down your users.

Getting Started

Installation

npm install @better-errors/client

Basic Setup

Initialize Better Errors in your app with your project URL:

better-errors.ts

import { BetterErrors } from "@better-errors/client"

export const be = new BetterErrors(
  "https://better-errors.com/c/your-project-code",
)

Next.js Instrumentation

Add automatic error capturing by creating an instrumentation file in your Next.js project:

instrumentation.ts

import { be } from "./lib/better-errors"

export function onRequestError(...args: Parameters<typeof be.onRequestError>) {
  be.onRequestError(...args)
}

For client-side error capturing, create a matching instrumentation file:

instrumentation-client.ts

import { be } from "./lib/better-errors"

be.initClient()

Source Map Upload (Optional)

To enable source map uploading for better stack traces, wrap your Next.js configuration with withBetterErrorsConfig:

next.config.ts

import { withBetterErrorsConfig } from "@better-errors/client/config"
import type { NextConfig } from "next"

const nextConfig: NextConfig = {
  // Your existing Next.js config...
  experimental: {
    serverSourceMaps: true,
  },
  productionBrowserSourceMaps: true,
}

export default withBetterErrorsConfig(
  nextConfig,
  {
    uploadSourceMaps: true,
    apiKey: process.env.BETTER_ERRORS_API_KEY
  }
)

Ensure you have experimental.serverSourceMaps and productionBrowserSourceMaps enabled in your main Next.js configuration. The apiKey is required for uploading source maps. You can set this using the BETTER_ERRORS_API_KEY environment variable. On platforms like Vercel, simply add this environment variable to your project settings.

Manual Error Capturing

Capture errors in event handlers or try/catch blocks:

"use client"

import { Button } from "@/components/ui/button"
import { be } from "@/lib/better-errors"

export function MyComponent() {
  return (
    <div>
      <Button
        onClick={() => {
          try {
            // Your code that might throw
            throw new Error("Something went wrong")
          } catch (error) {
            // Capture the error
            be.captureException(error)
          }
        }}
      >
        Click me
      </Button>
      
      {/* Directly throw for demonstration */}
      <Button
        onClick={() => {
          throw new Error("Caught by Better Errors")
        }}
      >
        Trigger error
      </Button>
    </div>
  )
}

Editor Integration

Fix Errors Directly in Your Editor

Better Errors integrates with your favorite code editors through our MCP server, allowing you to fix bugs without leaving your development environment.

One-Click Error Resolution

Jump directly from error notifications to the exact line of code that needs fixing.

AI-Powered Fixes

Apply suggested fixes with a single click or customize them to your codebase's patterns.

Setup Editor Integration

mcp.json

"mcpServers": {
  "better-errors-mcp": {
    "enable": true,
    "command": "npx",
    "args": ["-y", "@better-errors/mcp@latest", "{TOKEN}"]
  }
}