cf-react-error-reporter

🛡️ A React library that detects runtime errors and automatically creates issues on platforms like GitHub. It also sends alerts via Discord, groups similar errors, and more.

🚀 Installation

npm install cf-react-error-reporter

📦 Key Features

Error capture using ErrorBoundary
Global error capture (window.onerror, onunhandledrejection)
Smart grouping using fingerprint/hash
Automatic reporting as GitHub issues
Automatic fallback to backend if frontend fails
Local storage of pending errors with retry logic
Optional Discord notifications
Manual hook useErrorReporter() and reportTestError() function

🔧 Basic Setup

import {
  ErrorBoundary,
  configureReporter,
  enableGlobalCapture,
} from "cf-react-error-reporter";

configureReporter({
  provider: "github",
  user: "mi-usuario",
  repo: "mi-repo",
  apiKey: import.meta.env.VITE_GITHUB_TOKEN,
  discordWebhook: import.meta.env.VITE_DISCORD_WEBHOOK, // optional
  onlyInProduction: true,
  mode: "auto", // 'frontend' | 'backend' | 'auto'
});

enableGlobalCapture(); // Enable global error capturing

In your render:

<ErrorBoundary fallback={<div>Something went wrong</div>}>
  <App />
</ErrorBoundary>

🧠 Manual Usage with `useErrorReporter()`

const { reportError } = useErrorReporter();
reportError(new Error("Something went wrong"), "Optional description");

To test connectivity:

reportTestError();

⚙️ Configuration Options

Option	Type	Description
`provider`	`'github' \| 'gitlab' \| 'trello' \| 'jira'`	Integration method
`user`	`string`	GitHub user or organization
`repo`	`string`	Repository to create issues in
`apiKey`	`string`	GitHub Personal Access Token
`backendUrl`	`string`	Optional backend URL (for CORS or security)
`mode`	`'frontend' \| 'backend' \| 'auto'`	Submission mode
`discordWebhook`	`string`	Discord webhook for alerts
`onlyInProduction`	`boolean`	Only report if `NODE_ENV === 'production'`

🔧 Compatibility

The following table show the compatibility with de mode option with the diferents providers

Provider	Frontend	Backend
Github	✅	✅
Gitlab	✅	✅
Trello	✅	✅
Jira	❌	✅

🖥️ Optional Backend (Node.js)

Jira has stricter CORS policies, so using the mode front option will result in a CORS error. We can work around this by using the backendUrl option as a fallback. In case of an error with the front option, it will then attempt to use the back option, as long as it has the corresponding property defined.

import express from "express";
import fetch from "node-fetch";
import bodyParser from "body-parser";
import dotenv from "dotenv";
dotenv.config();

const app = express();
app.use(bodyParser.json());

app.post("/report-error", async (req, res) => {
  const { title, body } = req.body;

  const response = await fetch(
    `https://${process.env.JIRA_DOMAIN}/rest/api/3/issue`,
    {
      method: "POST",
      headers: {
        Authorization: `Basic ${Buffer.from(
          `${process.env.JIRA_USER}:${process.env.JIRA_TOKEN}`
        ).toString("base64")}`,
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        fields: {
          project: { key: process.env.JIRA_PROJECT },
          summary: title,
          description: body,
          issuetype: { name: "Bug" },
        },
      }),
    }
  );

  const data = await response.json();
  res.status(response.status).json(data);
});

app.listen(3001, () =>
  console.log("Jira error reporter backend running on port 3001")
);

📄 Documentation

For more information on how to configure or obtain the necessary values to set up the report, please refer to the provider's documentation.

Provider	Documentation
Gitlab	DOCS
Trello	DOCS
Jira	DOCS