# React Real User Monitoring

Instrument your React applications with @baselime/react-rum.

# Instrumentation

Step 1: Install @baselime/react-rum in your project.

npm i @baselime/react-rum

Step 2: Add the Baselime Real User Monitoring component at the top level of your application.

Add BaselimeRum to your Root layout.jsx file

import { BaselimeRum } from '@baselime/react-rum'
import { ErrorPage } from '../your-error-page'

const baselimeApiKey = process.env.NEXT_PUBLIC_BASELIME_KEY;

export default function RootLayout({
}) {
  return (
    <html lang="en">
        <BaselimeRum apiKey={baselimeApiKey} enableWebVitals fallback={<ErrorPage />}>

import React from 'react';
import { createRoot } from "react-dom/client";
import { App } from './src/your-app.js'
import { ErrorPage } from '../your-error-page'

const baselimeApiKey = import.meta.env.VITE_BASELIME_API_KEY
const root = createRoot(document.getElementById('app'));
  <BaselimeRum apiKey={baselimeApiKey}  fallback={<ErrorPage />}> 
    <App />

Once this is done, all Unhandled exceptions are sent to Baselime

# Web Vitals

Additionally, you can enable capturing web vitals from your React applications. Use the enableWebVitals prop.

<BaselimeRum apiKey={baselimeApiKey} enableWebVitals fallback={<ErrorPage />}>
  <App />

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

# Error Boundary Options

Option Description
fallback A React element to be shown when an error occurs.
FallbackComponent A React component to be used as a fallback when an error occurs.
fallbackRender A function for rendering the fallback UI when an error occurs.
onError A callback function to handle errors with the signature (error: Error, info: ErrorInfo) => void.
onReset A callback function to handle reset events with various reasons.
resetKeys An array of keys that trigger a reset when changed.

You can use these options when creating an BaselimeErrorBoundary component, and choose which one best fits your needs based on how you want to handle errors and fallback UI rendering.

# 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   

    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", {

    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) {
        // ... do user login things
    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.