English | 简体中文

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