@ashokreddydev/react-performance-monitor 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/README.md +86 -47
  3. package/dist/{PerformancePanel-L3YUAEYG.cjs → PerformancePanel-7AYCIEG6.cjs} +7 -7
  4. package/dist/{PerformancePanel-F4AYMOBE.js → PerformancePanel-TNVY6W3W.js} +4 -4
  5. package/dist/{chunk-LBKL3OKH.cjs → chunk-5AT7Z32E.cjs} +6 -6
  6. package/dist/{chunk-4V2B5GPN.js → chunk-B5MOQKKB.js} +3 -3
  7. package/dist/{chunk-Q33ZJQZ2.js → chunk-EMWBXP4Q.js} +3 -3
  8. package/dist/{chunk-K3GFTMEC.cjs → chunk-MQZLO62L.cjs} +3 -3
  9. package/dist/index.cjs +31 -31
  10. package/dist/index.js +4 -4
  11. package/dist/redux.cjs +2 -2
  12. package/dist/redux.js +1 -1
  13. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @ashokreddydev/react-performance-monitor
2
2
 
3
+ ## 0.1.2
4
+
5
+ ### Patch Changes
6
+
7
+ - Clearer README: a numbered quick start (install, get your keys, set up, check it works), a step-by-step guide to
8
+ creating the app and ingestion keys in the Trackora dashboard, and tidier option tables. Type comments use neutral
9
+ examples.
10
+
3
11
  ## 0.1.1
4
12
 
5
13
  ### Patch Changes
package/README.md CHANGED
@@ -1,71 +1,66 @@
1
- # react-performance-monitor
1
+ # @ashokreddydev/react-performance-monitor
2
2
 
3
- **Website & docs:** [www.trackora.testforge.co.in/docs](https://www.trackora.testforge.co.in/docs#react-performance-monitor) · [All three Trackora SDKs](https://www.trackora.testforge.co.in/docs)
3
+ > See what makes a React app slow — component render times, API latency and Core Web Vitals from real sessions, with
4
+ > a floating developer panel.
4
5
 
5
- Performance monitoring for React apps. It measures:
6
+ [![npm version](https://img.shields.io/npm/v/@ashokreddydev/react-performance-monitor?color=0F766E&label=npm)](https://www.npmjs.com/package/@ashokreddydev/react-performance-monitor)
7
+ [![license: MIT](https://img.shields.io/npm/l/@ashokreddydev/react-performance-monitor?color=0F766E)](https://www.npmjs.com/package/@ashokreddydev/react-performance-monitor)
8
+ ![TypeScript types included](https://img.shields.io/badge/types-included-0F766E)
9
+ ![React 18+](https://img.shields.io/badge/react-18%2B-0F766E)
6
10
 
7
- - **component render times**, with React's Profiler
8
- - **API latency**: fetch, XHR and Axios, with p50/p95/p99
9
- - **Core Web Vitals**: LCP, INP, CLS, FCP and TTFB
10
- - **Redux action timing**
11
- - **long tasks, navigation and resource timing**, plus memory where the browser supports it
12
- - **uncaught errors**
11
+ **[Website & docs](https://www.trackora.testforge.co.in/docs#react-performance-monitor)** ·
12
+ [All three Trackora SDKs](https://www.trackora.testforge.co.in/docs) ·
13
+ [Changelog](./CHANGELOG.md)
13
14
 
14
- It also includes a floating developer panel with charts. It sends data to **any backend**: you give it an HTTP
15
- endpoint or your own transport.
15
+ - ⚛️ **Components** — Render times from React's Profiler, per boundary you choose
16
+ - 🌐 **API latency** — `fetch`, XHR and Axios — p50 / p95 / p99 per endpoint template
17
+ - 📊 **Web Vitals** — LCP, INP, CLS, FCP and TTFB
18
+ - 🧩 **More** — Redux action timing, long tasks, navigation and resource timing, memory (where supported), uncaught errors
19
+ - 🛟 **Safe** — Never throws into your app; bounded memory and retries; unsampled sessions do no work
20
+ - 🔒 **Private** — Never reads headers, cookies, bodies or Redux state; URLs become templates (`/users/:id`)
21
+ - 🎯 **No extra re-renders** — The provider's context never changes; live metrics update at most twice a second
16
22
 
17
- - **Safe by default.** It never throws into your app, and memory and retries are bounded. A session that is not
18
- sampled does no work at all, and production sends no per-render events unless you turn them on.
19
- - **Private by default.** It never reads headers, cookies, request or response bodies, Redux state or action payloads.
20
- URLs become templates (`/users/:id`). Query values are removed unless you allow them, and free text is masked.
21
- - **No re-renders caused by the SDK.** The provider's context never changes. Only components that read live
22
- metrics update, at most twice a second.
23
+ Sends to **Trackora** with `trackoraTransport()`, or to **any backend** — give it an HTTP endpoint or your own
24
+ transport.
23
25
 
24
26
  > Status: 0.x — the API may still change in minor versions.
25
27
 
26
- ## Contents
28
+ ---
27
29
 
28
- [Install](#install) · [Quick start](#quick-start) · [Configuration](#configuration) · [Collectors](#collectors) ·
29
- [Developer panel](#developer-panel) · [Redux](#redux) · [Axios](#axios) · [Hooks](#hooks) · [Delivery](#delivery) ·
30
- [Privacy](#privacy) · [Performance overhead](#performance-overhead) · [Production checklist](#production-checklist) ·
31
- [Troubleshooting](#troubleshooting) · [Custom collectors](#custom-collectors)
30
+ ## Quick start
32
31
 
33
- ## Install
32
+ **1. Install** — needs React 18 or newer (`web-vitals` comes with it):
34
33
 
35
34
  ```bash
36
35
  npm install @ashokreddydev/react-performance-monitor
37
- # optional, only for the charts in the developer panel:
38
- npm install echarts
36
+ npm install echarts # optional: charts in the developer panel
39
37
  ```
40
38
 
41
- You need React 18 or newer. `web-vitals` is installed with the package. Redux Toolkit, Axios, ECharts and
42
- React Scan are optional. Only their own entry points use them.
43
-
44
- | Import | What it adds |
45
- |---|---|
46
- | `@ashokreddydev/react-performance-monitor` | provider, monitor, built-in collectors, `<ProfiledBoundary>`, hooks, `<PerformanceButton>` |
47
- | `…/redux` | `createPerformanceMiddleware()` |
48
- | `…/axios` | `instrumentAxios(instance, monitor)` |
49
- | `…/charts` | ECharts charts for the panel (needs `echarts`) |
50
- | `…/trackora` | `trackoraTransport()` for a Trackora server |
39
+ **2. Get your key** — the same ingestion key as the Analytics SDK
40
+ ([Get your keys](#get-your-keys-in-the-trackora-dashboard) below), in one `.env` file per environment:
51
41
 
52
- ESM and CommonJS builds ship with TypeScript declarations. The package works in JavaScript and TypeScript apps and
53
- is tree-shakeable (`sideEffects: false`).
42
+ ```ini
43
+ VITE_TRACKORA_ENDPOINT=https://trackora.example.com
44
+ VITE_TRACKORA_KEY=trk_dev_… # trk_live_… in production
45
+ ```
54
46
 
55
- ## Quick start
47
+ **3. Wrap your app:**
56
48
 
57
49
  ```tsx
58
50
  import { PerformanceButton, PerformanceProvider, ProfiledBoundary } from '@ashokreddydev/react-performance-monitor';
51
+ import { trackoraTransport } from '@ashokreddydev/react-performance-monitor/trackora';
59
52
 
60
53
  export function Root() {
61
54
  return (
62
55
  <PerformanceProvider
63
56
  config={{
64
57
  applicationId: 'my-app',
65
- environment: import.meta.env.MODE,
66
- sampleRate: 0.2, // 20 % of sessions send telemetry
67
- collectors: { components: true, api: true, webVitals: true, browser: true, errors: true },
68
- transport: { endpoint: '/api/performance/batch', batchSize: 20, flushInterval: 10_000 },
58
+ environment: import.meta.env.MODE, // 'production' turns off the dev-only features
59
+ sampleRate: 0.2, // 20 % of sessions send telemetry (use 1 while testing)
60
+ transport: trackoraTransport({
61
+ apiUrl: import.meta.env.VITE_TRACKORA_ENDPOINT,
62
+ apiKey: import.meta.env.VITE_TRACKORA_KEY,
63
+ }),
69
64
  }}
70
65
  >
71
66
  <ProfiledBoundary id="App">
@@ -77,8 +72,40 @@ export function Root() {
77
72
  }
78
73
  ```
79
74
 
80
- The provider reads `config` once, on the first render. To change it, remount the provider (for example with a new
81
- `key`). The API, Web Vitals, browser and error collectors start automatically, and each one can be switched off.
75
+ The provider reads `config` once, on the first render (remount it with a new `key` to change it). The API, Web
76
+ Vitals, browser and error collectors start automatically, and each one can be switched off.
77
+
78
+ **4. Check it works** — in development, click the floating performance button in your app to see live numbers. In
79
+ the Trackora dashboard, open **React performance**: sampled sessions appear within a minute.
80
+
81
+ **Not using Trackora?** Use `transport: { endpoint: '/api/performance/batch' }` with your own backend — see
82
+ [Delivery](#delivery) for the request format.
83
+
84
+ ### Get your keys in the Trackora dashboard
85
+
86
+ 1. **Sign in** to the Trackora dashboard as an admin. Each environment (dev, QA, production) has its own dashboard
87
+ and keys.
88
+ 2. Open **Administration › Manage applications**.
89
+ 3. Click **Register application** and fill in:
90
+ - **Name** — what people see, e.g. `My App`
91
+ - **App key** — lowercase letters, digits and dashes, e.g. `my-app`
92
+ - **Allowed origins** — the web addresses your app runs on, e.g. `https://app.example.com` (empty = any)
93
+ 4. Click **Register**. The **New ingestion key** window shows your **key** (`trk_dev_…` in dev, `trk_live_…` in
94
+ production) and **appId** (`app_…`). **The key is shown only once** — copy both, then click **I have saved it**.
95
+ 5. Repeat in each environment's dashboard; each gives its own appId and key.
96
+
97
+ Later, on the app's row: **New key** adds a key, **Rotate** replaces it (the old one keeps working for 7 days),
98
+ **Revoke** turns it off at once. After signing in, **Developers › Integration guide** shows the snippets with your
99
+ appId filled in.
100
+
101
+ ---
102
+
103
+ ## Contents
104
+
105
+ [Configuration](#configuration) · [Entry points](#entry-points) · [Collectors](#collectors) ·
106
+ [Developer panel](#developer-panel) · [Redux](#redux) · [Axios](#axios) · [Hooks](#hooks) · [Delivery](#delivery) ·
107
+ [Privacy](#privacy) · [Performance overhead](#performance-overhead) · [Production checklist](#production-checklist) ·
108
+ [Troubleshooting](#troubleshooting) · [Custom collectors](#custom-collectors)
82
109
 
83
110
  ## Configuration
84
111
 
@@ -104,6 +131,20 @@ The provider reads `config` once, on the first render. To change it, remount the
104
131
 
105
132
  An invalid config never throws. The monitor disables itself and warns once.
106
133
 
134
+ ## Entry points
135
+
136
+ | Import | What it adds |
137
+ |---|---|
138
+ | `@ashokreddydev/react-performance-monitor` | provider, monitor, built-in collectors, `<ProfiledBoundary>`, hooks, `<PerformanceButton>` |
139
+ | `…/redux` | `createPerformanceMiddleware()` |
140
+ | `…/axios` | `instrumentAxios(instance, monitor)` |
141
+ | `…/charts` | ECharts charts for the panel (needs `echarts`) |
142
+ | `…/trackora` | `trackoraTransport()` for a Trackora server |
143
+
144
+ ESM and CommonJS builds ship with TypeScript declarations. The package works in JavaScript and TypeScript apps and
145
+ is tree-shakeable (`sideEffects: false`). Redux Toolkit, Axios, ECharts and React Scan are optional — only their own
146
+ entry points use them.
147
+
107
148
  ## Collectors
108
149
 
109
150
  Each collector is independent and has its own switch in `collectors`.
@@ -307,6 +348,4 @@ export const longTasks: Collector = {
307
348
  Pass collectors with `<PerformanceProvider collectors={[longTasks]} builtInCollectors={false} />`. A collector that
308
349
  throws is contained, and reported when `debug` is on. It never stops the other collectors or your app.
309
350
 
310
- ## License
311
-
312
- MIT
351
+ **License:** MIT · **Changes:** [CHANGELOG.md](./CHANGELOG.md)
package/dist/{PerformancePanel-L3YUAEYG.cjs → PerformancePanel-7AYCIEG6.cjs} RENAMED
@@ -1,7 +1,7 @@
1
1
  'use strict';
2
2
 
3
- var chunkLBKL3OKH_cjs = require('./chunk-LBKL3OKH.cjs');
4
- var chunkK3GFTMEC_cjs = require('./chunk-K3GFTMEC.cjs');
3
+ var chunk5AT7Z32E_cjs = require('./chunk-5AT7Z32E.cjs');
4
+ var chunkMQZLO62L_cjs = require('./chunk-MQZLO62L.cjs');
5
5
  require('./chunk-MYCOS5WD.cjs');
6
6
  require('./chunk-QUF75EA3.cjs');
7
7
  require('./chunk-ZY43XLHK.cjs');
@@ -563,8 +563,8 @@ function PerformancePanel({
563
563
  initialTab = "overview"
564
564
  }) {
565
565
  var _a, _b, _c, _d, _e;
566
- const monitor = chunkLBKL3OKH_cjs.usePerformance();
567
- const snapshot = chunkLBKL3OKH_cjs.usePerformanceMetrics();
566
+ const monitor = chunk5AT7Z32E_cjs.usePerformance();
567
+ const snapshot = chunk5AT7Z32E_cjs.usePerformanceMetrics();
568
568
  const [tab, setTab] = react.useState(initialTab);
569
569
  const [charts, setCharts] = react.useState(null);
570
570
  const [chartsError, setChartsError] = react.useState(false);
@@ -587,7 +587,7 @@ function PerformancePanel({
587
587
  var _a2;
588
588
  (_a2 = dialogRef.current) == null ? void 0 : _a2.focus();
589
589
  }, []);
590
- const thresholds = (_b = (_a = monitor.config) == null ? void 0 : _a.thresholds) != null ? _b : chunkK3GFTMEC_cjs.DEFAULT_THRESHOLDS;
590
+ const thresholds = (_b = (_a = monitor.config) == null ? void 0 : _a.thresholds) != null ? _b : chunkMQZLO62L_cjs.DEFAULT_THRESHOLDS;
591
591
  const current = (_c = TABS.find((t) => t.id === tab)) != null ? _c : TABS[0];
592
592
  const onTabKey = (e, i) => {
593
593
  var _a2;
@@ -676,5 +676,5 @@ function PerformancePanel({
676
676
  }
677
677
 
678
678
  module.exports = PerformancePanel;
679
- //# sourceMappingURL=PerformancePanel-L3YUAEYG.cjs.map
680
- //# sourceMappingURL=PerformancePanel-L3YUAEYG.cjs.map
679
+ //# sourceMappingURL=PerformancePanel-7AYCIEG6.cjs.map
680
+ //# sourceMappingURL=PerformancePanel-7AYCIEG6.cjs.map
package/dist/{PerformancePanel-F4AYMOBE.js → PerformancePanel-TNVY6W3W.js} RENAMED
@@ -1,5 +1,5 @@
1
- import { usePerformance, usePerformanceMetrics } from './chunk-Q33ZJQZ2.js';
2
- import { DEFAULT_THRESHOLDS } from './chunk-4V2B5GPN.js';
1
+ import { usePerformance, usePerformanceMetrics } from './chunk-EMWBXP4Q.js';
2
+ import { DEFAULT_THRESHOLDS } from './chunk-B5MOQKKB.js';
3
3
  import './chunk-ICEGTP6M.js';
4
4
  import './chunk-UGDPZ343.js';
5
5
  import './chunk-XKYIKK6C.js';
@@ -674,5 +674,5 @@ function PerformancePanel({
674
674
  }
675
675
 
676
676
  export { PerformancePanel as default };
677
- //# sourceMappingURL=PerformancePanel-F4AYMOBE.js.map
678
- //# sourceMappingURL=PerformancePanel-F4AYMOBE.js.map
677
+ //# sourceMappingURL=PerformancePanel-TNVY6W3W.js.map
678
+ //# sourceMappingURL=PerformancePanel-TNVY6W3W.js.map
package/dist/{chunk-LBKL3OKH.cjs → chunk-5AT7Z32E.cjs} RENAMED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var chunkK3GFTMEC_cjs = require('./chunk-K3GFTMEC.cjs');
3
+ var chunkMQZLO62L_cjs = require('./chunk-MQZLO62L.cjs');
4
4
  var chunkMYCOS5WD_cjs = require('./chunk-MYCOS5WD.cjs');
5
5
  var chunkQUF75EA3_cjs = require('./chunk-QUF75EA3.cjs');
6
6
  var webVitals = require('web-vitals');
@@ -271,7 +271,7 @@ function webVitalsCollector() {
271
271
  ctx.record({
272
272
  eventType: "web_vital",
273
273
  ...name === "CLS" ? {} : { duration: value },
274
- data: { name, value, rating: chunkK3GFTMEC_cjs.rateVital(name, value, ctx.config.thresholds), id: m.id }
274
+ data: { name, value, rating: chunkMQZLO62L_cjs.rateVital(name, value, ctx.config.thresholds), id: m.id }
275
275
  });
276
276
  };
277
277
  sink = mine;
@@ -310,7 +310,7 @@ function PerformanceProvider({
310
310
  children
311
311
  }) {
312
312
  const [state] = react.useState(() => {
313
- const monitor = external != null ? external : config ? new chunkK3GFTMEC_cjs.PerformanceMonitor(config) : chunkK3GFTMEC_cjs.PerformanceMonitor.disabled();
313
+ const monitor = external != null ? external : config ? new chunkMQZLO62L_cjs.PerformanceMonitor(config) : chunkMQZLO62L_cjs.PerformanceMonitor.disabled();
314
314
  for (const c of collectors != null ? collectors : []) monitor.use(c);
315
315
  if (builtInCollectors) for (const c of defaultCollectors()) monitor.use(c);
316
316
  return { monitor, owned: !external };
@@ -327,7 +327,7 @@ var fallback = null;
327
327
  function usePerformance() {
328
328
  const monitor = react.useContext(PerformanceContext);
329
329
  if (monitor) return monitor;
330
- fallback != null ? fallback : fallback = chunkK3GFTMEC_cjs.PerformanceMonitor.disabled();
330
+ fallback != null ? fallback : fallback = chunkMQZLO62L_cjs.PerformanceMonitor.disabled();
331
331
  return fallback;
332
332
  }
333
333
  function usePerformanceMetrics() {
@@ -343,5 +343,5 @@ exports.errorCollector = errorCollector;
343
343
  exports.usePerformance = usePerformance;
344
344
  exports.usePerformanceMetrics = usePerformanceMetrics;
345
345
  exports.webVitalsCollector = webVitalsCollector;
346
- //# sourceMappingURL=chunk-LBKL3OKH.cjs.map
347
- //# sourceMappingURL=chunk-LBKL3OKH.cjs.map
346
+ //# sourceMappingURL=chunk-5AT7Z32E.cjs.map
347
+ //# sourceMappingURL=chunk-5AT7Z32E.cjs.map
package/dist/{chunk-4V2B5GPN.js → chunk-B5MOQKKB.js} RENAMED
@@ -549,7 +549,7 @@ function uuidv4() {
549
549
 
550
550
  // src/core/PerformanceMonitor.ts
551
551
  var SDK_NAME = "react-performance-monitor";
552
- var SDK_VERSION = "0.1.1";
552
+ var SDK_VERSION = "0.1.2";
553
553
  var activeMonitor = null;
554
554
  function getActiveMonitor() {
555
555
  return activeMonitor;
@@ -989,5 +989,5 @@ var PerformanceMonitor = class _PerformanceMonitor {
989
989
  };
990
990
 
991
991
  export { COLLECTOR_NAMES, DEFAULT_THRESHOLDS, EventBuffer, EventCollector, OTHER, PerformanceConfigError, PerformanceMonitor, Reservoir, SDK_NAME, SDK_VERSION, getActiveMonitor, quantile, rateVital, resolveConfig, resolveThresholds, shouldSample };
992
- //# sourceMappingURL=chunk-4V2B5GPN.js.map
993
- //# sourceMappingURL=chunk-4V2B5GPN.js.map
992
+ //# sourceMappingURL=chunk-B5MOQKKB.js.map
993
+ //# sourceMappingURL=chunk-B5MOQKKB.js.map
package/dist/{chunk-Q33ZJQZ2.js → chunk-EMWBXP4Q.js} RENAMED
@@ -1,4 +1,4 @@
1
- import { PerformanceMonitor, rateVital } from './chunk-4V2B5GPN.js';
1
+ import { PerformanceMonitor, rateVital } from './chunk-B5MOQKKB.js';
2
2
  import { apiCollector } from './chunk-ICEGTP6M.js';
3
3
  import { sanitizeUrl, sanitizeText, sanitizeName } from './chunk-UGDPZ343.js';
4
4
  import { onLCP, onINP, onCLS, onFCP, onTTFB } from 'web-vitals';
@@ -334,5 +334,5 @@ function usePerformanceMetrics() {
334
334
  }
335
335
 
336
336
  export { PerformanceContext, PerformanceProvider, browserCollector, defaultCollectors, errorCollector, usePerformance, usePerformanceMetrics, webVitalsCollector };
337
- //# sourceMappingURL=chunk-Q33ZJQZ2.js.map
338
- //# sourceMappingURL=chunk-Q33ZJQZ2.js.map
337
+ //# sourceMappingURL=chunk-EMWBXP4Q.js.map
338
+ //# sourceMappingURL=chunk-EMWBXP4Q.js.map
package/dist/{chunk-K3GFTMEC.cjs → chunk-MQZLO62L.cjs} RENAMED
@@ -551,7 +551,7 @@ function uuidv4() {
551
551
 
552
552
  // src/core/PerformanceMonitor.ts
553
553
  var SDK_NAME = "react-performance-monitor";
554
- var SDK_VERSION = "0.1.1";
554
+ var SDK_VERSION = "0.1.2";
555
555
  var activeMonitor = null;
556
556
  function getActiveMonitor() {
557
557
  return activeMonitor;
@@ -1006,5 +1006,5 @@ exports.rateVital = rateVital;
1006
1006
  exports.resolveConfig = resolveConfig;
1007
1007
  exports.resolveThresholds = resolveThresholds;
1008
1008
  exports.shouldSample = shouldSample;
1009
- //# sourceMappingURL=chunk-K3GFTMEC.cjs.map
1010
- //# sourceMappingURL=chunk-K3GFTMEC.cjs.map
1009
+ //# sourceMappingURL=chunk-MQZLO62L.cjs.map
1010
+ //# sourceMappingURL=chunk-MQZLO62L.cjs.map
package/dist/index.cjs CHANGED
@@ -1,7 +1,7 @@
1
1
  'use strict';
2
2
 
3
- var chunkLBKL3OKH_cjs = require('./chunk-LBKL3OKH.cjs');
4
- var chunkK3GFTMEC_cjs = require('./chunk-K3GFTMEC.cjs');
3
+ var chunk5AT7Z32E_cjs = require('./chunk-5AT7Z32E.cjs');
4
+ var chunkMQZLO62L_cjs = require('./chunk-MQZLO62L.cjs');
5
5
  var chunkMYCOS5WD_cjs = require('./chunk-MYCOS5WD.cjs');
6
6
  var chunkQUF75EA3_cjs = require('./chunk-QUF75EA3.cjs');
7
7
  var chunkZY43XLHK_cjs = require('./chunk-ZY43XLHK.cjs');
@@ -9,7 +9,7 @@ var react = require('react');
9
9
  var jsxRuntime = require('react/jsx-runtime');
10
10
 
11
11
  function ProfiledBoundary({ id, children }) {
12
- const monitor = chunkLBKL3OKH_cjs.usePerformance();
12
+ const monitor = chunk5AT7Z32E_cjs.usePerformance();
13
13
  const onRender = react.useCallback(
14
14
  (_id, phase, actualDuration, baseDuration) => {
15
15
  var _a, _b;
@@ -170,10 +170,10 @@ function themeVars(t) {
170
170
  "--rpm-font": t.fontFamily
171
171
  };
172
172
  }
173
- var PerformancePanel = react.lazy(() => import('./PerformancePanel-L3YUAEYG.cjs'));
173
+ var PerformancePanel = react.lazy(() => import('./PerformancePanel-7AYCIEG6.cjs'));
174
174
  function PerformanceButton(props) {
175
175
  var _a;
176
- const monitor = chunkLBKL3OKH_cjs.usePerformance();
176
+ const monitor = chunk5AT7Z32E_cjs.usePerformance();
177
177
  if (!props.force && !((_a = monitor.config) == null ? void 0 : _a.devtools)) return null;
178
178
  if (!monitor.config) return null;
179
179
  return /* @__PURE__ */ jsxRuntime.jsx(ButtonInner, { ...props });
@@ -189,7 +189,7 @@ function ButtonInner({
189
189
  }) {
190
190
  injectStyles();
191
191
  const [open, setOpen] = react.useState(defaultOpen);
192
- const { errors } = chunkLBKL3OKH_cjs.usePerformanceMetrics().totals;
192
+ const { errors } = chunk5AT7Z32E_cjs.usePerformanceMetrics().totals;
193
193
  const { theme, dark } = useResolvedTheme(mode, themeOverrides);
194
194
  const buttonRef = react.useRef(null);
195
195
  const id = react.useId();
@@ -252,7 +252,7 @@ function ButtonInner({
252
252
  );
253
253
  }
254
254
  function useApiPerformance(match) {
255
- const { apis } = chunkLBKL3OKH_cjs.usePerformanceMetrics();
255
+ const { apis } = chunk5AT7Z32E_cjs.usePerformanceMetrics();
256
256
  const key = match instanceof RegExp ? match.source + match.flags : match;
257
257
  return react.useMemo(() => {
258
258
  if (!match) return apis;
@@ -264,99 +264,99 @@ function useApiPerformance(match) {
264
264
 
265
265
  Object.defineProperty(exports, "PerformanceContext", {
266
266
  enumerable: true,
267
- get: function () { return chunkLBKL3OKH_cjs.PerformanceContext; }
267
+ get: function () { return chunk5AT7Z32E_cjs.PerformanceContext; }
268
268
  });
269
269
  Object.defineProperty(exports, "PerformanceProvider", {
270
270
  enumerable: true,
271
- get: function () { return chunkLBKL3OKH_cjs.PerformanceProvider; }
271
+ get: function () { return chunk5AT7Z32E_cjs.PerformanceProvider; }
272
272
  });
273
273
  Object.defineProperty(exports, "browserCollector", {
274
274
  enumerable: true,
275
- get: function () { return chunkLBKL3OKH_cjs.browserCollector; }
275
+ get: function () { return chunk5AT7Z32E_cjs.browserCollector; }
276
276
  });
277
277
  Object.defineProperty(exports, "defaultCollectors", {
278
278
  enumerable: true,
279
- get: function () { return chunkLBKL3OKH_cjs.defaultCollectors; }
279
+ get: function () { return chunk5AT7Z32E_cjs.defaultCollectors; }
280
280
  });
281
281
  Object.defineProperty(exports, "errorCollector", {
282
282
  enumerable: true,
283
- get: function () { return chunkLBKL3OKH_cjs.errorCollector; }
283
+ get: function () { return chunk5AT7Z32E_cjs.errorCollector; }
284
284
  });
285
285
  Object.defineProperty(exports, "usePerformance", {
286
286
  enumerable: true,
287
- get: function () { return chunkLBKL3OKH_cjs.usePerformance; }
287
+ get: function () { return chunk5AT7Z32E_cjs.usePerformance; }
288
288
  });
289
289
  Object.defineProperty(exports, "usePerformanceMetrics", {
290
290
  enumerable: true,
291
- get: function () { return chunkLBKL3OKH_cjs.usePerformanceMetrics; }
291
+ get: function () { return chunk5AT7Z32E_cjs.usePerformanceMetrics; }
292
292
  });
293
293
  Object.defineProperty(exports, "webVitalsCollector", {
294
294
  enumerable: true,
295
- get: function () { return chunkLBKL3OKH_cjs.webVitalsCollector; }
295
+ get: function () { return chunk5AT7Z32E_cjs.webVitalsCollector; }
296
296
  });
297
297
  Object.defineProperty(exports, "COLLECTOR_NAMES", {
298
298
  enumerable: true,
299
- get: function () { return chunkK3GFTMEC_cjs.COLLECTOR_NAMES; }
299
+ get: function () { return chunkMQZLO62L_cjs.COLLECTOR_NAMES; }
300
300
  });
301
301
  Object.defineProperty(exports, "DEFAULT_THRESHOLDS", {
302
302
  enumerable: true,
303
- get: function () { return chunkK3GFTMEC_cjs.DEFAULT_THRESHOLDS; }
303
+ get: function () { return chunkMQZLO62L_cjs.DEFAULT_THRESHOLDS; }
304
304
  });
305
305
  Object.defineProperty(exports, "EventBuffer", {
306
306
  enumerable: true,
307
- get: function () { return chunkK3GFTMEC_cjs.EventBuffer; }
307
+ get: function () { return chunkMQZLO62L_cjs.EventBuffer; }
308
308
  });
309
309
  Object.defineProperty(exports, "EventCollector", {
310
310
  enumerable: true,
311
- get: function () { return chunkK3GFTMEC_cjs.EventCollector; }
311
+ get: function () { return chunkMQZLO62L_cjs.EventCollector; }
312
312
  });
313
313
  Object.defineProperty(exports, "OTHER", {
314
314
  enumerable: true,
315
- get: function () { return chunkK3GFTMEC_cjs.OTHER; }
315
+ get: function () { return chunkMQZLO62L_cjs.OTHER; }
316
316
  });
317
317
  Object.defineProperty(exports, "PerformanceConfigError", {
318
318
  enumerable: true,
319
- get: function () { return chunkK3GFTMEC_cjs.PerformanceConfigError; }
319
+ get: function () { return chunkMQZLO62L_cjs.PerformanceConfigError; }
320
320
  });
321
321
  Object.defineProperty(exports, "PerformanceMonitor", {
322
322
  enumerable: true,
323
- get: function () { return chunkK3GFTMEC_cjs.PerformanceMonitor; }
323
+ get: function () { return chunkMQZLO62L_cjs.PerformanceMonitor; }
324
324
  });
325
325
  Object.defineProperty(exports, "Reservoir", {
326
326
  enumerable: true,
327
- get: function () { return chunkK3GFTMEC_cjs.Reservoir; }
327
+ get: function () { return chunkMQZLO62L_cjs.Reservoir; }
328
328
  });
329
329
  Object.defineProperty(exports, "SDK_NAME", {
330
330
  enumerable: true,
331
- get: function () { return chunkK3GFTMEC_cjs.SDK_NAME; }
331
+ get: function () { return chunkMQZLO62L_cjs.SDK_NAME; }
332
332
  });
333
333
  Object.defineProperty(exports, "SDK_VERSION", {
334
334
  enumerable: true,
335
- get: function () { return chunkK3GFTMEC_cjs.SDK_VERSION; }
335
+ get: function () { return chunkMQZLO62L_cjs.SDK_VERSION; }
336
336
  });
337
337
  Object.defineProperty(exports, "getActiveMonitor", {
338
338
  enumerable: true,
339
- get: function () { return chunkK3GFTMEC_cjs.getActiveMonitor; }
339
+ get: function () { return chunkMQZLO62L_cjs.getActiveMonitor; }
340
340
  });
341
341
  Object.defineProperty(exports, "quantile", {
342
342
  enumerable: true,
343
- get: function () { return chunkK3GFTMEC_cjs.quantile; }
343
+ get: function () { return chunkMQZLO62L_cjs.quantile; }
344
344
  });
345
345
  Object.defineProperty(exports, "rateVital", {
346
346
  enumerable: true,
347
- get: function () { return chunkK3GFTMEC_cjs.rateVital; }
347
+ get: function () { return chunkMQZLO62L_cjs.rateVital; }
348
348
  });
349
349
  Object.defineProperty(exports, "resolveConfig", {
350
350
  enumerable: true,
351
- get: function () { return chunkK3GFTMEC_cjs.resolveConfig; }
351
+ get: function () { return chunkMQZLO62L_cjs.resolveConfig; }
352
352
  });
353
353
  Object.defineProperty(exports, "resolveThresholds", {
354
354
  enumerable: true,
355
- get: function () { return chunkK3GFTMEC_cjs.resolveThresholds; }
355
+ get: function () { return chunkMQZLO62L_cjs.resolveThresholds; }
356
356
  });
357
357
  Object.defineProperty(exports, "shouldSample", {
358
358
  enumerable: true,
359
- get: function () { return chunkK3GFTMEC_cjs.shouldSample; }
359
+ get: function () { return chunkMQZLO62L_cjs.shouldSample; }
360
360
  });
361
361
  Object.defineProperty(exports, "apiCollector", {
362
362
  enumerable: true,
package/dist/index.js CHANGED
@@ -1,6 +1,6 @@
1
- import { usePerformance, usePerformanceMetrics } from './chunk-Q33ZJQZ2.js';
2
- export { PerformanceContext, PerformanceProvider, browserCollector, defaultCollectors, errorCollector, usePerformance, usePerformanceMetrics, webVitalsCollector } from './chunk-Q33ZJQZ2.js';
3
- export { COLLECTOR_NAMES, DEFAULT_THRESHOLDS, EventBuffer, EventCollector, OTHER, PerformanceConfigError, PerformanceMonitor, Reservoir, SDK_NAME, SDK_VERSION, getActiveMonitor, quantile, rateVital, resolveConfig, resolveThresholds, shouldSample } from './chunk-4V2B5GPN.js';
1
+ import { usePerformance, usePerformanceMetrics } from './chunk-EMWBXP4Q.js';
2
+ export { PerformanceContext, PerformanceProvider, browserCollector, defaultCollectors, errorCollector, usePerformance, usePerformanceMetrics, webVitalsCollector } from './chunk-EMWBXP4Q.js';
3
+ export { COLLECTOR_NAMES, DEFAULT_THRESHOLDS, EventBuffer, EventCollector, OTHER, PerformanceConfigError, PerformanceMonitor, Reservoir, SDK_NAME, SDK_VERSION, getActiveMonitor, quantile, rateVital, resolveConfig, resolveThresholds, shouldSample } from './chunk-B5MOQKKB.js';
4
4
  export { apiCollector } from './chunk-ICEGTP6M.js';
5
5
  import { sanitizeName } from './chunk-UGDPZ343.js';
6
6
  export { sanitizeMetadata, sanitizeName, sanitizeText, sanitizeUrl, templatePath } from './chunk-UGDPZ343.js';
@@ -170,7 +170,7 @@ function themeVars(t) {
170
170
  "--rpm-font": t.fontFamily
171
171
  };
172
172
  }
173
- var PerformancePanel = lazy(() => import('./PerformancePanel-F4AYMOBE.js'));
173
+ var PerformancePanel = lazy(() => import('./PerformancePanel-TNVY6W3W.js'));
174
174
  function PerformanceButton(props) {
175
175
  var _a;
176
176
  const monitor = usePerformance();
package/dist/redux.cjs CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var chunkK3GFTMEC_cjs = require('./chunk-K3GFTMEC.cjs');
3
+ var chunkMQZLO62L_cjs = require('./chunk-MQZLO62L.cjs');
4
4
  var chunkQUF75EA3_cjs = require('./chunk-QUF75EA3.cjs');
5
5
  require('./chunk-ZY43XLHK.cjs');
6
6
 
@@ -10,7 +10,7 @@ function createPerformanceMiddleware(options = {}) {
10
10
  var _a;
11
11
  const resolve = () => {
12
12
  const m = options.monitor;
13
- if (!m) return chunkK3GFTMEC_cjs.getActiveMonitor();
13
+ if (!m) return chunkMQZLO62L_cjs.getActiveMonitor();
14
14
  return typeof m === "function" ? m() : m;
15
15
  };
16
16
  const ignore = (_a = options.ignore) != null ? _a : [];
package/dist/redux.js CHANGED
@@ -1,4 +1,4 @@
1
- import { getActiveMonitor } from './chunk-4V2B5GPN.js';
1
+ import { getActiveMonitor } from './chunk-B5MOQKKB.js';
2
2
  import { sanitizeName } from './chunk-UGDPZ343.js';
3
3
  import './chunk-XKYIKK6C.js';
4
4
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ashokreddydev/react-performance-monitor",
3
- "version": "0.1.1",
3
+ "version": "0.1.2",
4
4
  "description": "Performance monitoring for React apps — renders, API latency, Web Vitals and errors, with any backend",
5
5
  "keywords": [
6
6
  "react",