Bug reports from your Astro site

The tag, in your layout

Put it in the layout every page uses, before </body>:

<body>
  <slot />
  <script
    is:inline
    src="https://app.brainbox.sh/widget.js"
    data-project="pk_your_project_key"
    data-endpoint="https://app.brainbox.sh/ingest"
  ></script>
</body>

Astro already treats a script with attributes other than src as inline, but writing is:inline keeps it that way if someone trims the attributes later.

View transitions

With <ClientRouter />, Astro swaps in the next page's <body> instead of loading it. The widget moves itself into each new body as it arrives, so it stays on the page, with whatever the user had open in it. Inline scripts don't run again on navigation, so nothing is loaded twice.

Who is signed in

On a server-rendered page, write the user into an inline script after the tag. Escape < so a name can't close the script early:

---
const user = Astro.locals.user // however your middleware sets it
const identity = user
  ? JSON.stringify({ id: user.id, email: user.email, name: user.name }).replace(/</g, "\\u003c")
  : null
---
{identity && <script is:inline set:html={"window.Brainbox.identify(" + identity + ")"} />}

Your own button

Any element marked data-brainbox opens the widget, in any .astro file or framework component. 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.