Logging
Configure SDK logging for debugging and production monitoring.
Default Behavior
The SDK automatically detects your environment and adjusts logging accordingly:
| Environment | Console Output | Log Level |
|---|---|---|
| Development (localhost, ports 3000/5173/8080) | Enabled | DEBUG |
| Production (npm package in prod) | Disabled | ERROR only |
This means no console spam in production by default.
Log Levels
TypeScript
import { LogLevel } from '@talker-network/talker-sdk';
// Available levels (from most to least verbose)
LogLevel.TRACE // 0 - Very detailed debugging
LogLevel.DEBUG // 1 - Debug information
LogLevel.INFO // 2 - General information
LogLevel.WARN // 3 - Warnings
LogLevel.ERROR // 4 - Errors only
LogLevel.OFF // 5 - Disable all logging
Enable Logging in Production
To enable logging in production for debugging:
TypeScript
import { TalkerClient, LogLevel } from '@talker-network/talker-sdk';
const client = new TalkerClient({
userAuthToken,
userId,
a_username,
a_password,
loggerConfig: {
level: LogLevel.DEBUG, // Set desired level
enableConsole: true, // Force console output
},
});
Custom Log Handler
Send logs to external services like Sentry, LogRocket, or your own backend:
TypeScript
import { TalkerClient, LogLevel } from '@talker-network/talker-sdk';
const client = new TalkerClient({
// ...credentials
loggerConfig: {
level: LogLevel.INFO,
customHandler: (entry) => {
// entry structure:
// {
// level: LogLevel,
// component: string,
// event: string,
// data?: any,
// timestamp: Date
// }
// Send errors to Sentry
if (entry.level >= LogLevel.ERROR) {
Sentry.captureMessage(entry.event, {
level: 'error',
extra: {
component: entry.component,
data: entry.data,
},
});
}
// Send all logs to your backend
fetch('/api/logs', {
method: 'POST',
body: JSON.stringify(entry),
});
},
},
});
Sentry Integration Example
TypeScript
import * as Sentry from '@sentry/browser';
import { TalkerClient, LogLevel } from '@talker-network/talker-sdk';
const client = new TalkerClient({
// ...credentials
loggerConfig: {
level: LogLevel.WARN, // Only WARN and ERROR
customHandler: (entry) => {
const sentryLevel = entry.level >= LogLevel.ERROR ? 'error' : 'warning';
Sentry.addBreadcrumb({
category: 'talker',
message: entry.event,
level: sentryLevel,
data: {
component: entry.component,
...entry.data,
},
});
if (entry.level >= LogLevel.ERROR) {
Sentry.captureMessage(entry.event, {
level: sentryLevel,
tags: {
component: entry.component,
},
extra: entry.data,
});
}
},
},
});
LogRocket Integration Example
TypeScript
import LogRocket from 'logrocket';
import { TalkerClient, LogLevel } from '@talker-network/talker-sdk';
const client = new TalkerClient({
// ...credentials
loggerConfig: {
level: LogLevel.INFO,
customHandler: (entry) => {
// LogRocket captures console logs automatically
// but we can add custom events
LogRocket.track('Talker Event', {
component: entry.component,
event: entry.event,
level: LogLevel[entry.level],
...entry.data,
});
},
},
});
Debug Mode Toggle
Add a debug mode toggle for production troubleshooting:
TypeScript
import { TalkerClient, LogLevel } from '@talker-network/talker-sdk';
// Check for debug flag in URL or localStorage
const isDebugMode =
new URLSearchParams(window.location.search).has('debug') ||
localStorage.getItem('talker_debug') === 'true';
const client = new TalkerClient({
// ...credentials
loggerConfig: {
level: isDebugMode ? LogLevel.DEBUG : LogLevel.ERROR,
enableConsole: isDebugMode,
},
});
// Allow toggling debug mode
window.enableTalkerDebug = () => {
localStorage.setItem('talker_debug', 'true');
console.log('Debug mode enabled. Please refresh the page.');
};
window.disableTalkerDebug = () => {
localStorage.removeItem('talker_debug');
console.log('Debug mode disabled. Please refresh the page.');
};
Log Entry Structure
TypeScript
interface LogEntry {
level: LogLevel; // Log level (DEBUG, INFO, etc.)
component: string; // SDK component (Socket, WebRTC, Audio, etc.)
event: string; // Event description
data?: any; // Additional data
timestamp: Date; // When the log was created
}
// Example log entries:
// {
// level: LogLevel.INFO,
// component: 'Socket',
// event: 'Connected to server',
// timestamp: new Date()
// }
// {
// level: LogLevel.DEBUG,
// component: 'WebRTC',
// event: 'ICE candidate received',
// data: { candidate: '...' },
// timestamp: new Date()
// }
// {
// level: LogLevel.ERROR,
// component: 'Audio',
// event: 'Failed to access microphone',
// data: { error: 'NotAllowedError' },
// timestamp: new Date()
// }
Filtering Logs by Component
TypeScript
const client = new TalkerClient({
// ...credentials
loggerConfig: {
level: LogLevel.DEBUG,
customHandler: (entry) => {
// Only log specific components
const interestingComponents = ['WebRTC', 'Audio', 'Socket'];
if (interestingComponents.includes(entry.component)) {
console.log(`[${entry.component}] ${entry.event}`, entry.data);
}
},
},
});
Collecting Logs for Support
TypeScript
class LogCollector {
private logs: any[] = [];
private maxLogs = 1000;
collect(entry: any) {
this.logs.push({
...entry,
timestamp: entry.timestamp.toISOString(),
});
// Keep only recent logs
if (this.logs.length > this.maxLogs) {
this.logs.shift();
}
}
download() {
const blob = new Blob(
[JSON.stringify(this.logs, null, 2)],
{ type: 'application/json' }
);
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `talker-logs-${Date.now()}.json`;
a.click();
}
clear() {
this.logs = [];
}
}
// Usage
const logCollector = new LogCollector();
const client = new TalkerClient({
// ...credentials
loggerConfig: {
level: LogLevel.DEBUG,
customHandler: (entry) => logCollector.collect(entry),
},
});
// Add a button to download logs
document.getElementById('download-logs')?.addEventListener('click', () => {
logCollector.download();
});
Privacy Note
Be mindful of what data you log and send to external services. Avoid logging sensitive user information or message content.