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:

``

bash

npm install rocket-devtool

or

bash

yarn add rocket-devtool





---



Usage



$3



Wrap your application with the

DebugConsoleProvider

 to enable the debug console.

tsx

import React from 'react';

import { DebugConsoleProvider } from 'rocket-devtool';



const App = () => {

  return (

    

      

        Welcome to My App

        {/ Your app components /}

      

    

  );

};



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:

tsx

  buttonSettings={{

    position: 'bottomRight', // Options: 'topLeft', 'topRight', 'leftCenter', 'rightCenter', 'bottomLeft', 'bottomRight'

    size: 50, // Button size in pixels

  }}

>

  {/ Your app components /}





---



$3



Wrap your components with the

ErrorBoundary

 to catch and handle errors.

tsx

import React from 'react';

import { ErrorBoundary } from 'rocket-devtool';



const App = () => {

  return (

    

      

        Welcome to My App

        {/ Your app components /}

      

    

  );

};



export default App;





#### Custom Fallback UI

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

tsx

  fallback={({ error, resetErrorBoundary }) => (

    

      Something went wrong

      {error.message}

      

    

  )}

>

  {/ Your app components /}





---



API Reference



$3



| Prop             | Type                          | Default       | Description                                                                 |

|------------------|-------------------------------|---------------|-----------------------------------------------------------------------------|

|

buttonSettings | { position: string; size: number } | { position: 'bottomLeft', size: 40 }

 | Customize the position and size of the debug console button. |



$3



| Prop       | Type                          | Default       | Description                                                                 |

|------------|-------------------------------|---------------|-----------------------------------------------------------------------------|

|

fallback | (props: FallbackProps) => ReactNode

 | Default fallback UI | Custom fallback UI to display when an error occurs.                       |



---



Examples



$3

tsx

import React from 'react';

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



const App = () => {

  return (

    

      

        

          Welcome to My App

          {/ Your app components /}

        

      

    

  );

};



export default App;

$3

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

const App = () => {
return (
fallback={({ error, resetErrorBoundary }) => (

Oops! Something went wrong.

{error.message}

)}
>

Welcome to My App

{/ Your app components /}

);
};

export default App;

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