Debug Console & Error Boundary

A React utility package that provides a Debug Console for logging, network monitoring, and storage inspection, along with an Error Boundary component to catch and handle errors gracefully.

Features

• Debug Console:

  • Intercepts and logs console.log, console.info, console.warn, and console.error.
  • Monitors and logs network requests (both XMLHttpRequest and fetch).
  • Inspects localStorage, sessionStorage, and cookies.
  • Customizable UI with drag-and-drop support.
  • Clear logs and network requests with a single click.

• Error Boundary:

  • Catches JavaScript errors in the component tree.
  • Displays a fallback UI when an error occurs.
  • Logs errors to the console or an error reporting service.

Installation

Install the package using npm or yarn:

npm install rocket-devtool

or

yarn add rocket-devtool

Usage

1. Debug Console

Wrap your application with the DebugConsoleProvider to enable the debug console.

import React from 'react';
import { DebugConsoleProvider } from 'rocket-devtool';

const App = () => {
  return (
    <DebugConsoleProvider>
      <div>
        <h1>Welcome to My App</h1>
        {/* Your app components */}
      </div>
    </DebugConsoleProvider>
  );
};

export default App;

Accessing the Debug Console

• A floating button (🚀) will appear in your app. Click it to open the debug console.
• Use the tabs to view logs, network requests, and storage data.

Customizing the Debug Console

You can customize the position and size of the debug console button:

<DebugConsoleProvider
  buttonSettings={{
    position: 'bottomRight', // Options: 'topLeft', 'topRight', 'leftCenter', 'rightCenter', 'bottomLeft', 'bottomRight'
    size: 50, // Button size in pixels
  }}
>
  {/* Your app components */}
</DebugConsoleProvider>

2. Error Boundary

Wrap your components with the ErrorBoundary to catch and handle errors.

import React from 'react';
import { ErrorBoundary } from 'rocket-devtool';

const App = () => {
  return (
    <ErrorBoundary>
      <div>
        <h1>Welcome to My App</h1>
        {/* Your app components */}
      </div>
    </ErrorBoundary>
  );
};

export default App;

Custom Fallback UI

You can customize the fallback UI displayed when an error occurs:

<ErrorBoundary
  fallback={({ error, resetErrorBoundary }) => (
    <div>
      <h1>Something went wrong</h1>
      <p>{error.message}</p>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  )}
>
  {/* Your app components */}
</ErrorBoundary>

API Reference

DebugConsoleProvider

| Prop | Type | Default | Description | |------------------|-------------------------------|---------------|-----------------------------------------------------------------------------| | buttonSettings | { position: string; size: number } | { position: 'bottomLeft', size: 40 } | Customize the position and size of the debug console button. |

ErrorBoundary

| Prop | Type | Default | Description | |------------|-------------------------------|---------------|-----------------------------------------------------------------------------| | fallback | (props: FallbackProps) => ReactNode | Default fallback UI | Custom fallback UI to display when an error occurs. |

Examples

Example 1: Basic Usage

import React from 'react';
import { DebugConsoleProvider, ErrorBoundary } from 'rocket-devtool';

const App = () => {
  return (
    <DebugConsoleProvider>
      <ErrorBoundary>
        <div>
          <h1>Welcome to My App</h1>
          {/* Your app components */}
        </div>
      </ErrorBoundary>
    </DebugConsoleProvider>
  );
};

export default App;

Example 2: Custom Fallback UI

import React from 'react';
import { ErrorBoundary } from 'rocket-devtool';

const App = () => {
  return (
    <ErrorBoundary
      fallback={({ error, resetErrorBoundary }) => (
        <div>
          <h1>Oops! Something went wrong.</h1>
          <p>{error.message}</p>
          <button onClick={resetErrorBoundary}>Retry</button>
        </div>
      )}
    >
      <div>
        <h1>Welcome to My App</h1>
        {/* Your app components */}
      </div>
    </ErrorBoundary>
  );
};

export default App;

A Tool Crafted by an Alien (@amalxprasad), Designed for Humans. 🛸👽
Enjoy debugging and error handling with ease! 🚀