@baselime/react-rum v0.2.9

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

Load this at the top of your application to avoid resending the web vital data.

import { BaselimeRum } from '@baselime/react-rum';

function Page({ child }) {

return (
    <BaselimeRum apiKey={publicApiKey} enableWebVitals>
        {child}
    </BaselimeRum>)
}

Capture Errors

BaselimeRum automatically captures and sends any Unhandled Errors in your application to Baselime.

import { BaselimeRum } from '@baselime/react-rum';

function Page({ child }) {

return (
    <BaselimeRum apiKey={publicApiKey} enableWebVitals fallback={<div>Something went wrong</div>}>
        {child}
    </BaselimeRum>)
}

Error Boundaries

To provide a better UX for end users, use React Error Boundaries.

The BaselimeErrorBoundary catches errors in any of its child components, reports the error to Baselime. It works in conjunction with the <BaselimeRum /> Component so that all errors are correlated by Page Load, and User Session.

import { BaselimeErrorBoundary } from '@baselime/react-rum';

function UserProfile({ child }) {

return (<BaselimeErrorBoundary fallback={<div>Could not display your user profile</div>}>
            <UserProfileImage />
            <UserName />
            <UserBiography />
        </BaselimeErrorBoundary>
    )
}

This is based on the excellent react-error-boundary project.

Capture Exceptions

Error Boundaries do not catch errors inside event handlers. To catch Exceptions

import { useBaselimeRum } from '@baselime/react-rum';

function MyButtonComponent() {
    const { captureException } = useBaselimeRum();

    function handleClick(e) {
        try { 
                 // Do something that could throw  
        } catch (error) {
            // sends errors to Baselime so they can be fixed   
            captureException(error)
       }
    }

    return <button onClick={handleClick}>Click Me</button>
}

Custom Events

Capture custom events for analytics and monitoring. Like logs but with all the power of Baselime.

sendEvent(message: string, payload)

import { useBaselimeRum } from '@baselime/react-rum';

function CheckoutComponent() {
    const { sendEvent } = useBaselimeRum();

    function handleClick() {

        const checkoutSession = await createImaginaryCheckoutSession()
        sendEvent("Checkout Started", {
            ...checkoutSession
        })
    }

    return <button onClick={handleClick}>Checkout</button>
}

Setting the active user

To set the User from another component then call

import { useBaselimeRum } from '@baselime/react-rum';

function UserCard({ child }) {
    const { setUser } = useBaselimeRum();

    function login(user) {

        setUser(user.id);
    }
    return (
        <Button onClick={login}>Login</Button>
    }

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

License

© Baselime Limited, 2023

Distributed under MIT License (The MIT License).

See LICENSE for more information.