Using feedback.js to Submit Issue Report With a Screenshot to BugDigger

BugDigger tools help you report web site issues more efficiently automatically attaching screenshots, page URL’s and other contextual data to your bug reports. BugDigger users generally need a browser add-on for this purpose but recently released REST (and JavaScript) APIs open some new possibilities. Until BugDigger provides own widget, I thought it would be a nice exercise to use feedback.js for form and screenshot capturing and then submit all data to BugDigger.

It wasn’t too hard and, as can be seen from the screenshot bellow, I ended up with an issue report containing:

  • Environment details (web page, browser, OS, etc.)

  • Screenshot

  • List of cookies

  • Attached page source (linked in the column right)

  • and some other custom data added

Let’s start… (BTW, fully working example can be downloaded at the end of the post.)

Step 1: Patch feedback.js

The current version of feedback.js does not allow you to pass callback function and handle click on “Send form”. To workaround this, edit feedback.js and add lines 586 and 587 bellow:

1
2
3
4
5
                    modalBody.appendChild( message );

                    if(options.onSubmit)  // added this and the next line
                        nextButton.onclick = options.onSubmit;
                },

Step 2: Add feedback.js and BugDigger’s api.js to your HTML page

1
2
3
4
5
...
  <script src="/path-to-patched-feedback-js/feedback.js" type="text/javascript"><!--mce:0--></script>

  <script src="https://my.bugdigger.com/api.js" type="text/javascript"><!--mce:1--></script>
...

Step 3: Add feedback form submission code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
$(function(){
  Feedback.init({
      h2cPath: "http://experiments.hertzen.com/jsfeedback/libs/html2canvas.js",

      onSubmit: function() {
          var msg = $('.feedback-body textarea').val();
          var imageData;
          var canvass = $('canvas.feedback-canvas-complete');
          if(canvass.length > 0)
              imageData = canvass[0].toDataURL();
          sendDataToBugDigger(msg, imageData);
          $('div.feedback-header .close').click(); // closing feedback modal
      }
  });

  function sendDataToBugDigger(message, imageData)
  {
      var report = new BugDigger.Report(message);

      report.data.collectBrowserInfoOnServer = true;

      report.data.environment = {
          webPage: document.location.href,
      };

      if(imageData) {
          report.addScreenshot(imageData);
      }

      report.addCookies();

      report.addCurrentPageSource();

      // adding some extras for fun and BD testing...

      report.addNameValueSet('Misc.', {
          Referrer: document.referrer
      });

      report.addNameValueSet('Just testing...', {
          My_Data: 'hello there',
          'User name': 'Joe',
          Int_value: 135634
      });

      report.data.userName = 'Edison';
      report.data.userEmail = 'someone @ example.com';

      report.data.getPublicAccessUrl = true;

      report.send({

          apiKey: 'lbulgmwPEJkCFr3Cv2z3kPT44eCcVjVII6XicqpNkT8dFOqbr8i',

          success: function(response) {
              alert('Thank you for your feedback!' +
                  "\n\nFor testing: " +
                  "\n Protected access URL: " + response.issueUrl +
                  "\n Public access URL: " + response.issueUrlPublic
                  );
          },

          error: function(jqXHR, textStatus, errorThrown) {
              var msg = 'Error sending issue report to BugDigger';
              try {
                  var response = $.parseJSON(jqXHR.responseText);
                  if(response.error)
                      msg += '\n' + response.error;
              } catch(e) {}
              alert(msg);
          }
      });
  }
});

The code above is self explanatory I think; for more details see BugDigger’s JavaScript API.

Step 4: Register on BugDigger and get your API key

Open free BugDigger account. (With the free account you cannot create a project and setup forwarding of issue reports to email or external issue tracker, but it’s not really necessary for API testing.)

After you sign-in, click on Integration and at the bottom of the page you’ll find your User API Key. Copy the key to the JavaScript section (line 53 above).

Step 5: Open your HTML page and test the feedback button

After submitting the form, give it few seconds as (for now) there’s no visual feedback while data is being uploaded to BugDigger. If all goes fine, you’ll get a message thanking you for your feedback.

If you don’t see the submitted issue on your BugDigger account, make sure you selected option “view owned by Me” on My bug reports page.

That’s it. Hope you’ll find this useful.

P.S. You can download working example here.

Comments