Getting started with Cronitor RUM

Real User Monitoring (RUM) enables you to monitor your website's most important metrics, in real time. This includes metrics such as Core Web Vitals, Page Load Time, Sessions over time, by country and more.

RUM reports what happens after a visitor loads your application. It cannot detect a total outage when no browser can load the site, so pair it with an uptime check when availability matters.

In this tutorial, you will learn how to monitor your frontend using Cronitor RUM.

Step 1: Add your Site

In your Cronitor dashboard, go to Sites and fill in the details for it.

Create site form

You can pick any name you'd like. It's just to help you recognize it later in case you have multiple sites.

This name can be changed anytime, and is not tied to your domain. In other words if your domain name is www.example.com you can name your site something else like My Website.

Once you've created your site, you'll get a custom tracking snippet. The analytics snippet is a small piece of code that runs on your website, and it collects the metrics necessary to show you the insights in the dashboard. It looks like this, with your site's client key in place of YOUR_CLIENT_KEY:

<!-- Cronitor RUM -->
<script async src="https://rum.cronitor.io/script.js"></script>
<script>
    window.cronitor = window.cronitor || function() { (window.cronitor.q = window.cronitor.q || []).push(arguments); };
    cronitor('config', { clientKey: 'YOUR_CLIENT_KEY' });
</script>

Step 2: Install the SDK

Once you have added your website to Cronitor, all that is left to do is to install the tracking snippet on your website.

All you have to do is load this snippet as part of your website's HTML. The snippet works with any website or framework - simply add it to the <head> of your HTML template or root layout file, so it loads on every page.

If your site sets a Content Security Policy, allow https://rum.cronitor.io in both script-src (to load the script) and connect-src (to send events).

NPM

If you bundle your frontend, install the package instead of adding the snippet:

npm install @cronitorio/cronitor-rum

Load it once when your app starts. The NPM library does not track pageviews unless you set trackMode:

import * as Cronitor from '@cronitorio/cronitor-rum';

Cronitor.load('YOUR_CLIENT_KEY', {
  trackMode: 'history', // track the first pageview and client-side navigation
});

Next.js

npm install @cronitorio/cronitor-rum-nextjs

With the App Router, call the hook from a client component and render it inside a Suspense boundary in your root layout, because the hook reads the URL's search params:

// app/cronitor.js
'use client';
import { useCronitor } from '@cronitorio/cronitor-rum-nextjs';

export default function Cronitor() {
  useCronitor('YOUR_CLIENT_KEY');
  return null;
}

// app/layout.js
import { Suspense } from 'react';
import Cronitor from './cronitor';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Suspense fallback={null}>
          <Cronitor />
        </Suspense>
        {children}
      </body>
    </html>
  );
}

With the Pages Router, call it from pages/_app.js:

import { useCronitor } from '@cronitorio/cronitor-rum-nextjs';

export default function App({ Component, pageProps }) {
  useCronitor('YOUR_CLIENT_KEY');
  return <Component {...pageProps} />;
}

Before you go live

Review which domains and environments may send events, consent requirements, and the event and error data your application may expose. The Site client key is intended for browser use; never put a Cronitor management API key in frontend code. See common RUM questions and inbound filters.

Step 3: Collect pageviews

After you have added our analytics script to your website, you should be able to see pageviews show up in the dashboard within a minute of the visitors coming into your website.

To test it, visit the site in a normal browser. The script ignores automated browsers, such as Playwright, Puppeteer, and Selenium, so a scripted visit will not appear. Add ?cronitor_rum_debug to a page URL to log what the script does in the browser console.

Incoming telemetry example

P.S.: If you need help, you can always reach out to us at support@cronitor.io.

Set up with an agent, the CLI, or the API

You can create a site and get its snippet without the dashboard:

  • Agents: with the Cronitor MCP server, call create_site, then get_site with with_snippet set to true to get the snippet. Confirm pageviews with query_site.
  • CronitorCLI: cronitor site create, then cronitor site get <key> --with-snippet. See Using CronitorCLI.
  • REST: the Sites API. Request a site with withSnippet=true to include the snippet.

Next steps

  1. Control who can send events to your site with inbound filters.
  2. Instrument all your environments (eg. testing or staging).
  3. Track any interaction using custom events.
  4. Monitor multiple domains from one dashboard.
Next
Overview