DEV Community

JackChilds
JackChilds

Posted on

Bug reports with useful information

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!

Demo | Dashboard | Github

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>
Enter fullscreen mode Exit fullscreen mode

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
});
Enter fullscreen mode Exit fullscreen mode

GitHub logo JackChilds / Bug-Reporter

Quickly create bug reports for your website with useful information for debugging.

Discussion (0)