https://github.com/telexintegrations/reactjs-apm
🚀 Lightweight APM for React – Capture errors, logs, and performance metrics seamlessly
https://github.com/telexintegrations/reactjs-apm
error-reporting logging reactjs
Last synced: 4 months ago
JSON representation
🚀 Lightweight APM for React – Capture errors, logs, and performance metrics seamlessly
- Host: GitHub
- URL: https://github.com/telexintegrations/reactjs-apm
- Owner: telexintegrations
- Created: 2025-02-17T17:31:58.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-20T08:24:52.000Z (over 1 year ago)
- Last Synced: 2025-09-28T23:16:29.899Z (9 months ago)
- Topics: error-reporting, logging, reactjs
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/telex-reactjs-apm
- Size: 65.4 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Telex ReactJs APM 📊
[](https://www.npmjs.com/package/telex-reactjs-apm)
A lightweight **Application Performance Monitoring (APM) tool** for React apps. It captures errors, logs important events, and sends them to a remote server without blocking the main thread.
## 🚀 Features
- Captures **Uncaught exceptions and unhandled promise rejections** globally.
- Logs **custom events** like user actions.
- **Non-blocking architecture** using async tasks.
- Simple **React Provider API** for easy integration.
---
## 📦 Installation
Install the package using **npm** or **yarn**:
```sh
npm install telex-reactjs-apm
# or
yarn add telex-reactjs-apm
```
## 🛠️ Setup
Wrap your application with the APMProvider in index.(jsx|tsx) or App.(jsx|tsx).
```jsx
import React from "react";
import ReactDOM from "react-dom";
import { APMProvider } from "telex-reactjs-apm";
import App from "./App";
ReactDOM.createRoot(document.getElementById("root")!).render(
);
```
## 📝 Logging Custom Events
Use useAPM() inside any component to log custom events.
```jsx
import { useAPM } from 'telex-reactjs-apm';
const MyComponent = () => {
const { log } = useAPM();
const handleClick = () => {
log({
endpoint: 'webhook to optionally send to a different channel',
eventName: 'button_click',
message: 'User clicked the button',
status: 'error' | 'success',
});
};
return Log Event;
};
export default MyComponent;
```
## Demo
## Testing
- Clone the repository
```bash
git clone https://github.com/telexintegrations/reactjs-apm.git
```
- Run yarn install
```bash
yarn install
```
- Run tests locally
```bash
yarn test
```
## Contributing
Pull requests are welcome. For major changes, please open an issue first
to discuss what you would like to change.
Please make sure to update tests as appropriate.