So I recently built a small open source project that lets you generate bug reports for your website with useful information that will give you more context and information on the details of the problem. The bug reporter will include helpful information such as: a screenshot of the page (generated with html2canvas), a copy of the console log, information about the user's device and much more. Instead of receiving bug reports with little information from non tech-savvy users, just generate the reports quickly with all the information you want!
How do I use the project
To use the bug reporter, just include the necessary files:
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.3.3/dist/html2canvas.min.js" integrity="sha256-QT3W6xEiCZLGc8yEu9fiRM+V1UlKjJ/WEfg1VXnFns4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/JackChilds/Bug-Reporter@main/dist/bugreporter.min.js"></script>
And then just call the generate function:
BugReporter.generate({
additionalInfo: [ // the additionalData array allows you to specify additional information to go alongside the bug report
['User feedback', 'some text'],
['More information', 'some more text'],
['An array of integers', [1,2,3,4,5]]
],
// default preferences:
cookies: true, // bug reporter will include cookie data
localStorage: true, // bug reporter will include localStorage data
sessionStorage: true, // bug reporter will include sessionStorage data
html: true, // bug reporter will include a copy of all the HTML on the page, tags with the 'data-bugreporter-hide' attribute will be omitted
windowLocation: true, // bug reporter will include window.location data
navigatorInfo: true, // bug reporter will include navigator data, including userAgent and language
takeSnapshot: true, // bug reporter will use html2canvas library to take a snapshot of the page. Note: you need to include html2canvas.js in your page
screenInfo: true, // bug reporter will include screen data
}, (data) => {
const d = JSON.parse(data);
// now do something with the data like send it to your server
});
Top comments (0)