BugTrack React package

Report React exceptions to BugTrack (AppRadar) — same ingest model as the Node (@ciplnew/bugtracking) and Laravel packages.

Dashboard: https://appradar.colanapps.in/login

Install

npm install @ciplnew/bugtracking-react

Setup

1. Log in at https://appradar.colanapps.in/login
2. Create a project — copy the project token
3. Add env vars in your React app:

Vite (.env):

VITE_BUGTRACK_ENABLED=true
VITE_BUGTRACK_URL=https://appradar.colanapps.in/api/v1/ingest
VITE_BUGTRACK_KEY=your-project-token
VITE_BUGTRACK_ENVIRONMENT=production

Create React App:

REACT_APP_BUGTRACK_ENABLED=true
REACT_APP_BUGTRACK_URL=https://appradar.colanapps.in/api/v1/ingest
REACT_APP_BUGTRACK_KEY=your-project-token
REACT_APP_BUGTRACK_ENVIRONMENT=production

4. Wire in main.jsx / index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import {
  init,
  captureWindowErrors,
  BugTrackErrorBoundary,
} from '@ciplnew/bugtracking-react';
import App from './App';

init({
  enabled: true,
  url: import.meta.env.VITE_BUGTRACK_URL,
  key: import.meta.env.VITE_BUGTRACK_KEY,
  environment: import.meta.env.VITE_BUGTRACK_ENVIRONMENT || 'production',
});

captureWindowErrors();

ReactDOM.createRoot(document.getElementById('root')).render(
  <BugTrackErrorBoundary fallback={<p>Something went wrong.</p>}>
    <App />
  </BugTrackErrorBoundary>
);

Manual report

import { report } from '@ciplnew/bugtracking-react';

try {
  // ...
} catch (err) {
  await report(err, { user: { id: user.id, email: user.email } });
  throw err;
}

Test

Error Boundaries catch render errors (not click-handler throws). Temporary test component:

function Boom() {
  throw new Error('My first BugTrack React error');
}

// render <Boom /> once inside App to trigger the boundary

Or report from a click handler manually:

import { report } from '@ciplnew/bugtracking-react';

<button
  type="button"
  onClick={() => report(new Error('My first BugTrack React error'))}
>
  Report test error
</button>

Then check the project in AppRadar.

What is reported

| Event | Reported? | |-------|-----------| | React render crash (Error Boundary) | Yes | | window.onerror / unhandled promise | Yes (if captureWindowErrors()) | | Manual report(err) | Yes | | Client HTTP status below 500 on Error | No (same as Node/Laravel) |

Options

| Option | Vite env | CRA env | Default | |--------|----------|---------|---------| | enabled | VITE_BUGTRACK_ENABLED | REACT_APP_BUGTRACK_ENABLED | false | | url | VITE_BUGTRACK_URL | REACT_APP_BUGTRACK_URL | — | | key | VITE_BUGTRACK_KEY | REACT_APP_BUGTRACK_KEY | — | | environment | VITE_BUGTRACK_ENVIRONMENT | REACT_APP_BUGTRACK_ENVIRONMENT | production | | timeoutMs | VITE_BUGTRACK_TIMEOUT_MS | REACT_APP_BUGTRACK_TIMEOUT_MS | 3000 |