@vibemonitor/browser

v0.1.0

Published

25 days ago

Vibemonitor browser SDK — capture and send logs from browser apps (React, Vite, Next.js client).

0High
0Medium
0Low

vibemonitor

vibemonitor logging observability monitoring browser nextjs react

@vibemonitor/browser

Vibemonitor SDK for any browser-side JavaScript/TypeScript app that isn't covered by a framework-specific meta-package. Use this for Vue, Svelte, Angular, vanilla JS/jQuery, or any custom browser setup.

For Next.js → use @vibemonitor/nextjs For React SPA (Vite/CRA) → use @vibemonitor/reactjs

Installation

npm install @vibemonitor/browser

Pulls in @vibemonitor/core transitively.

Environment variable

Set your bundler's public env var convention:

| Bundler | Variable name | |---|---| | Vite | VITE_VIBEMONITOR_API_KEY | | webpack | Your choice (configured via DefinePlugin) | | Parcel | PARCEL_VIBEMONITOR_API_KEY or similar | | Vanilla HTML | Inline in <script> — see below |

Get your token from the Vibemonitor dashboard → Settings → API Keys.

Setup — single file per framework

Vue + Vite

// src/main.ts
import vibemonitor from "@vibemonitor/browser";

vibemonitor.init({
  apiKey: import.meta.env.VITE_VIBEMONITOR_API_KEY,
  service: "my-vue-app",
  environment: import.meta.env.MODE,
});

import { createApp } from "vue";
import App from "./App.vue";
createApp(App).mount("#app");

Svelte (Vite)

// src/main.ts
import vibemonitor from "@vibemonitor/browser";

vibemonitor.init({
  apiKey: import.meta.env.VITE_VIBEMONITOR_API_KEY,
  service: "my-svelte-app",
});

import App from "./App.svelte";
new App({ target: document.getElementById("app")! });

Angular

// src/main.ts
import vibemonitor from "@vibemonitor/browser";
import { environment } from "./environments/environment";

vibemonitor.init({
  apiKey: environment.vibemonitorApiKey,
  service: "my-angular-app",
});

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app/app.module";
platformBrowserDynamic().bootstrapModule(AppModule);

Vanilla HTML — CDN

<!DOCTYPE html>
<html>
<head>
  <script type="module">
    import vibemonitor from "https://cdn.jsdelivr.net/npm/@vibemonitor/browser/+esm"

    vibemonitor.init({
      apiKey: "vmsdk_xxx",
      service: "my-site",
      environment: "production",
    })
  </script>
</head>
<body>
  <!-- your page -->
</body>
</html>

Vanilla HTML — local bundle

<script type="module">
  import vibemonitor from "/node_modules/@vibemonitor/browser/dist/index.js"
  vibemonitor.init({ apiKey: "vmsdk_xxx", service: "my-site" })
</script>

jQuery / legacy

For non-module environments, use the CDN as a script tag (once we ship a UMD bundle; for now use the ESM import above inside a <script type="module">).

What gets captured

Three layers run automatically after init():

Explicit API — vibemonitor.log("INFO", "message", { attrs }) from anywhere
Console wrap — console.log/info/warn/error/debug calls (any library, your own code)
Global errors — window.onerror (uncaught exceptions) + unhandledrejection (promise rejections)

Manual structured logging

import { log } from "@vibemonitor/browser";

log("INFO", "User signed up", {
  userId: "u_42",
  plan: "pro",
});

log("ERROR", "Payment gateway timeout", {
  userId: "u_42",
  attempt: 3,
});

Configuration reference

vibemonitor.init({
  // Required
  apiKey: "vmsdk_xxx",

  // Identification
  service: "my-app",                // defaults to window.location.hostname
  environment: "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 (no fetch, no listeners)
  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,             // wrap console.*
  captureGlobalErrors: true,        // listen to window.onerror + unhandledrejection

  // PII scrubbing (all default-on — redact before network send)
  scrubPatterns: [
    "email", "phone", "ip", "ipv6", "mac_address", "credit_card", "iban",
    "ssn", "aadhaar", "pan_card",
    "bearer_token", "password", "jwt", "aws_key", "private_key",
    "url_credentials",
    "oauth_code", "oauth_access_token", "oauth_id_token",
  ],
  customScrubPatterns: { customerId: /CUST-\d+/g },

  // Hook to mutate or drop entries
  beforeSend: (entry) => entry,     // return null to drop
});

Best practices

Different service names per app

If you have multiple apps pointing at the same Vibemonitor workspace, give each a distinct service name so you can filter in the dashboard.

Disable in dev / test

vibemonitor.init({
  apiKey: import.meta.env.VITE_VIBEMONITOR_API_KEY,
  enabled: import.meta.env.PROD,    // true only in production builds
});

Wrap in your own logger abstraction

// src/lib/logger.ts
import vibemonitor from "@vibemonitor/browser";

export const log = {
  info: (msg: string, data?: Record<string, unknown>) =>
    vibemonitor.log("INFO", msg, data),
  warn: (msg: string, data?: Record<string, unknown>) =>
    vibemonitor.log("WARN", msg, data),
  error: (msg: string, data?: Record<string, unknown>) =>
    vibemonitor.log("ERROR", msg, data),
};

// Usage
import { log } from "@/lib/logger";
log.error("something broke", { userId });

`beforeSend` to filter noise

vibemonitor.init({
  apiKey: "...",
  beforeSend: (entry) => {
    // Drop known-benign React dev warnings
    if (entry.message.includes("Warning: Each child in a list")) return null;
    return entry;
  },
});

Browser support

Chrome 90+, Firefox 113+, Safari 16.4+ — full support (gzip via native CompressionStream)
Older browsers — SDK falls back to uncompressed; everything else still works
Web Workers / Shared Workers — log() works; global error handlers silently disabled (no window)
Edge runtime (Cloudflare Workers, Vercel Edge) — log() works; no sendBeacon path (uses fetch with keepalive)

Shutdown

await vibemonitor.shutdown();

Automatic on page unload via navigator.sendBeacon. Call explicitly only for graceful teardown in tests.

FAQ

Q: I see [vibemonitor] unexpected response status 404 in the console. The endpoint URL is wrong. Default is https://api.vibemonitor.ai/api/v1/ingest/logs. Check your Vibemonitor dashboard for the correct URL or override with endpoint:.

Q: Nothing is being captured. Check:

Is enabled: true? (Defaults to true. Env VIBEMONITOR_ENABLED=false would disable it.)
Is apiKey set and valid?
Is your token bound to your app's origin in the dashboard?
Set debug: true to see [vibemonitor] diagnostic lines.

Q: My logger uses pino / winston. Will this catch those? No — those write directly to stdout and bypass console.*. For Node backends, use @vibemonitor/node (future versions will ship pino/winston transport adapters). For browser, most SDK-style libraries use console.* under the hood.

License

Proprietary. See LICENSE.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@vibemonitor/browser

Installation

Environment variable

Setup — single file per framework

Vue + Vite

Svelte (Vite)

Angular

Vanilla HTML — CDN

Vanilla HTML — local bundle

jQuery / legacy

What gets captured

Manual structured logging

Configuration reference

Best practices

Different service names per app

Disable in dev / test

Wrap in your own logger abstraction

beforeSend to filter noise

Browser support

Shutdown

FAQ

License

`beforeSend` to filter noise