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

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

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

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.

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

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

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

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.

© Baselime Limited, 2023

Distributed under MIT License (The MIT License).

See LICENSE for more information.