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…