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.
- 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.
Install the package using npm or yarn:
npm install telex-reactjs-apm
# or
yarn add telex-reactjs-apm
Wrap your application with the APMProvider in index.(jsx|tsx) or App.(jsx|tsx).
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(
<APMProvider
config={{
endpoint: "https://yourtelexchannelwebhook.com";
projectName: "Channel chat sender name"
}}
>
<App />
</APMProvider>
);
Use useAPM() inside any component to log custom events.
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 <button onClick={handleClick}>Log Event</button>;
};
export default MyComponent;
demo.mp4
- Clone the repository
git clone https://github.com/telexintegrations/reactjs-apm.git
- Run yarn install
yarn install
- Run tests locally
yarn test
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.