bug-reporter-lib v1.0.1
Bug Reporter Library
A react library for reporting a bug from your application.
🎁 Features
Take a snapshot of the webpage's screen or part of the screen and report a bug.
Along with snapshot, it stores and sends details such as Image URL, Description, IP-Address, Email, Browser's Name and Path.
Compatible with any webpage. Easy to use.
🔧 Install
bug-reporter-lib is available on npm. It can be installed with the following command:
npm install bug-reporter-lib --save
bug-reporter-lib is available on yarn as well. It can be installed with the following command:
yarn add bug-reporter-lib
💡 Usage
- Add this library to your application :
import BugReporter from 'bug-reporter-lib'
- If your project dosen't have
antd Modal
then, add the following line :
import 'antd/dist/antd.css';
- Save the buttonStyle into library to style the button, else it takes default style as -
{ position: "fixed", bottom: 90, right: 100 }
It collects the
name
andemail
of the person sending the report.Provide an API end-point which will send a URL as a post request call, that will return an object with keys -
{ image: , description: , ipAddress: , email: , browserName: , path: }
,
where image
will store the image's url of final marked image, description
will store the bug's description provided, path
will store the address of the page url where bug is been reported, email
will store email address of the user who is reporting that bug, ipAddress
will store the IP Address and browserName
will store current browser's name where application is been executed.
- Above mentioned informations can be used to report and track the type of bug along with the bug reporting person's details.
🧰 How to use Bug Reporter Library
Include these in your common component's script :
<BugReporter
buttonStyle={{ position: "fixed", bottom: 90, right: 100, zIndex:2000 }}
url={"http://localhost:8000/add"}
name="Bob"
email="bob.b@gmail.com"
appName="bugTracker"
getStatus={getStatus}
/>
// Shows Message Response
const getStatus = (message, message_type)=>{
message_type ? message.success(message) : message.error(message)
}
🐛 How Bug Reporter Library works
Once this library is added, user will get a button in their application. On clicking, it will hold the screen where they can take the screenshot.
It takes you into a Modal where a option is displayed to choose different colours and sizes. Using that one can mark multiple bugs and put a description on each.
User will have a reset button to reset the Modal screen and a close button to close that model.
Also, the user gets one description box below the Modal where one can provide additional information. Submit button will do a POST HTTP request and all the useful information will be sent onto that given URL end-point and will be stored into the database.
By performing the above mentioned steps, one can report a bug and keep track of that bug along with the details of the person reporting the bug.
❗ Issues
If you think any of the bug-reporter-lib can be improved, please do open a PR with any updates and submit any issues. Also, we will continue to improve this, so you might want to watch/star this repository to revisit.
🤝 Contribution
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
How to contribute:
- Open pull request with improvements
- Discuss ideas in issues
- Spread the word
- Reach out with any feedback
🗄️ External Libraries used
@ant-design/icons
antd
html-to-image
react-screen-capture
react-zoom-pan-pinch
2 years ago