Reusable React Code Modules, Part 9 - Logging

Effective Debugging: Implementing Reusable Logging Modules for Better Insights

Logging is essential for tracking application behavior, diagnosing issues, and monitoring performance. Effective logging helps developers maintain and debug applications more efficiently. This guide covers how to structure reusable logging modules in React, manage logs, and integrate logging libraries.

Common Libraries and Tools

1. Winston

2. Log4js

3. LogRocket

4. Sentry

1. Winston

Winston is a versatile logging library for JavaScript, often used in Node.js applications but also applicable in React projects

Key Features

• Multiple transport layers (console, file, HTTP, etc.)

• Log levels and custom formats

• Asynchronous logging

• Integrations with logging services

2. Log4js

Log4js is a logging library inspired by log4j, suitable for JavaScript applications, including React

Key Features

• Multiple appenders (console, file, SMTP, etc.)

• Flexible configuration

• Log categories and levels

• Asynchronous logging

3. LogRocket

LogRocket is a front-end logging and session replay service, providing deep insights into user interactions and application performance

Key Features

• Session replay

• Console logs and network activity capture

• Performance monitoring

• Integration with issue tracking systems

4. Sentry

Sentry is an error tracking and performance monitoring service, widely used for logging errors and monitoring React applications

Key Features

• Real-time error tracking

• Performance monitoring

• Integrations with various platforms and frameworks

• Contextual information and breadcrumbs

Comparison

• Winston: Best for versatile and customizable logging solutions, supporting multiple transport layers

• Log4js: Ideal for applications needing a flexible logging configuration with various appenders

• LogRocket: Suitable for applications requiring session replay and detailed user interaction logs

• Sentry: Best for comprehensive error tracking and performance monitoring with extensive integration capabilities

Examples

Example 1: Winston

Setup:

import { createLogger, transports, format } from 'winston';

const logger = createLogger({
  level: 'info',
  format: format.combine(
    format.timestamp(),
    format.json()
  ),
  transports: [
    new transports.Console(),
    new transports.File({ filename: 'app.log' }),
  ],
});

export default logger;

Usage:

import React, { useEffect } from 'react';
import logger from './logger';

const App = () => {
  useEffect(() => {
    logger.info('App component mounted');
  }, []);

  return (
    <div>
      <h1>Logging with Winston</h1>
    </div>
  );
};

export default App;

Example 2: Log4js

Setup:

import log4js from 'log4js';

log4js.configure({
  appenders: {
    console: { type: 'console' },
    file: { type: 'file', filename: 'app.log' },
  },
  categories: {
    default: { appenders: ['console', 'file'], level: 'info' },
  },
});

const logger = log4js.getLogger();

export default logger;

Usage:

import React, { useEffect } from 'react';
import logger from './logger';

const App = () => {
  useEffect(() => {
    logger.info('App component mounted');
  }, []);

  return (
    <div>
      <h1>Logging with Log4js</h1>
    </div>
  );
};

export default App;

Example 3: LogRocket

Setup:

import LogRocket from 'logrocket';

LogRocket.init('your-app-id');

export default LogRocket;

Usage:

import React, { useEffect } from 'react';
import LogRocket from './logrocket';

const App = () => {
  useEffect(() => {
    LogRocket.log('App component mounted');
  }, []);

  return (
    <div>
      <h1>Logging with LogRocket</h1>
    </div>
  );
};

export default App;

Example 4: Sentry

Setup:

import * as Sentry from '@sentry/react';
import { Integrations } from '@sentry/tracing';

Sentry.init({
  dsn: 'your-dsn-url',
  integrations: [new Integrations.BrowserTracing()],
  tracesSampleRate: 1.0,
});

export default Sentry;

Usage:

import React, { useEffect } from 'react';
import * as Sentry from './sentry';

const App = () => {
  useEffect(() => {
    Sentry.captureMessage('App component mounted');
  }, []);

  return (
    <div>
      <h1>Logging with Sentry</h1>
    </div>
  );
};

export default App;