[Bug Reporter Library]

bug-tracker-library is a library for reporting the bug and generating a bug report.

Installation

Note: Use yarn instead of npm

For adding the library in your App, run following command : $yarn add bug-tracker-library

Steps: to use this library in your project:

1. Add this library to your application by doingimport BugReporter from bug-tracker-ibrary

2. If your project didn't use antd Modal then add the following line import 'antd/dist/antd.css';

3. 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

6. 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="[email protected]" 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

1. @ant-design/icons

2. antd

3. html-to-image

4. react-screen-capture

5. react-zoom-pan-pinch