Bug reports with useful information

JackChilds — Tue, 30 Nov 2021 17:49:35 +0000

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>

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
});

JackChilds / Bug-Reporter

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

Read Databases With JS

JackChilds — Sun, 01 Nov 2020 18:43:12 +0000

With JSMYSQLDB you can use plain Javascript to access MySQL databases on your server.

Check it out: https://github.com/JackChilds/jsmysqldb/

Use Vanilla JS to read MYSQL databases

JackChilds — Sat, 31 Oct 2020 14:33:44 +0000

I have recently built a project that allows you to read mysql databases on your server.

Example of how to read table 'blog_posts' and output the first 100 posts into a table:

const config = {
  "table" : "blog_posts",
  "limit" : "100",
  "offset" : "0"
};
_POST_REQUEST("link-to-server/database.php", 'config=' + JSON.stringify(config), (response) => {
  document.querySelector('#myTableContainer').innerHTML = _json2table(JSON.parse(response));
});

See Github: https://github.com/JackChilds/jsmysqldb