Frontend monitoring

From the click
to the database query.

The browser SDK reports errors, logs, and network calls from your web app. Requests to your API carry a trace header, so a click and the backend work it triggered land in the same trace.

Get started Read the docs

Full-stack traces

Browser and API, one waterfall

Browser errors

Without the extension noise

Logs & console

Sent with the current user

Build versions

Each release, a deployment

One init, and your frontend joins the trace

Install the package, call initMonocle() once, and fetch and XHR calls, uncaught errors, and unhandled rejections are captured. It works with any framework and has no runtime dependencies.

A traceparent header is added to requests to your own origin
API on another origin? List it in tracePropagationTargets
Safe to import in server-rendered code: on the server, the client sends nothing

src/monocle.ts

import {
  consoleLogs,
  errors,
  initMonocle,
  network,
} from '@monocle.sh/browser-sdk'

export const monocle = initMonocle({
  dsn: import.meta.env.VITE_MONOCLE_DSN,
  environment: 'production',
  integrations: [
    network({ tracePropagationTargets: ['https://api.example.com'] }),
    errors(),
    consoleLogs({ levels: ['warn', 'error'] }),
  ],
})

monocle.setUser({ id: user.id, email: user.email })

Browser errors, without the noise

Errors from your frontend land in the same issues as your backend ones. The usual browser noise is dropped before it reaches your quota, and you can drop your own.

Extensions, ResizeObserver loops, and Script error. are filtered by default
An error thrown in a loop is rate limited, so it cannot use up your quota
Ignore errors by type, message, file, or with your own function

src/monocle.ts

initMonocle({
  dsn,
  environment: 'production',
  ignoreErrors: [
    { type: 'AbortError' },
    { message: /^Loading chunk \d+ failed/ },
    { url: /^https:\/\/widget\.example\.com\// },
  ],
})

try {
  await checkout()
} catch (error) {
  await monocle.captureException(error, { tags: { step: 'payment' } })
}

Know which build broke

A browser app has no environment variables at runtime, so the Vite plugin reads the version at build time and injects it. Each new version shows up as a deployment, and every error knows the build it came from.

Read from MONOCLE_VERSION, your platform, your CI, or the local git commit
No network calls during the build, and its place in plugins does not matter
Not on Vite? Pass serviceVersion from a value your bundler replaces

vite.config.ts

import { defineConfig } from 'vite'
import { monocle } from '@monocle.sh/vite-plugin'

export default defineConfig({
  plugins: [monocle()],
})

Works with

Plugs into your stack

Any framework

No runtime dependencies, ES2022

Vite plugin

Version of each build, for deployments

AdonisJS

The same trace continues in your API

Any OTel backend

W3C traceparent, nothing proprietary

Server rendering

Inactive on the server, no guard needed

Website restrictions

Only your domains can use the DSN

Next up

Product analytics, without the cookies.

Count visitors, page views, and custom events, see where they come from, and find where they drop off. Monocle sets no cookies, uses no browser storage, and never receives the identity of your users.

Explore Product analytics

Read the docs

All features

Early access

See what your apps
are really doing.

Traces, logs, errors and metrics for every app you ship. Bring it all into focus.