react-rum 0.1.9
Install from the command line:
Learn more about npm packages
$ npm install @baselime/react-rum@0.1.9
Install via package.json:
"@baselime/react-rum": "0.1.9"
About this version
Baselime enables observability for the next generation of cloud applications.
This library enables you to monitor real-user behaviour of your React and Next.js applications.
npm i --save @baselime/react-rumAdd the BaselimeRum Component at the root of your React application application.
Get the
publicApiKeyfrom the Baselime console. Make sure to use a public API key.
function Page({ child }) {
return (
<BaselimeRum apiKey={publicApiKey} service="my-website">
{child}
</BaselimeRum>)
}The following data is automatically captured for every page view of your application:
timezonelanguageosuserAgenturldevicecountrycity
Additionally, you can enable capturing web vitals from your React applications. Use the enableWebVitals prop.
- Time To First Byte (TTFB)
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
function Page({ child }) {
return (
<BaselimeRum apiKey={publicApiKey} service="my-website" enableWebVitals>
{child}
</BaselimeRum>)
}Once the data is captured, you can query, search and analyse your data in the Baselime console. You can create dashboards and alerts based on the Real User Monitoring metrics.
| Parameter | Description |
|---|---|
apiKey |
Your Baselime API key for authentication and authorization. |
enableWebVitals |
(Optional) A boolean flag indicating whether to enable tracking of web vitals. |
enableLocal |
(Optional) A boolean flag indicating whether to enable local tracking. |
dataset |
(Optional) The dataset to store the data to. Defaults to web. |
service |
The name of the service or application being monitored. |
© Baselime Limited, 2023
Distributed under MIT License (The MIT License).
See LICENSE for more information.
