Kubesense Browser RUM — React Integration

React and React-ecosystem integrations for Kubesense Browser RUM. This package helps you:

• Capture React rendering errors via an ErrorBoundary component (or the addReactError API).
• Track client-side route changes as RUM views with React Router v6 and v7.
• Measure component render performance.

Installation

npm install @kubesense/kubesense-browser-rum-react
# or
yarn add @kubesense/kubesense-browser-rum-react

react and react-dom are peer dependencies. The React Router entry points additionally require react-router-dom.

Usage

1. Enable the plugin

Register the React plugin when initializing RUM:

import { kubesenseSdk } from '@kubesense/kubesense-browser-rum'
import { reactPlugin } from '@kubesense/kubesense-browser-rum-react'

kubesenseSdk.init({
  applicationId: '<KUBESENSE_APPLICATION_ID>',
  clientToken: '<KUBESENSE_CLIENT_TOKEN>',
  site: '<KUBESENSE_SITE>',
  plugins: [reactPlugin({ router: true })],
})

2. Track React errors

import { ErrorBoundary } from '@kubesense/kubesense-browser-rum-react'

function App() {
  return (
    <ErrorBoundary fallback={({ error }) => <p>Something went wrong: {error.message}</p>}>
      <YourApp />
    </ErrorBoundary>
  )
}

Or report errors manually (for example from createRoot's onUncaughtError):

import { addReactError } from '@kubesense/kubesense-browser-rum-react'

addReactError(error, errorInfo)

3. Track route changes

Import the integration matching your React Router version and use the wrapped hooks/components in place of the originals:

// React Router v6
import { useRoutes } from '@kubesense/kubesense-browser-rum-react/react-router-v6'

// React Router v7
import { useRoutes } from '@kubesense/kubesense-browser-rum-react/react-router-v7'

API

| Export | Description | | --------------------------------- | ------------------------------------------------------- | | reactPlugin | RUM plugin enabling React integrations. | | ErrorBoundary | React error boundary that reports caught errors to RUM. | | addReactError | Manually report a React error with its component stack. | | UNSTABLE_ReactComponentTracker | Experimental component render-performance tracker. | | react-router-v6 / -v7 entries | Route-change view tracking for React Router. |

Documentation

See the dedicated Kubesense documentation for more details.

License

Apache-2.0