Datadog RUM (realtime user monitoring) #442

cohenaj194 · 2024-06-16T14:54:05Z

To set up Real User Monitoring (RUM) for your React.js application running on Cloudflare Workers, you can use Cloudflare's RUM service or integrate with a third-party RUM tool. Here is a general approach for each option:

Option 1: Using Cloudflare's RUM Service

Enable Cloudflare RUM:
- Log in to your Cloudflare account.
- Navigate to the domain where your React app is hosted.
- Go to the Speed tab and then select Browser Insights.
- Enable Browser Insights. This will automatically insert the necessary JavaScript into your site's HTML.
Verify the Integration:
- Once enabled, Cloudflare will start collecting RUM data from your users.
- You can view the performance data in the Cloudflare dashboard under the Speed tab.

Option 2: Using a Third-Party RUM Tool (e.g., New Relic, Datadog, Sentry)

Choose a RUM Tool:
- Select a RUM tool that suits your needs (e.g., New Relic Browser, Datadog RUM, Sentry Performance Monitoring).
Install the RUM SDK:
- Follow the specific tool's documentation to install the RUM SDK into your React application. Here’s an example for Datadog RUM:
```
npm install @datadog/browser-rum
```

Configure the RUM SDK:

Add the RUM initialization code in your React application. Typically, this would go in your main entry file (e.g., index.js or App.js).

import { datadogRum } from '@datadog/browser-rum';

datadogRum.init({
  applicationId: 'YOUR_APPLICATION_ID',
  clientToken: 'YOUR_CLIENT_TOKEN',
  site: 'datadoghq.com',
  service: 'your-react-app',
  env: 'production',
  version: '1.0.0',
  sampleRate: 100,
  trackInteractions: true,
});

datadogRum.startSessionReplayRecording();

Deploy the Application:
- Deploy your updated React application to Cloudflare Workers.
- Ensure your Cloudflare Worker script correctly serves the React app, including any necessary headers for the RUM SDK.

Example Worker Script

Here’s an example Cloudflare Worker script that serves a React app and includes necessary headers for a third-party RUM tool:

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const url = new URL(request.url);

  // Serve static files for your React app
  if (url.pathname.startsWith('/static')) {
    const staticFile = await fetch(request);
    return new Response(staticFile.body, {
      headers: { ...staticFile.headers, 'Content-Type': 'application/javascript' },
    });
  }

  // Serve the main HTML file with RUM script injected
  if (url.pathname === '/') {
    const html = `
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>Your React App</title>
          <script src="https://cdn.datadoghq.com/rum/v3/datadog-rum.js"></script>
          <script>
            datadogRum.init({
              applicationId: 'YOUR_APPLICATION_ID',
              clientToken: 'YOUR_CLIENT_TOKEN',
              site: 'datadoghq.com',
              service: 'your-react-app',
              env: 'production',
              version: '1.0.0',
              sampleRate: 100,
              trackInteractions: true,
            });
            datadogRum.startSessionReplayRecording();
          </script>
        </head>
        <body>
          <div id="root"></div>
          <script src="/static/js/bundle.js"></script>
        </body>
      </html>
    `;

    return new Response(html, {
      headers: { 'Content-Type': 'text/html' },
    });
  }

  // Default response
  return new Response('Not found', { status: 404 });
}

This example injects the Datadog RUM script directly into the HTML served by the Cloudflare Worker.

By following these steps, you should be able to set up RUM for your React.js application running on Cloudflare Workers. Make sure to consult the specific RUM tool's documentation for any additional configuration or advanced features.

The text was updated successfully, but these errors were encountered:

cohenaj194 · 2024-06-18T23:18:56Z

To integrate RUM (Real User Monitoring) into your React app using the provided root file setup, you'll typically use a RUM tool like Datadog RUM, New Relic, or any other service. Here's an example of how to add Datadog RUM to your React app:

Install the Datadog RUM package:

npm install @datadog/browser-rum

Initialize Datadog RUM in your root file:

Modify your root file (AppWithTheme or a new setup function) to initialize Datadog RUM:

import { datadogRum } from '@datadog/browser-rum';

// Initialize Datadog RUM
datadogRum.init({
  applicationId: 'YOUR_APPLICATION_ID',
  clientToken: 'YOUR_CLIENT_TOKEN',
  site: 'datadoghq.com',
  service: 'your-service-name',
  version: '1.0.0',
  sampleRate: 100,
  trackInteractions: true,
  defaultPrivacyLevel: 'mask-user-input'
});

datadogRum.startSessionReplayRecording();

Insert the initialization code into your AppWithTheme function:

Here's how you can include the Datadog RUM initialization in your AppWithTheme function:

import { Provider } from 'react-redux';
import { ThemeProvider } from '~/utils/providers/theme-provider';
import { store } from '~/redux/store';
import App from './App';
import { datadogRum } from '@datadog/browser-rum';

// Initialize Datadog RUM
datadogRum.init({
  applicationId: 'YOUR_APPLICATION_ID',
  clientToken: 'YOUR_CLIENT_TOKEN',
  site: 'datadoghq.com',
  service: 'your-service-name',
  version: '1.0.0',
  sampleRate: 100,
  trackInteractions: true,
  defaultPrivacyLevel: 'mask-user-input'
});

datadogRum.startSessionReplayRecording();

export default function AppWithTheme() {
  return (
    <Provider store={store}>
      <ThemeProvider>
        <App />
      </ThemeProvider>
    </Provider>
  );
}

Add environment variables (optional but recommended):

To keep your application ID and client token secure, you should use environment variables. Create a .env file in the root of your project:

REACT_APP_DATADOG_APPLICATION_ID=your_application_id
REACT_APP_DATADOG_CLIENT_TOKEN=your_client_token

Then, update your initialization code to use these variables:

datadogRum.init({
  applicationId: process.env.REACT_APP_DATADOG_APPLICATION_ID,
  clientToken: process.env.REACT_APP_DATADOG_CLIENT_TOKEN,
  site: 'datadoghq.com',
  service: 'your-service-name',
  version: '1.0.0',
  sampleRate: 100,
  trackInteractions: true,
  defaultPrivacyLevel: 'mask-user-input'
});

By following these steps, you should have Datadog RUM integrated into your React app, providing you with real user monitoring capabilities. Make sure to replace YOUR_APPLICATION_ID and YOUR_CLIENT_TOKEN with your actual Datadog credentials.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Datadog RUM (realtime user monitoring) #442

Datadog RUM (realtime user monitoring) #442

cohenaj194 commented Jun 16, 2024

cohenaj194 commented Jun 18, 2024

Datadog RUM (realtime user monitoring) #442

Datadog RUM (realtime user monitoring) #442

Comments

cohenaj194 commented Jun 16, 2024

Option 1: Using Cloudflare's RUM Service

Option 2: Using a Third-Party RUM Tool (e.g., New Relic, Datadog, Sentry)

Example Worker Script

cohenaj194 commented Jun 18, 2024