🛡️ React Error Reporting

A React component that listens to custom events and displays detailed Axios error stack information in a beautiful UI.

Features

• 📦 Displays Axios/fetch error stack
• 🧠 Smart "Copy All" functionality
• 🌍 i18n-ready with translateKeys override
• 🎨 Pluggable empty UI state
• 🧰 Works with any EventTarget (custom, DOM, window)

Installation

npm install react-error-reporting

Basic Usage

Import the component and use it:

import { ReactErrorReporting } from "react-error-reporting";

<ReactErrorReporting
  eventKey="REQ_ERR"
  eventTarget={EVENT_TARGET}
/>

Dispatch the event from your Axios interceptor:

axios.interceptors.response.use(
  res => res,
  err => {
    const errorEvent = new CustomEvent("REQ_ERR", { detail: err });
    EVENT_TARGET.dispatchEvent(errorEvent);
    return Promise.reject(err);
  }
); 

Props

| Props | Type | Required | Description | | ------------- |-------------| :------: | ---------- | | eventKey | string | ✅ | The event name to listen for | | eventTarget | EventTarget | ✅ | The source to attach the listener to | | translateKeys | object | ❌ | Override labels for copy, expand, etc. (see below) | | emptyComponent | React.ReactNode | ❌ | Custom component to render when there's no error | | onCopy | () => void | ❌ | Callback triggered when "Copy All" is clicked |

i18n Translation Keys

You can customize labels like this:

<ReactErrorReporting
  eventKey="REQ_ERR"
  eventTarget={window}
  translateKeys={{
    copyAll: "Copy",
    requestDetails: "Error Info",
    collapse: "Hide",
    expand: "Show"
  }}
/>

License MIT © Abdullah Khan

Author Built by Abdullah Khan — PRs & contributions welcome!