Bug reports from your Rails app

The tag, in your layout

javascript_include_tag writes the tag, with the data attributes from the data: hash:

<body>
  <%= yield %>

  <%= javascript_include_tag "https://app.brainbox.sh/widget.js",
        data: { project: "pk_your_project_key", endpoint: "https://app.brainbox.sh/ingest" } %>
</body>

Who is signed in

Write current_user into a script after the tag. json_escape keeps a name with </script> in it from breaking out, and raw stops ERB escaping the JSON a second time:

<% if current_user %>
  <script>
    window.Brainbox.identify(<%= raw json_escape({ id: current_user.id.to_s, email: current_user.email, name: current_user.name }.to_json) %>)
  </script>
<% end %>

If you turned on Rails' Content Security Policy, give that script a nonce with javascript_tag nonce: true, and add https://app.brainbox.sh to script_src and connect_src.

Turbo Drive

Turbo replaces <body> on every visit and runs the scripts in it again. The widget moves itself into each new body, with anything the user had open in it, and a second run of the tag does nothing, so there is still one widget. The identify script does run again, which keeps the user current after signing in or out.

The widget's elements are marked data-turbo-temporary, so Turbo leaves them out of the page snapshots it caches for back and forward.

Your own button

Any element marked data-brainbox opens the widget, in any view. 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.