Beagle provides two built-in log types for common logging scenarios: MessageLog for general messages and ErrorLog for error tracking.
Log Levels
Beagle supports five log levels to categorize your logs:
loading - For pending operationsinfo - For informational messages (default)warning - For warnings that need attentionerror - For errors and exceptionssuccess - For successful operations
Each log level is visually distinguished in the Beagle inspector with different colors and indicators.
Using MessageLog
MessageLog is perfect for logging general information, warnings, and success messages throughout your application.
Import MessageLog
import { Beagle, MessageLog } from 'react-native-beagle';
Log messages with different levels
Beagle.log(new MessageLog('User logged in successfully', 'info'));
The second parameter (log level) is optional and defaults to 'info' if not specified.
Using ErrorLog
ErrorLog is specifically designed for error tracking. It automatically extracts error details including the message, stack trace, and cause.
Import ErrorLog
import { Beagle, ErrorLog } from 'react-native-beagle';
Log errors in try-catch blocks
try {
// Some code that might throw an error
await fetchUserData();
} catch (error) {
Beagle.log(new ErrorLog(error));
}
ErrorLog Implementation
The ErrorLog class automatically handles different error types:
export class ErrorLog extends BeagleLog {
error: unknown;
constructor(error: unknown) {
const message = error instanceof Error ? error.message : String(error);
super(message, 'error');
this.error = error;
}
}
ErrorLogPlugin provides a detailed view that includes:
- Name: The error type (e.g.,
TypeError, ReferenceError)
- Message: The error message
- Stack: Full stack trace for debugging
- Cause: The underlying cause if available
When to Use Each Log Type
Use MessageLog for:
- Application state changes
- User actions and events
- API call status updates
- Feature flag toggles
- Success confirmations
- General debugging information
// Application events
Beagle.log(new MessageLog('App launched', 'info'));
// User actions
Beagle.log(new MessageLog('User tapped checkout button', 'info'));
// Status updates
Beagle.log(new MessageLog('Payment processed successfully', 'success'));
Use ErrorLog for:
- Exception handling
- API errors
- Validation failures
- Runtime errors
- Network failures
// Exception handling
try {
await processPayment();
} catch (error) {
Beagle.log(new ErrorLog(error));
}
// API errors
if (!response.ok) {
Beagle.log(new ErrorLog(new Error(`API Error: ${response.status}`)));
}
Complete Example
Here’s a complete example showing both log types in action:
import { useEffect } from 'react';
import { Beagle, MessageLog, ErrorLog } from 'react-native-beagle';
function UserProfile({ userId }: { userId: string }) {
useEffect(() => {
async function loadProfile() {
Beagle.log(new MessageLog('Loading user profile...', 'loading'));
try {
const response = await fetch(`/api/users/${userId}`);
if (!response.ok) {
throw new Error(`Failed to fetch user: ${response.status}`);
}
const data = await response.json();
Beagle.log(new MessageLog('User profile loaded', 'success'));
return data;
} catch (error) {
Beagle.log(new ErrorLog(error));
}
}
loadProfile();
}, [userId]);
// Component rendering...
}
Open the Beagle inspector to see all your logs organized by timestamp, with color-coded indicators for each log level.