BugButton

Description

This is the component you will be putting on your app to collect bugs.

Go ahead and click it (it's interactive)-- and see the glory of the bug button. Hit escape or the Cancel button to come back to the page.

The fallback content to display on prerendering

Props

• id - A string you get from our Console to connect to your bug system.
• apikey - A string you get from our Console to connect to your bug system. This can be regnerated for security.
• position - A string used to staticly position the BugButton.
  • "bottom-right"
  • "bottom-left"
• userbugreport - A object, any thing that can be serialized as JSON, that you can use to store your own data, which will be passed along with any issue created. Useful for putting in say -- your end user's ID.
• theme - An object of name value pairs that works with MUI themes.
• onBugButtonClicked - A function, called with the user clicks, but before the dialog is shown.
• onBeforeBugSubmitted - A function(BugButtonSubmission), called after the user clicks, before going to our server.
• onAfterBugSubmitted - A function(BugButtonSubmission), called after the bug is sent to our server.
• onBugError - A function(BugButtonSubmission, Error), called after the bug is sent to our server.
• pinStyle - An React.CSSProperties of React styles, applied to pins.
• noteStyle - An React.CSSProperties of React styles, applied to notes.

---

Default UI

A button you can easily fit in your UI to collect bugs.

import { BugButton } from "@userbugreport/bugbutton-react";

<BugButton

apiKey="sample"

onBeforeBugSubmitted={() => {

console.log("submitting");

// you can also set a 'global' extra data on .userbugreport any time you like

// and it will be merged with the `userbugreport` prop

window.userbugreport = { extra: "🌶" };

}}

onAfterBugSubmitted={() => console.log("submitted")}

onBugError={(submission, error) => console.error(submission, error)}

/>;

The fallback content to display on prerendering

Custom UI

Learn all about customizing