bug-reporter-react

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-react is available on npm. It can be installed with the following command:

npm install bug-reporter-react --save

bug-reporter-react is available on yarn as well. It can be installed with the following command:

yarn add bug-reporter-react

💡 Usage

• Add this library to your application :

import BugReporter from 'bug-reporter-react' 

• 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 and email 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="[e-mail]"
          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.

🗄️ External Libraries used

• @ant-design/icons

• antd

• html-to-image

• react-screen-capture

• react-zoom-pan-pinch