JuneBug

JuneBug is a lightweight, drag-and-drop bug reporting tool that’s designed to get more feedback from real users, not just developers.
It requires no login, no forms, and no technical knowledge. The user simply drags the friendly ladybug icon to where the problem is and hits send.

Why I Built This

I created this with the hope that more people would actually report issues rather than find ways around them. JuneBug lowers the barrier to feedback so teams can catch real problems faster.

Features

• 🐞 Draggable bug icon
• 📸 Optional screenshot support (via html2canvas)
• 📝 No form filling for the user - just a message
• 📧 Emails reports directly to your support inbox. Out of the box, it sends emails through JuneBug’s AWS Lambda server, but this behavior can be overridden with a custom function (sendEmailOverrideFunction prop).
• 🌙 Light/dark mode support

Previews

Example Usage

import { JuneBug } from "junebug";

    <div>
      <h1>JuneBug Test</h1>
        <JuneBug
          customIcon="data:image/png;base64,...yourBase64IconHere..."
          iconAlt="Custom Bug Icon Alt Text"
          darkMode={true}
          reporterInfo={{ userId: "myUsername", sessionId: "123456789", userEmail: "[email protected]" }}
          supportInbox="[email protected]"
          appName="MyApp"
          subjectPrefix="Special Bug Report"
          disableEmailer={false}
          disableConsoleLogs={false}
          disableScreenshot={false}
          visible={true}
          customLogObject={{ browser: "Chrome", version: "123.0.0", isSpecialButtonPressed: "true" }}
          iconOffset={{ x: 60, y: 80 }}
          onSubmit={(message, screenshot) => {
            console.log("User said:", message);
            if (screenshot) {
              console.log("Screenshot data:", screenshot.slice(0, 50) + "...");
            }
          }}
          sendEmailOverrideFunction={async (rawEmail) => {
            await fetch("https://my-api.com/send", {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({ rawEmail }),
            });
          }}
        />
    </div>

Props

Installation

npm install junebug