​
Get Started 🚀

In order to start using OpenStatus’ real user monitoring, you need to create an new application in your dashboard.

It will generate a unique Data Source Name (DSN) that you will use to initialize the monitoring in your application.

​
Setup 🔧

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>
  );
}

What is YOUR_DSN? It’s your unique Data Source Name that you can find in your OpenStatus dashboard.

Was this page helpful?

OverviewReact