Skip to content
Espejo

Quickstart

  1. Get a project key

    Section titled “Get a project key”

    A project’s public key looks like pk_live_…. It is public by design — it goes straight into your HTML, the same way a Sentry DSN does. It only says which project a recording belongs to; it cannot read anything back.

  2. Drop in the script

    Section titled “Drop in the script”

    Two bundles exist. Pick one:

    <!-- network (with bodies), console, clicks, navigation — 6 KB gzip -->
    <script src="https://dbuger.dnh.ar/sdk/espejo.js" data-key="pk_live_..."></script>
    <!-- everything above + DOM replay via rrweb — 86 KB gzip -->
    <script src="https://dbuger.dnh.ar/sdk/espejo.dom.js" data-key="pk_live_..."></script>

    They are two separate files, not one behind a flag: an IIFE can’t be split into chunks, so shipping rrweb “just in case” would cost everyone 80 KB, including whoever only wants the network log.

    By default nothing is uploaded. The script keeps a capped, in-memory ring buffer and only sends it when you call report(). Add data-mode="always" to upload every session instead — that’s the difference between something you can leave running in production and something that burns your bucket in a week.

  3. Trigger a recording

    Section titled “Trigger a recording”

    The auto-started instance is window.espejo:

    const url = await espejo.report("Can't save the weighing");
    // → the URL of the uploaded session, or null if nothing was recording

    Screen recording needs a user gesture, so call it from a click handler:

    button.addEventListener("click", async () => {
      await espejo.startVideo({ microphone: true });
      // ... user reproduces the bug ...
      await espejo.stopVideo();
      await espejo.report("Recorded the bug live");
    });

    A floating “report a problem” button is mounted automatically unless you pass data-button="off" (or button: 'off' when constructing Espejo yourself).

  4. See what got stored

    Section titled “See what got stored”

    A recording is a directory in the bucket:

    espejo/<projectId>/<yyyy-mm>/<sessionId>/
      manifest.json     what this session is and what objects compose it
      events.json        summary + network + console + interactions + navigation
      dom.jsonl.gz        DOM replay events (dom mode)
      video.webm          (video mode)

    The object path is always built by the server — the browser never proposes a key, or it could overwrite someone else’s session.

    Fetch it back through the console API:

    Terminal window
    curl https://dbuger.dnh.ar/v1/sessions/<id> \
      -H "Authorization: Bearer <jwt>"
Section titled “What to read next”
  • Core concepts — the bundle, redaction, storage, and the tenant → project → key model.
  • Console API — the full HTTP surface: projects, keys, sessions.
  • MCP server — let Claude Code or claude.ai read your recordings directly.