User feedback

Let the people using your app tell you what went wrong, in their own words. Each report is linked to the error it is about, shows on that issue, and can page you through an alert rule.

The widget

@bucker/browser/feedback-widget is a feedback form your users open from a button. It is its own entry point, so a page that does not use it does not download it (about 5.5 KB minified).

import { init, defaultIntegrations } from '@bucker/browser'
import { feedbackIntegration } from '@bucker/browser/feedback-widget'

init({
  dsn,
  integrations: [...defaultIntegrations(), feedbackIntegration()],
})

This adds a Report a problem button to the bottom-right corner. To use your own button instead, turn the floating one off and attach the form to yours:

feedbackIntegration({ autoInject: false, attachTo: '#help-button' })

The form renders inside a shadow root, so your stylesheet cannot break it and its styles cannot leak onto your page. Everything a user types is sent as data and never written into the page as HTML.

Screenshots

With allowScreenshot: true the form gains an optional file input. The user picks a PNG or JPEG of their own (512 KB at most); the widget never captures the page or the screen, so nothing is in the picture that the user did not choose to show.

feedbackIntegration({ allowScreenshot: true })

The image travels as an attachment item in its own envelope, linked to the error the report is about (or to the report itself when there is none). It is stored only on a project that has opted in to screenshots: Settings › Projects › Attachments. On any other project Bucker refuses the image by name (unsupported_item_type:attachment_screenshot, shown on the drops panel, not billed) and the written report is still stored. So turn allowScreenshot on only for projects that enabled it; the option is off by default because the server's answer is a refusal, not an error the user would see. See Attachments for what is kept and how long.

With captureFeedback, pass attachment: { filename, data, contentType } (a Uint8Array) for the same effect.

After an error: the report dialog

showReportDialog() opens the form already linked to an error, so what the user writes lands on that error's issue. It defaults to the last error the SDK captured while feedbackIntegration() is installed. You can also pass an id:

import { captureException } from '@bucker/browser'
import { showReportDialog } from '@bucker/browser/feedback-widget'

try {
  await checkout()
} catch (error) {
  const eventId = captureException(error)
  showReportDialog({ eventId })
}

Reports from the dialog are filed with the source crash_dialog. Reports from the widget are filed as widget.

Your own form

Build your own UI and send reports with captureFeedback from @bucker/browser/feedback:

import { captureFeedback } from '@bucker/browser/feedback'

captureFeedback({ message, email, name, associatedEventId: eventId })

What is sent

A report carries the message, the optional name and email, the page's URL without its query string or fragment (they often carry tokens), and the id of the error it is about. A screenshot is sent only when allowScreenshot is on and the user picks one. Reports go through spam scoring and the prompt-injection scanner, and are shown as quoted, untrusted text everywhere they appear.

Where reports show up

• Alerts › Monitors › Feedback: the inbox, where you resolve reports or mark them as spam.
• The issue page: a User feedback section lists the reports linked to that issue, each with a link to its session replay when one was recorded.
• Alert rules: the New feedback condition pages the rule's channels when a report arrives on an issue.