Bug reports from your Nuxt app

The tag, from nuxt.config

app.head.script adds a script to every page. tagPosition: "bodyClose" puts it before </body>, and the data attributes are passed through as written.

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: "https://app.brainbox.sh/widget.js",
          "data-project": "pk_your_project_key",
          "data-endpoint": "https://app.brainbox.sh/ingest",
          tagPosition: "bodyClose",
        },
      ],
    },
  },
})

Who is signed in

A client-only plugin (the .client suffix) runs in the browser, after the tag. Watch your user and pass it on:

export default defineNuxtPlugin(() => {
  const user = useCurrentUser() // your auth composable: a ref to the user, or null
  watch(
    user,
    (u) => {
      if (u) window.Brainbox?.identify({ id: u.id, email: u.email, name: u.name })
    },
    { immediate: true },
  )
})

On Nuxt 3 the folder is plugins/ at the project root.

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, in any component's template. 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.