Create your first project

First complete Local development or Production deployment and sign in. One Project represents one web product and can contain several Environments.

1. Create a Project

   1. Sign in at your Instance URL (locally, http://127.0.0.1:4173).
   2. Use the top-left project switcher to open All projects, then Create project.
   3. Enter a name and select the SDK platform such as React, Vue or JavaScript.
   4. Add the monitored application’s origin, such as http://127.0.0.1:5173 or https://shop.example.com, without a path or trailing slash. This is the application URL, not the Console URL.
   5. Configure Environments such as development and production. After creation, onboarding displays the selected platform’s instructions.
   6. Copy the default DSN from Project Settings → Onboarding. It includes the public Ingest URL and a write-only key; you do not need a separate write key.

   Success: The Project exists and onboarding shows its DSN and installation instructions.

2. Install the Browser SDK

   pnpm add @openrum/browser

   src/monitoring.ts

   import { captureEvent, init } from "@openrum/browser";
   
   init({
     dsn: import.meta.env.VITE_OPENRUM_DSN,
     environment: "development",
     release: "storefront@0.1.0",
   });
   
   captureEvent("first_event", {
     attributes: { source: "create-first-project" },
   });

   For the snippet above, set VITE_OPENRUM_DSN in your Vite application’s local environment file and restart its development server. Use production when deploying a production application. Initialize before application code, outside React render functions.

   For a runnable repository example, copy examples/react-vite/.env.example to examples/react-vite/.env.local, set the DSN, then run:

   pnpm --filter @openrum/browser build
   pnpm --filter @openrum/example-react-vite dev --host 127.0.0.1

   See the Browser SDK guide for framework setup, and Next.js or Astro if the application renders on the server.

3. Verify the first Event

   1. Open your app and trigger a page view or the first_event Custom Event. The repository example’s button sends demo_checkout instead.
   2. Select the same Project and Environment, and the last 15 minutes. Open Events and allow a few seconds for delivery and consumption.
   3. Open Sessions and confirm the same session_id groups related page, API and error events.
   4. If you raised an error, follow it to an Issue and inspect Session context.

Troubleshooting

• Event missing: confirm ingest health, write-key Origin allowlist and that Consumer / ClickHouse are healthy.
• CORS or network failure: the DSN address must match the public Ingest URL and allowed Origins.
• Source Map frames unavailable: expected until optional object storage is configured. Core monitoring still works.

Next: Glossary and core concepts, Self-hosting overview, or Investigation.