Error tracking and user interaction monitoring for vanilla JavaScript, Vue, Svelte, and other browser apps.
Browser Integration
Lightweight error tracking for browser applications. Automatically captures global errors, unhandled rejections, clicks, inputs, and network requests as breadcrumbs. Works with any framework — Vue, Svelte, vanilla JS, or anything that runs in a browser.
npm install @codmir/sdkQuick Start
import { init, captureException } from '@codmir/sdk/browser';
init({
dsn: 'https://your-project.codmir.com/api/overseer',
trackClicks: true,
trackRequests: true,
});
try {
riskyOperation();
} catch (error) {
captureException(error);
}Script Tag
<script type="module">
import { init, captureException } from '@codmir/sdk/browser';
init({
dsn: 'https://your-project.codmir.com/api/overseer',
});
window.onerror = (msg, url, line, col, error) => {
captureException(error);
};
</script>Configuration
import { init } from '@codmir/sdk/browser';
init({
dsn: process.env.CODMIR_DSN,
environment: 'production',
// Error capture (both default to true)
captureGlobalErrors: true,
captureUnhandledRejections: true,
// Console.error capture (default: false)
captureConsoleErrors: false,
// Interaction tracking
trackClicks: true, // Log clicks as breadcrumbs
trackInputs: false, // Log inputs (values are masked)
trackRequests: true, // Log fetch/XHR as breadcrumbs
});Config Reference
| Option | Type | Default | Description |
|---|---|---|---|
captureGlobalErrors | boolean | true | Capture window.onerror events |
captureUnhandledRejections | boolean | true | Capture unhandled promise rejections |
captureConsoleErrors | boolean | false | Intercept console.error calls |
trackClicks | boolean | true | Record click targets as breadcrumbs |
trackInputs | boolean | false | Record input events (values never logged) |
trackRequests | boolean | true | Record fetch/XHR requests with status and timing |
Automatic Tracking
Global Errors
When captureGlobalErrors is enabled, the SDK listens for window.onerror and captures errors with file, line, and column metadata.
Network Requests
When trackRequests is enabled, the SDK patches fetch and XMLHttpRequest to record breadcrumbs with method, URL, status code, and duration.
Click Tracking
When trackClicks is enabled, clicks are recorded with the element tag, ID, class, and text content (for buttons and links).
Manual Capture
import {
captureException,
captureMessage,
setUser,
setTags,
addBreadcrumb,
} from '@codmir/sdk/browser';
// Set user context
setUser({ id: 'user-123', email: '[email protected]' });
// Add tags
setTags({ feature: 'checkout', version: '2.1.0' });
// Custom breadcrumb
addBreadcrumb({
category: 'user.action',
message: 'Added item to cart',
data: { productId: 'prod-456' },
});
// Capture an error with context
captureException(new Error('Payment failed'), {
extra: { orderId: '12345' },
});
// Capture a message
captureMessage('User completed onboarding', 'info');Framework Examples
Vue 3
import { init, captureException } from '@codmir/sdk/browser';
init({ dsn: process.env.VITE_CODMIR_DSN });
const app = createApp(App);
app.config.errorHandler = (err, instance, info) => {
captureException(err, { extra: { component: info } });
};Svelte
import { init, captureException } from '@codmir/sdk/browser';
init({ dsn: import.meta.env.VITE_CODMIR_DSN });
// In your root +layout.svelte or +error.svelte
export function handleError({ error }) {
captureException(error);
}TypeScript Support
import type {
BrowserConfig,
OverseerConfig,
UserContext,
Breadcrumb,
SeverityLevel,
} from '@codmir/sdk/browser';