Baselime React Real User Monitoring

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.

Usage

npm i --save @baselime/react-rum

Add the BaselimeRum Component at the root of your React application application.

Get the publicApiKey from 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:

• timezone
• language
• os
• userAgent
• url
• device
• country
• city

Web Vitals

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>)
}

Using your data

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.

Props

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.

License

© Baselime Limited, 2023

Distributed under MIT License (The MIT License).

See LICENSE for more information.