Setting up Metronome in a Cloudfare Workers project

Metronome is unable to track duration of the requests, loaders, and actions because they're intentionally locked in Cloudflare in order to prevent attacks. Learn more.

Install Remix with the Cloudflare Workers adapter

If you have already installed Remix, you can skip this section.

Terminal


npx create-remix@latest

Name your project (e.g. "my-remix-app")
After you name your project, select Just the basics and press enter.
Select Cloudflare Workers and press enter.

Install Metronome

Install Metronome React and Cloudflare Workers packages

Terminal


npm install @metronome-sh/react @metronome-sh/cloudflare-workers

Configure Metronome in your server.js file

Import combineGetLoadContexts, createMetronomeGetLoadContext and registerMetronome from the @metronome-sh/cloudflare-workers module in your server.js file.

server.js


import {
  createMetronomeGetLoadContext,
  registerMetronome,
} from "@metronome-sh/cloudflare-workers";

server.js


const buildWithMetronome = registerMetronome(build);

create the getLoadContext function using createMetronomeGetLoadContext with buildWithMetronome as argument.

server.js


const metronomeGetLoadContext =
  createMetronomeGetLoadContext(buildWithMetronome);

In the createRequestHandler function, replace the build prop with buildWithMetronome and add the getLoadContext prop with metronomeGetLoadContext:

server.js


addEventListener(
  "fetch",
  createEventHandler({
    build: buildWithMetronome,
    mode: process.env.NODE_ENV,
    getLoadContext: metronomeGetLoadContext,
  })
);

Your server.js file should now look like this:

server.js


import {
  registerMetronome,
  createMetronomeGetLoadContext,
} from "@metronome-sh/cloudflare-workers";
import { createEventHandler } from "@remix-run/cloudflare-workers";
import * as build from "@remix-run/dev/server-build";

const buildWithMetronome = registerMetronome(build);
const metronomeGetLoadContext =
  createMetronomeGetLoadContext(buildWithMetronome);

addEventListener(
  "fetch",
  createEventHandler({
    build: buildWithMetronome,
    mode: process.env.NODE_ENV,
    getLoadContext: metronomeGetLoadContext,
  })
);

Using multiple getLoadContext

If you already have a getLoadContext function, you can combine Metronome's getLoadContext with your existing by importing the combineGetLoadContexts helper:

server.js


import {
  combineGetLoadContexts,
  registerMetronome,
  createMetronomeGetLoadContext,
} from "@metronome-sh/cloudflare-workers";
import { createEventHandler } from "@remix-run/cloudflare-workers";
import * as build from "@remix-run/dev/server-build";

const buildWithMetronome = registerMetronome(build);
const metronomeGetLoadContext =
  createMetronomeGetLoadContext(buildWithMetronome);

// ... your other getLoadContext functions ...

addEventListener(
  "fetch",
  createEventHandler({
    build: buildWithMetronome,
    mode: process.env.NODE_ENV,
    // Combine your existing getLoadContext with Metronome's
    getLoadContext: combineGetLoadContexts(
      getLoadContext,
      metronomeGetLoadContext
    ),
  })
);

Configure Metronome in your root.tsx file

After you have configured the server side of Metronome in your app, you need to set up the client side with @metronome-sh/react to be able to track your app's Web Vitals.

Simply import MetronomeLinks from @metronome-sh/react:

root.tsx


import { MetronomeLinks } from "@metronome-sh/react";

You should render the <MetronomeLinks /> component between your <head> tags.

root.tsx


export default function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
        <MetronomeLinks />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

Create a new project in Metronome

To create a new project, please follow the instructions in the Creating a new project section.

Set your API key in your production environment

After you created you new project in https://metronome.sh, you need to add the METRONOME_API_KEY environment variable in cloudflare. For more information visit the Cloudflare Workers documentation

Deploy your project

Once you have your METRONOME_API_KEY set up, deploy your project to production, after your first couple of visits, you should be able to see metrics.

Remix + Cloudflare Pages

Remix + Express