GitHub - ohbug-org/ohbug: Self-hosted application monitoring that helps software teams quickly find and fix production errors.

Introduction

Ohbug is a JavaScript monitoring module that integrates behavior monitoring, exception monitoring, and custom behavior monitoring.

Through a flexible extension system, you can achieve performance monitoring, collection of specific information, and advanced features like session replay ("screen recording").

Features

🔍 Error Monitoring — Automatically captures uncaught errors, resource errors, unhandled rejections, AJAX/Fetch errors, and WebSocket errors
🧩 Extension System — Extend functionality with a flexible plugin architecture
📱 Multi-Framework — First-class support for React, Vue, and Angular
🎬 Session Replay — Record and replay user sessions via rrweb extension
📦 Lightweight — Tree-shakable ESM modules with zero unnecessary bloat
🔧 Customizable — Hooks (onEvent, onNotify), user tracking, metadata, and action recording

Quick Start

Browser

npm install @ohbug/browser

import Ohbug from "@ohbug/browser";

const client = Ohbug.setup({
  apiKey: "YOUR_API_KEY",
  appVersion: "1.0.0",
});

React

npm install @ohbug/browser @ohbug/react

import Ohbug from "@ohbug/browser";
import { OhbugErrorBoundary } from "@ohbug/react";

const client = Ohbug.setup({ apiKey: "YOUR_API_KEY" });

function App() {
  return (
    <OhbugErrorBoundary client={client} FallbackComponent={<div>Something went wrong</div>}>
      <YourApp />
    </OhbugErrorBoundary>
  );
}

Vue

npm install @ohbug/browser @ohbug/vue

import Ohbug from "@ohbug/browser";
import { install } from "@ohbug/vue";

const client = Ohbug.setup({ apiKey: "YOUR_API_KEY" });
install(client, Vue);

Angular

npm install @ohbug/browser @ohbug/angular

import Ohbug from "@ohbug/browser";
import createProvider from "@ohbug/angular";

const client = Ohbug.setup({ apiKey: "YOUR_API_KEY" });
const provider = createProvider(client, ErrorHandler);

Configuration

Option	Type	Default	Description
`apiKey`	`string`	—	Required. Your project API key
`appVersion`	`string`	—	Application version
`appType`	`string`	—	Application type identifier
`releaseStage`	`string`	`"production"`	Current release stage
`endpoint`	`string`	`"http://localhost:6660"`	Event reporting endpoint
`maxActions`	`number`	`30`	Max number of actions to keep (0–100)
`onEvent`	`function`	—	Hook called when an event is created
`onNotify`	`function`	—	Hook called when an event is reported
`user`	`object`	—	User info (up to 6 attributes)
`metadata`	`object`	—	Additional metadata
`logger`	`object`	`console`	Custom logger with `log/info/warn/error`

Packages

Package	Description
@ohbug/core	Core module — client, events, extensions, actions
@ohbug/browser	Browser SDK — auto-captures errors, network issues, etc.
@ohbug/react	React integration — `OhbugErrorBoundary` component
@ohbug/vue	Vue integration — Vue error handler plugin
@ohbug/angular	Angular integration — `ErrorHandler` provider
@ohbug/types	TypeScript type definitions for all packages
@ohbug/utils	Shared utility functions

Related Projects

@ohbug/miniapp — SDK for Mini Programs
@ohbug/unplugin — Build plugin for uploading sourcemaps
@ohbug/cli — CLI tool for uploading sourcemaps
Extensions — Official extensions (rrweb, performance, etc.)
ohbug-dashboard — Self-hosted dashboard (NestJS + Next.js)

Development

Prerequisites

Node.js >= 18
pnpm 10+

Setup

git clone git@github.com:ohbug-org/ohbug.git
cd ohbug
pnpm install

Scripts

pnpm dev       # Watch mode for all packages
pnpm build     # Build all packages
pnpm test      # Run tests (vitest)
pnpm check     # Type check with auto-fix
pnpm lint      # Lint with auto-fix
pnpm fmt       # Format code

Playground

A React playground app is included for local development and testing:

cd playground
pnpm dev       # Starts at http://localhost:4000

Contributors

This project exists thanks to all the people who contribute.

Feedback

GitHub Issues	WeChat
ohbug-org/ohbug/issues	关注后回复「ohbug」

License

Apache License 2.0