https://github.com/joduplessis/buggable

An embeddable bug reporting & screenshot creation component that integrates rrweb & video/webcam recording. 🐞 🎥
https://github.com/joduplessis/buggable

feedback logging preact react rrweb screenshot webrtc

Last synced: 7 days ago
JSON representation

An embeddable bug reporting & screenshot creation component that integrates rrweb & video/webcam recording. 🐞 🎥

• Host: GitHub
• URL: https://github.com/joduplessis/buggable
• Owner: joduplessis
• Created: 2022-07-11T20:33:48.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2024-02-11T19:36:25.000Z (9 months ago)
• Last Synced: 2024-04-13T19:10:48.904Z (7 months ago)
• Topics: feedback, logging, preact, react, rrweb, screenshot, webrtc
• Language: JavaScript
• Homepage: https://joduplessis.com/work/buggable
• Size: 369 KB
• Stars: 8
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Buggable

Buggable is a small screenshot & user feedback component. It replicates the basic functionality of a tool like UserBack or UserSnap. It also adds a few nice things not found in those tools.

##### Screenshots



  

  

  

  

  

  

  

  



#### Some of the features it supports are:

- Optional "give feedback" button

- Custom triggering of the widget

- Console log capturing

- rrweb integration for recording sessions 🔥 

- Context mode (mini popup)

- Dark mode

- HTML & SVG image creation

- Flexible actions (clickable sections)

- Basic form building

- Custom rating component

- Video/audio/webcam recordings

- SVG markup tool

- Audio snippets when creating a mockup

#### Caveats

This was an experiment to see how hard it would be to replicate some of the functionality from the platforms above. So deployments are tricky, unfortunately. At the moment the flow is:

1. JS snippet on `index.html` page mounts the launcher widget & styles

2. Launcher widget sets up the tool and/or buttons

3. Mockups are created by mounting the screenshot app into an iframe on top of the launcher app

4. Logging & rrweb runs in the background on mount

5. Everything else is handled by the launcher app in a straightforward way

6. API calls are stubbed

For information on widget settings, see the `launcher/src/index.js` & `launcher/src/index.html` files.

For any questions, please feel free to open an issue (I will add more/better docs as soon as I can).