Instrumenting your React application with CloudWatch RUM

AWS’s long-awaited release of Real User Monitoring brings client-side web application data straight to your CloudWatch dashboard. With CI/CD tooling and availability monitors, in-browser metrics have become the final frontier for a fully-monitored, data-driven front end service.

As with all front end tooling, it’s ripe for extension. Amazon published an NPM package to speed up developer onboarding for the new service. The CloudWatch RUM client is not coupled to any one framework or ecosystem. You can instantiate RUM in an Angular, React, Vue, or any other project.

While the CloudWatch team provided samples for instrumenting RUM in React, the code samples leave much to be desired. By contrast, the aws-rum-react NPM package provides much of this functionality out-of-the-box.

To install the necessary dependencies to your project, execute:

• NPM: npm install aws-rum-react aws-rum-web
• Yarn: yarn add aws-rum-react aws-rum-web

Next, import the AwsRumProvider and wrap as much of your application as possible in it. It should wrap your ErrorBoundary, if you are using one.

Here is an example src/index.tsx file:

import { AwsRumProvider } from 'aws-rum-react';
import { StrictMode } from 'react';
import ErrorBoundary from './components/error-boundary';
import ROOT from './constants/root';
import App from './features/app';

ROOT.render(
  <StrictMode>
    <AwsRumProvider
      allowCookies
      endpoint="https://dataplane.rum.us-west-2.amazonaws.com"
      guestRoleArn="arn:aws:iam::000000000000:role/RUM-Monitor-us-west-2-000000000000-00xx-Unauth"
      id="00000000-0000-0000-0000-000000000000"
      identityPoolId="us-west-2:00000000-0000-0000-0000-000000000000"
      region="us-west-2"
      sessionSampleRate={1}
      telemetries={['errors', 'performance']}
      version="1.0.0"
    >
      <ErrorBoundary>
        <App />
      </ErrorBoundary>
    </AwsRumProvider>
  </StrictMode>,
);

You should be able to determine the values of these props from the “JavaScript snippet” provided by the CloudWatch RUM console of your target AWS account. Just create a new AppMonitor to get started!