With our real user monitoring, you can track the performance of your website from your usersโ€™ browsers.

You install a small JavaScript snippet on your website, and we will record the performance metrics of your website for each user.

Metrics ๐Ÿ“Š

We are currently tracking the following metrics:

  • TTFB: Time to First Byte
  • FCP: First Contentful Paint
  • LCP: Largest Contentful Paint
  • CLS: Cumulative Layout Shift
  • INP: Interaction to Next Paint

Get started ๐Ÿš€

We currently only support NextJS applications, other frameworks are coming soon.

To get started, you need to install our package in your application.

pnpm add @openstatus/next-monitoring -E

Then, you need to add the following snippet to your layout.tsx file:

import { OpenStatusProvider } from "@openstatus/next-monitoring";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <OpenStatusProvider dsn="YOUR_DSN" />
        {children}
      </body>
    </html>
  );
}