React Contextual Logger A simple React hook that enhances console.log for a cleaner, more organized, and context-aware debugging experience.

The Problem In a complex React application, the browser console quickly becomes a messy, undifferentiated stream of log messages. It's difficult to know which component or function produced which log, making debugging a slow and frustrating process.

// Console Output

{ user: ... } Render cycle triggered Fetching data... { user: ... } // Which log is which? Where did they come from?

The Solution useLogger is a simple hook that provides a logging function that automatically adds context to your messages. It uses styled and collapsible groups in the browser console to keep your logs organized and easy to read.

Installation npm install @your-username/react-contextual-logger

How to Use In any component, call the useLogger hook with a context name (usually the component's name) to get your new log function.

import { useLogger } from '@your-username/react-contextual-logger'; import { useEffect, useState } from 'react';

function UserProfile({ userId }) { // Get a logger specific to this component instance const log = useLogger(UserProfile:${userId}); const [user, setUser] = useState(null);

useEffect(() => { log('Component mounted. Fetching user data...');

fetch(`/api/users/${userId}`)
  .then(res => res.json())
  .then(data => {
    log('Data received:', data);
    setUser(data);
  });

}, [userId, log]); // log is a stable function, safe to use in dependency arrays

return ( {/* ... render user profile */} ); }

This will produce clean, organized, and color-coded logs in your browser console, making it immediately obvious where each message came from.

API useLogger(contextName, disabled?) Parameters contextName: string (required): A name for the logging context, typically your component's name.

disabled?: boolean (optional): A flag to disable logging. By default, logging is also disabled if process.env.NODE_ENV === 'production'.

Returns log(...args): A stable logging function that you can use just like console.log.