Bug reports from your Vue app

The tag, in index.html

In a Vite project, index.html is the page every route renders into. Put the tag before </body>.

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
  <script
    src="https://app.brainbox.sh/widget.js"
    data-project="pk_your_project_key"
    data-endpoint="https://app.brainbox.sh/ingest"
  ></script>
</body>

Vite bundles only type="module" scripts, so it leaves this one as it is. It runs before your app's module, which means window.Brainbox is there by the time your code is.

Who is signed in

Call identify() when you know the user, and every report after that says who sent it. A watcher on your auth store keeps it current:

import { watch } from "vue"
import { useAuthStore } from "./stores/auth" // yours

const auth = useAuthStore()
watch(
  () => auth.user,
  (user) => {
    if (user) window.Brainbox?.identify({ id: user.id, email: user.email, name: user.name })
  },
  { immediate: true },
)

TypeScript

window.Brainbox comes from a script tag, so TypeScript doesn't know it. Declare it once:

declare global {
  interface Window {
    Brainbox?: {
      identify(user: { id?: string; email?: string; name?: string }): void
      open(): void
      start(mode: "screenshot" | "record" | "feature"): void
      close(): void
    }
  }
}

export {}

Your own button

Any element marked data-brainbox opens the widget, anywhere in your templates. screenshot goes straight to marking up the page, record to a recording of the page and feature to a feature request; an empty value opens the chooser. Clicks are delegated, so elements rendered later work too.

<button data-brainbox="screenshot">Report a bug</button>
<button data-brainbox="feature">Request a feature</button>

From code, window.Brainbox.open() shows the chooser and window.Brainbox.start("feature") goes straight to one flow. To hide our floating button and keep only yours, add data-mode="mount" to the tag.

Passwords and personal data

Typed values are always masked in recordings, so passwords, emails and card numbers never leave the browser as plain text. Add the rr-block or rr-mask class to anything else you want kept out.