FetchDevConsole

A sleek, lightweight React component that captures and displays console output with an elegant hover-to-expand UI. Perfect for debugging, error reporting, and streamlined development workflows. Designed to be added to page headers for quick developer access to crucial console information.

✨ Features

🎯 Smart Console Interception: Automatically captures all console output (log, error, warn, info, debug)
🔍 Intelligent Filtering: Built-in suppression for common third-party library warnings
📋 One-Click Copy: Copy console output to clipboard with rich context information
🎨 Elegant UI: Minimalist floating button that expands on hover
🏷️ Visual Indicators: Badge showing error/warning counts with color coding
⚡ Zero Configuration: Works out of the box with sensible defaults
🔧 Highly Customizable: Position, theme, size, and suppression patterns
📦 Lightweight: Minimal bundle size impact
🎭 Framework Agnostic Core: Console capture works anywhere, React UI optional
🚀 Header Integration: Perfect for adding to page headers for persistent developer access

🚀 Quick Start

NPM Installation

npm install fetch-dev-console

Install the required Material-UI dependencies:

npm install @mui/material @emotion/react @emotion/styled @mui/icons-material

import React from 'react';
import { FetchDevConsole, initConsoleCapture } from 'fetch-dev-console';

// Initialize console capture (call once in your app)
initConsoleCapture();

function App() {
  return (
    <div>
      <header>
        <h1>My App</h1>
        {/* Add to header for persistent developer access */}
        {process.env.NODE_ENV === 'development' && <FetchDevConsole />}
      </header>
      {/* Your app content */}
    </div>
  );
}

export default App;

🔧 Integration with Existing Projects

Using Git Subtree (Recommended)

Perfect for integrating into existing React projects while maintaining the ability to receive updates:

# ⚠️ Important: Ensure your working tree is clean before adding subtree
git status  # Check for uncommitted changes
git add .   # Stage any changes
git commit -m "Save current work before adding fetch-dev-console"

# Add fetch-dev-console as a subtree
git subtree add --prefix=src/components/fetch-dev-console https://github.com/mariov96/fetch-dev-console.git main --squash

Usage after subtree integration:

// Import from your local subtree
import { FetchDevConsole, initConsoleCapture } from './components/fetch-dev-console/src';

// Initialize in your main App component
function App() {
  useEffect(() => {
    initConsoleCapture();
  }, []);

  return (
    <div>
      <header className="app-header">
        <nav>Your Navigation</nav>
        {/* Add to header for quick developer access */}
        {process.env.NODE_ENV === 'development' && (
          <FetchDevConsole position="top-right" />
        )}
      </header>
      {/* Your app content */}
    </div>
  );
}

Future Updates:

# Pull updates from the fetch-dev-console repo
git subtree pull --prefix=src/components/fetch-dev-console https://github.com/mariov96/fetch-dev-console.git main --squash

Alternative: Manual Installation

If you prefer not to use git subtree:

# Clone to temporary location
git clone https://github.com/mariov96/fetch-dev-console.git temp-console
mkdir -p src/components/fetch-dev-console
cp -r temp-console/* src/components/fetch-dev-console/
rm -rf temp-console

# Install Material-UI dependencies if not already installed
npm install @mui/material @emotion/react @emotion/styled @mui/icons-material

# Add to your project
git add src/components/fetch-dev-console/
git commit -m "Add fetch-dev-console component"

Header Integration Best Practices

// Layout component with header integration
function Layout({ children }) {
  return (
    <div className="app-layout">
      <header className="main-header">
        <div className="header-content">
          <Logo />
          <Navigation />
          {/* Developer console access in header */}
          {process.env.NODE_ENV === 'development' && (
            <div className="dev-tools">
              <FetchDevConsole 
                position="top-right"
                theme="auto"
                size="medium"
              />
            </div>
          )}
        </div>
      </header>
      <main>{children}</main>
    </div>
  );
}

Troubleshooting Integration

"fatal: working tree has modifications": Commit or stash your changes before running git subtree add
Component not found: Check the import path matches your actual file structure
Styles not loading: Ensure CSS imports are included in your build process
Material-UI errors: Make sure all required MUI dependencies are installed: @mui/material, @emotion/react, @emotion/styled, @mui/icons-material
Console not capturing: Make sure initConsoleCapture() is called before any console output

🎨 Demo

Hover to expand, click to copy, dropdown for filtering options

📖 API Reference

`initConsoleCapture(options?)`

Initialize the console capture system. Call this once in your application root.

Options:

suppressPatterns?: string[] - Array of patterns to suppress from console
maxLogs?: number - Maximum logs to keep in memory (default: 1000)

initConsoleCapture({
  suppressPatterns: [
    'react-beautiful-dnd',
    'Support for defaultProps will be removed',
    'Your custom warning pattern'
  ],
  maxLogs: 500
});