Browser Monitoring

• Sessions — anonymous timelines from structured beacons.
• Errors — JavaScript exceptions and unhandled rejections.
• Network — same-origin fetch / XHR timing and status.
• Web Vitals — LCP, CLS, INP, FCP, TTFB (and FID when observed).

Investigate in /app/browser. Empty charts mean no beacons yet.

From an empty workspace to your first real-user session in a few minutes. Browser Monitoring is included on every plan. The screenshots use a demo store, shop.acme.example, with a week of sample traffic.

1. 1

   Step 1: Open Browser Monitoring

   Choose Browser Monitoring in the sidebar. Until you create an app and the SDK sends events, the page stays empty. Mydle never shows estimated or sample traffic.

   

2. 2

   Step 2: Create a browser app

   Enter a name under App name, for example Storefront, and click Create app. Create one app per site or front end so that each one gets its own key, origins, and releases.

   

3. 3

   Step 3: Copy the install snippet

   Mydle opens the app's Settings. Install SDK shows a ready-to-paste script tag with your public key (pk_live_…) and the ingest endpoint. The public key is safe in browser code: it can only send events for this app. Ingestion still reads Blocked — no allowed origins until you complete the next step.

   

4. 4

   Step 4: Allow your site's origin

   Under Allowed origins, add the exact origin your site runs on, such as https://shop.acme.example, and click Add origin. Mydle rejects events from any other origin, and empty lists and wildcards are not allowed. Add each environment separately, for example a staging host or http://localhost:3000 for local testing.

   

5. 5

   Step 5: Install the SDK

   Paste the snippet into the <head> of every page and set data-release to the version you deploy:

   <script
     src="https://www.mydle.app/sdk/mydle-browser.js"
     data-key="pk_live_…"
     data-endpoint="https://www.mydle.app/api/rum/v1/ingest"
     data-release="1.5.0"
     defer
   ></script>

   In bundled apps (Next.js, React, Vue), install the package instead and initialize it once on the client:

   npm install @mydle/browser-sdk
   
   import { mydle } from "@mydle/browser-sdk";
   
   mydle.init({
     projectKey: "pk_live_…",
     release: "1.5.0",
   });

   The SDK records page views, route changes, JavaScript errors, Web Vitals, and same-origin fetch/XHR timing. To check the install, open DevTools → Network on your site and look for a POST to /api/rum/v1/ingest that returns 202 Accepted. See Installation for more options.

6. 6

   Step 6: See real users arrive

   Go back to Overview. The health line, sessions, page views, errors, and error rate cover the selected range. The performance timeline shows daily Web Vitals averages, and Top pages and Recent errors link to the details. Use the app picker and date range in the toolbar to switch apps or periods.

   

7. 7

   Step 7: Follow a session

   Sessions lists each anonymous visit with its browser, OS, country, duration, pages, and errors. Click a row to open its timeline of page views, vitals, requests, and errors in order. Timelines are structured events, not a screen recording. Use Issues to show only sessions that hit an error.

   

8. 8

   Step 8: Triage errors

   Errors groups JavaScript exceptions and unhandled rejections by message and source location. Select a group to see how many users and sessions it affected, when it was first and last seen, the stack trace, and the browsers involved. Record releases and upload source maps to read minified stacks. See Errors.

   

9. 9

   Step 9: Check Web Vitals

   Performance shows collected averages for LCP, INP, CLS, FCP, and TTFB, each rated Good, Needs attention, or Poor. Switch the timeline between metrics to see whether a release made pages faster or slower, and use Page performance to find the slowest routes.

   

10. 10

    Step 10: Inspect network requests

    Network aggregates the fetch and XHR calls your pages make, with average duration, failure rate, and volume per endpoint. Here, POST /api/checkout fails on more than a quarter of calls. That is the kind of problem you would investigate next in Tracing or Logs.

    

Install @mydle/browser-sdk. Preferred API: mydle.init({ projectKey }), then track, captureException, flush, and stop. Legacy initMydleBrowser remains for product snippets. Full API: Browser SDK· setup: Installation.

Beacons POST to /api/rum/v1/ingest. Default production endpoint: https://www.mydle.app/api/rum/v1/ingest (DEFAULT_INGEST_ENDPOINT). Auth is a publishable pk_ key only — never workspace REST secrets (mydle_…) in the browser. Data is Postgres-backed.

Beacon types: pageview, navigation, route_change, visibility, unload, error, vital, session, network, event.

• Free — 5,000 browser events / month, 1-day retention.
• Pro — 50,000 browser events / month, 7-day retention. +50,000 event add-ons are available.

Events older than 24 hours are rejected with TIMESTAMP_INVALID. When the monthly allowance is used up, ingest returns 429 QUOTA_EXCEEDED with a Retry-After header until the month resets; stored data stays visible. Per-key and IP rate limits still apply on all plans.

• Installation
• Browser SDK
• Tracing — correlate via W3C traceparent
• SDKs overview