@vibemonitor/reactjs
v0.1.0
Published
Vibemonitor SDK for React apps (Vite, CRA, plain React). Thin wrapper around @vibemonitor/browser.
Maintainers
vibemonitorReadme
@vibemonitor/reactjs
Vibemonitor SDK for React SPAs — Vite + React, Create React App, or any React app that runs entirely in the browser (no SSR).
For Next.js, use
@vibemonitor/nextjsinstead — it handles the multi-runtime setup Next.js needs.
Installation
npm install @vibemonitor/reactjsPulls in @vibemonitor/browser + @vibemonitor/core transitively.
Environment variable
Vite (recommended for new React apps)
# .env or .env.local
VITE_VIBEMONITOR_API_KEY=vmsdk_xxxCreate React App
# .env or .env.local
REACT_APP_VIBEMONITOR_API_KEY=vmsdk_xxxGet your token from the Vibemonitor dashboard → Settings → API Keys.
Setup — single file, single init()
React SPAs run in the browser only. One initialization at app startup is all you need.
Vite + React
// src/main.tsx
import vibemonitor from "@vibemonitor/reactjs";
vibemonitor.init({
apiKey: import.meta.env.VITE_VIBEMONITOR_API_KEY,
service: "my-react-app",
environment: import.meta.env.MODE,
});
import { createRoot } from "react-dom/client";
import App from "./App";
createRoot(document.getElementById("root")!).render(<App />);Create React App
// src/index.tsx
import vibemonitor from "@vibemonitor/reactjs";
vibemonitor.init({
apiKey: process.env.REACT_APP_VIBEMONITOR_API_KEY!,
service: "my-react-app",
environment: process.env.NODE_ENV,
});
import ReactDOM from "react-dom/client";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root")!);
root.render(<App />);Plain React (via <script> tag)
<!DOCTYPE html>
<html>
<head>
<script type="module">
import vibemonitor from "https://cdn.jsdelivr.net/npm/@vibemonitor/reactjs/+esm"
vibemonitor.init({ apiKey: "vmsdk_xxx", service: "my-app" })
</script>
</head>
<body><div id="root"></div></body>
</html>What gets captured
Three layers run automatically after init():
- Explicit API —
vibemonitor.log("INFO", "message", { attrs })from anywhere in your code - Console wrap —
console.log/info/warn/error/debugcalls (React's dev warnings, third-party library logs, your own code) - Global errors — uncaught exceptions (
window.onerror) and unhandled promise rejections
Manual structured events
import { log } from "@vibemonitor/reactjs";
function CheckoutButton({ user, amount }) {
const handleClick = async () => {
try {
await api.charge({ amount });
log("INFO", "Checkout completed", {
userId: user.id,
amount,
});
} catch (err) {
log("ERROR", "Checkout failed", { userId: user.id, err });
}
};
return <button onClick={handleClick}>Buy</button>;
}Configuration reference
vibemonitor.init({
// Required
apiKey: "vmsdk_xxx",
// Identification
service: "my-react-app", // defaults to window.location.hostname
environment: "production", // "development" / "staging" / "production"
version: "1.2.3",
// Endpoint — default is production; override for local testing
endpoint: "http://localhost:8000/api/v1/ingest/logs",
// Master switches
enabled: true, // false → SDK is a no-op
debug: false, // true → emit [vibemonitor] stderr diagnostics
// Transport tuning
flushIntervalMs: 2000, // flush every 2 sec
maxQueueSize: 1000, // drop oldest when full
batchSize: 50, // flush when batch fills
// Capture layers
captureConsole: true,
captureGlobalErrors: true,
// PII scrubbing (redacts emails/tokens/OAuth codes before send)
scrubPatterns: ["email", "jwt", "oauth_code", ...],
customScrubPatterns: { myPattern: /.../ },
// Hook to mutate or drop entries before send
beforeSend: (entry) => entry, // return null to drop
});Best practices
Disable in tests / CI
vibemonitor.init({
apiKey: import.meta.env.VITE_VIBEMONITOR_API_KEY,
enabled: import.meta.env.MODE !== "test",
});Or via env:
# .env.test
VITE_VIBEMONITOR_ENABLED=falseWrap in a createLogger helper
If you want structured logging with module context, wrap the SDK:
// src/lib/logger.ts
import vibemonitor from "@vibemonitor/reactjs";
export function createLogger(module: string) {
return {
info: (msg: string, data?: Record<string, unknown>) =>
vibemonitor.log("INFO", msg, { module, ...data }),
error: (msg: string, data?: Record<string, unknown>) =>
vibemonitor.log("ERROR", msg, { module, ...data }),
};
}
// Usage
import { createLogger } from "@/lib/logger";
const log = createLogger("checkout");
log.info("Order created", { orderId });Don't expose the token via console.log
The token goes into a NEXT_PUBLIC_*-style env var by design — it ships to the browser. Never log the token value in your code. Customers can inspect your bundle, but they shouldn't see the token echoed to the console.
Browser support
- Chrome 90+, Firefox 113+, Safari 16.4+ — full support (gzip via native
CompressionStream) - Older browsers — SDK falls back to uncompressed body; everything else still works
- Web Workers — explicit
log()calls queue and flush; global error handlers silently disabled (nowindow)
Relation to @vibemonitor/browser
@vibemonitor/reactjs is a thin re-export of @vibemonitor/browser — all implementation lives there. This package exists so your package.json matches your stack.
If you're using Vue, Svelte, Angular, or vanilla JS, install @vibemonitor/browser directly instead.
Future versions of @vibemonitor/reactjs may add a React Error Boundary component and hooks (useVibemonitor, etc.).
Shutdown
await vibemonitor.shutdown();Automatic on page unload via navigator.sendBeacon. Call explicitly only for graceful teardown in tests.
License
Proprietary. See LICENSE.