Polymer 1.x form for bug reporting in SPA's
Captures:
- Name of user, email of user and a user provided description of the issue.
- Any stack traces of errors captured by
window.onerror
.- These are the same stack traces you would see in the browser console when an error is thrown.
- The current date.
- Some basic system info:
- Browser vendor and version.
- OS vendor and version.
$ bower install --save bug-reporter
<button id="report-bug">Report a Bug</button>
<bug-reporter url="https://my-api.com/bug"></bug-reporter>
<script>
window.onload = () => {
document.querySelector('report-bug').addEventListener('click', () => {
document.querySelector('bug-reporter').toggle()
})
}
</script>
When the user fills in the required information and clicks "Submit", the form
will issue a POST
request to the provided url
in the following format:
method: `POST`,
body: '{
"name": "John Doe",
"email": "[email protected]",
"description": "Lorem ipsum dolor\nsit amet.",
"datetime": "Thu Feb 22 2018 04:26:05 GMT+0200 (EET)",
"stackTraces": [],
"system": {
"ua": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36",
"browser": {
"name": "Chrome",
"version": "64.0.3282.140",
"major": "64"
},
"engine": {
"name": "WebKit",
"version": "537.36"
},
"os": {
"name": "Mac OS",
"version": "10.12.6"
},
"device": {},
"cpu": {}
},
"url": "https://foo-app.com"
}'
First, make sure you have the Polymer CLI installed.
Then run:
$ polymer serve
to serve the element documentation.
$ polymer test
- MIT