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.