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.