duckbug-react

The official JavaScript SDK for DuckBug.io - a flexible logging and error tracking platform.

Installation

# npm
npm install duckbug-react

# yarn
yarn add duckbug-react

# pnpm
pnpm add duckbug-react

Quick Start

Basic Usage

import { DuckBugWrapper, DuckBugProvider } from 'duckbug-react'; 

// Paste your dsn from DuckBug
const dsn = 'your-duckbug-dsn-here'

const providers = [
  new DuckBugProvider({ dsn: dsn }),
  new MyCustomProvider({ /* your config */ }),
  // add more providers as needed
];

// Create SDK instance with optional configuration
// You can configure the configuration as you want.
// If you don't pass a configuration prop, the default configuration will be used
const config = {    
logReports: {
        log: false,
        warn: true,
        error: true,
    }
};
  
// Start logging
<DuckBugWrapper providers={providers} config={config}>
    <YourApp />
</DuckBugWrapper>

// This is all you need to catch and log errors

Methods

You can also catch errors them yourself and log them

import { useDuckBug } from 'duckbug-react';

//Get your DuckSDK
const duck = useDuckBug()

<button onClick={() => {
    try {
        //Some code...
    } catch (err) {
        duck.error(err) // Example of using duck methods
    }
}}>
  SendMessage
</button>

// Logging methods
duck.log('Info message', { userId: 123, action: 'user_login' });
duck.debug('Debug message', { debugInfo: 'Connection established' });
duck.warn('Warning message', { warning: 'Rate limit approaching' });
duck.error('Error message', { error: 'Database connection failed' });
duck.fatal('Fatal message', { error: 'Ay, caramba' });

Browser Compatibility

This SDK works in all modern browsers that support:

• ES2015+ (ES6)
• Fetch API
• JSON API

For older browsers, you may need to include polyfills.

License

MIT © DuckBug.io

Support

• 🐛 Issues: GitHub Issues

---

Made with 🦆 by the DuckBug.io team