@rezabakhshi/error-tracker-browser

A lightweight browser SDK for Error Tracker - Real-time error monitoring and tracking for web applications.

Features

• 🚀 Automatic Error Capture - Catches unhandled errors and promise rejections
• 📊 Real-time Reporting - Sends errors to your Error Tracker dashboard instantly
• 👤 User Context - Associate errors with specific users
• 🍞 Breadcrumbs - Track user actions leading up to errors
• 🎯 Manual Error Reporting - Capture custom errors and messages
• ⚡ Lightweight - Minimal bundle size, maximum performance
• 📦 TypeScript Ready - Full type definitions included

Installation

npm install @rezabakhshi/error-tracker-browser
Quick Start
1. Initialize the SDK
typescript
import { init } from '@rezabakhshi/error-tracker-browser';

init({
  dsn: 'https://[email protected]/your-project-id',
  environment: 'production',
  release: '1.0.0',
  enableAutoCapture: true,
  sampleRate: 1.0
});
2. Set User Context (Optional)
typescript
import { setUser } from '@rezabakhshi/error-tracker-browser';

// After user login
setUser({
  id: 'user-123',
  email: '[email protected]',
  username: 'john_doe'
});
3. Capture Errors
typescript
import { captureException } from '@rezabakhshi/error-tracker-browser';

try {
  // Your code that might throw an error
  await fetchData();
} catch (error) {
  captureException(error, { 
    context: 'additional info',
    userId: currentUser.id 
  });
}
4. Capture Messages
typescript
import { captureMessage } from '@rezabakhshi/error-tracker-browser';

// Track important events
captureMessage('User completed checkout', 'info', {
  cartValue: 199.99,
  itemCount: 3
});

// Track warnings
captureMessage('API response slow', 'warning', {
  endpoint: '/api/search',
  responseTime: 2500
});
API Reference
init(options: InitOptions)
Initializes the SDK with your configuration.

Options:

Option	Type	Default	Description
dsn	string	required	Your project DSN from Error Tracker
environment	string	'production'	Environment name (production, staging, development)
release	string	undefined	Release/version of your application
enableAutoCapture	boolean	true	Automatically capture unhandled errors
sampleRate	number	1.0	Percentage of errors to capture (0-1)
baseUrl	string	undefined	Custom API endpoint URL
enableBreadcrumbs	boolean	true	Enable user action tracking
maxBreadcrumbs	number	50	Maximum breadcrumbs to store
captureException(error: any, extra?: Record<string, any>)
Captures an error and sends it to Error Tracker.

typescript
captureException(new Error('Something went wrong'), {
  component: 'UserProfile',
  action: 'saveProfile',
  userId: '123'
});
captureMessage(message: string, level?: 'info' | 'warning' | 'error', extra?: Record<string, any>)
Captures a custom message or event.

typescript
captureMessage('User clicked button', 'info', {
  buttonName: 'submit',
  page: 'checkout'
});
setUser(user: { id?: string; email?: string; username?: string })
Sets the current user context for error tracking.

typescript
setUser({
  id: 'user-123',
  email: '[email protected]',
  username: 'john_doe'
});
Framework Examples
React
typescript
// app.tsx
import { useEffect } from 'react';
import { init, captureException } from '@rezabakhshi/error-tracker-browser';

function App() {
  useEffect(() => {
    init({
      dsn: process.env.REACT_APP_ERROR_TRACKER_DSN!,
      environment: process.env.NODE_ENV,
      release: process.env.REACT_APP_VERSION
    });
  }, []);

  const handleError = () => {
    try {
      // risky operation
    } catch (error) {
      captureException(error);
    }
  };

  return <button onClick={handleError}>Click Me</button>;
}
Next.js (App Router)
typescript
// app/layout.tsx
'use client';

import { useEffect } from 'react';
import { init, captureException } from '@rezabakhshi/error-tracker-browser';

export default function RootLayout({ children }) {
  useEffect(() => {
    init({
      dsn: process.env.NEXT_PUBLIC_ERROR_TRACKER_DSN!,
      environment: process.env.NODE_ENV,
      release: process.env.NEXT_PUBLIC_APP_VERSION
    });
  }, []);

  return <>{children}</>;
}
Vue.js
typescript
// main.ts
import { init, captureException } from '@rezabakhshi/error-tracker-browser';
import { createApp } from 'vue';
import App from './App.vue';

init({
  dsn: import.meta.env.VITE_ERROR_TRACKER_DSN,
  environment: import.meta.env.MODE
});

const app = createApp(App);
app.config.errorHandler = (error) => {
  captureException(error);
};
app.mount('#app');
Environment Variables (Recommended)
Create a .env file:

env
VITE_ERROR_TRACKER_DSN=https://[email protected]/your-project-id
VITE_APP_VERSION=1.0.0
Then use it:

typescript
init({
  dsn: import.meta.env.VITE_ERROR_TRACKER_DSN,
  environment: import.meta.env.MODE,
  release: import.meta.env.VITE_APP_VERSION
});
Browser Support
Chrome	Firefox	Safari	Edge	IE
✅ 60+	✅ 60+	✅ 12+	✅ 79+	❌
Troubleshooting
Errors not appearing in dashboard?
Check your DSN is correct

Verify your backend is running

Open browser console (F12) for error logs

Check network tab for failed requests

SDK not initializing?
Make sure you call init() before capturing any errors:

typescript
// ✅ Correct
init({ dsn: '...' });
captureException(error);

// ❌ Incorrect
captureException(error); // SDK not initialized yet
init({ dsn: '...' });
License
MIT

Links
Error Tracker Platform

Documentation

GitHub Repository

Report Issue

Made with ❤️ by Reza