[Bug Reporter Library]
bug-tracker-library is a library for reporting the bug and generating a bug report.
Installation
For adding the library in your App, run following command :
$yarn add bug-tracker-library
Steps: to use this library in your project:
-
Add this library to your application by doing
import BugReporter from bug-tracker-ibrary
-
If your project didn't use
antd Modal
then add the following lineimport 'antd/dist/antd.css';
-
Provide the buttonStyle prop to library to set the position of button or else it will take default style as -
{ position: "fixed", bottom: 90, right: 100 }
5.Can provide name
and email
of the persion sending the report
- provide a API end-point as url prop for a post request call, to which it will submit a object with keys -
{image: , description: , ipAddress: , email: , browserName: , path: }
and where image
will hold image url of final marked image, description
will hold bug description provided, path
will hold path of the page url where bug is been reported, email
will hold email address of the user who is reporting that bug, ipAddress
will hold IP address and browserName
will hold current browser name where application is been executed.
How to use this libraray-
- Include this in your script.
How it works
<BugReporter buttonStyle={{ position: "fixed", bottom: 90, right: 100, zIndex:2000 }} url={"http://localhost:8000/add"} name="Bob" email="bob.b@gmail.com" appName="bugTracker" />
How it works
-
Once this library is added user will get a button in that application. by clicking it will be hold the screen where they can take the screenshot, then it take into a Modal where they can have marker to chose different color and different size.now using it they can mark multiple bugs and put a description on each.
-
User will get reset button for reset your Modal screen and close button to close that model
-
also user can get one description box bellow the Modal where can describe more information and submit button will do a POST http request and all the useful information will send onto that given url end-point and will store there into database.
External Library it uses
-
@ant-design/icons
-
antd
-
html-to-image
-
react-screen-capture
-
react-zoom-pan-pinch