Skip to content

Instantly share code, notes, and snippets.

@jksdua
Created January 21, 2014 13:59
Show Gist options
  • Save jksdua/8540578 to your computer and use it in GitHub Desktop.
Save jksdua/8540578 to your computer and use it in GitHub Desktop.
Bug reporting HTML template - see comment for more details :)
<html>
<head>
<title>Report a Bug</title>
<style type="text/css">
/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* add more styles here */
</style>
</head>
<body>
<header><span class="title">Report a Bug</span></header>
<!-- It is assumed that a POST route exists for the same URL from which this file is served. Modify the action attribute to the desired URL -->
<form method='POST' action='./'>
<p>We apologise for the inconvenience. Please describe the issue you are facing and we will get back to you with a fix.</p>
<fieldset>
<label for='issue-description'>Describe your issue below</label>
<textarea id='issue-description' name='issue-description'></textarea>
</fieldset>
<fieldset>
<label for='email'>Your email address</label>
<p class='helper'>Please provide your email address if you are happy for us to contact you when the bug has been fixed or in case we need additional information.</p>
<input type="email" id='email' name='email'>
</fieldset>
<input type="hidden" id="client-info" name="client-info" value=''>
<noscript>
<input type="hidden" id="javascript-disabled" name="javascript-disabled" value="true">
</noscript>
<button type="submit">Submit Report</button>
</form>
<!-- Replace the following source with your local copy -->
<script src="https://raw2.github.com/bestiejs/platform.js/master/platform.js"></script>
<script type="text/javascript">
var info = {
/* Include any other info relevant to the app here. In this case, we are including the user profile */
//user: JSON.parse(localStorage.UserProfile || '{}'),
/* platform is a global variable made available by platform.js */
platform: platform,
language: navigator.language || navigator.userLanguage,
viewport: {
width: window.innerWidth,
height: window.innerHeight
}
}
document.getElementById('client-info').value = JSON.stringify(info);
</script>
</body>
</html>
@jksdua
Copy link
Author

jksdua commented Jan 21, 2014

Bug reporting HTML template

  • Includes JS for collecting client device information also known as browser detection.
  • Makes use of the awesome platform.js library which is well tested and has extensive device support.
  • Reports whether JS is disabled to the server
  • Returns more useful information than just the user agent string.

Tips

  • Make sure to keep the template as basic as possible. Use very minimal JS and CSS to avoid the bug reporting from having errors itself. By default, Javascript is only used for collecting client device information. Form is submitted using a traditional page load.
  • Detect whether the Javascript disabled variable is set and that client information is populated. Otherwise, use platform.js (Node.js) or similar libraries server side to perform platform detection using the User-Agent header.

@physics1514
Copy link

Can I read the reports??

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment