JSON

The User Bug Report BugButton generates a JSON document, and communicates with the User Bug Report server over HTTP. This JSON is "what's posted".

Integration make use of this JSON data, for example -- stored in whole for S3 integrations, or formatted nicely for Email integrations.

The important thing though is -- all the stuff in the JSON! User Bug Report aims to tell you everything you need to know to fix a bug without going back to your users.

Fields

userbugreport

This is a user defined data set -- passed in through the BugButton or ambient on window.userbugreport.

location

Snapshot from the browser location with all the properties about the URL, here's an example:

"location": {
"ancestorOrigins": {},
"href": "http://localhost:4000/",
"origin": "http://localhost:4000",
"protocol": "http:",
"host": "localhost:4000",
"hostname": "localhost",
"port": "4000",
"pathname": "/",
"search": "",
"hash": ""
}

form

These are the fields filled in by the user in the bug submission form.

"form": {
"title": "Wellcome is spelled incorrectly",
"description": "You should change it to 'Welcome'"
}

screenshot

Data uri encoded version of the screenshot. You can use this directly in an img tag.

screenshotSize

Dimensions for the screenshot -- the browser size when the user pushed the button.

"screenshotSize": { "width": 1262.46875, "height": 867 }

notes

An array of note pins users left on your screenshot.

"notes": [{
"id":"7ebcf985-f7dc-4b78-9e17-b346dd910a0a",
"pinHead":{"x":100,"y":100},
"selected":true,
"text":"Here is a note",
"size":{"width":64,"height":32}
}]

buffer

An array of console messages captured by the browser. This can get big, but is supremely useful to see what was going on before a user hit the bug button.

This example below was captured with the wonderful Debug library which generates colored strings.

"buffer": [
{
"when": "2020-10-24T14:28:06.855Z",
"level": "log",
"data": [
"%cUser Bug Report:BugButton %cattaching modal holder%c +0ms",
"color: #3399FF",
"color: inherit",
"color: #3399FF"
]
}
]

navigator

Information about the browser, from the browser. I'm using Chrome on my Mac at the moment.

"navigator": {
"vendorSub": "",
"productSub": "20030107",
"vendor": "Google Inc.",
"appCodeName": "Mozilla",
"appName": "Netscape",
"appVersion": "5.0 (Macintosh; Intel Mac OS X 11_0_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.80 Safari/537.36",
"platform": "MacIntel",
"product": "Gecko",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 11_0_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.80 Safari/537.36",
"language": "en-US"
}

networkRequests

Using the browser debug and profiling capability, an array of network requests. Super handy to see if your server or a server you rely on is failing you.

Or -- if it is too slow!

"networkRequests": [
{
"name": "http://localhost:4000/styles.css",
"initiatorType": "link",
"redirectTime": 0,
"dnsTime": 0,
"tcpHandshakeTime": 0,
"secureConnectionTime": 0,
"responseTime": 0.4600000102072954,
"fetchUntilResponseEndTime": 22.409999975934625,
"requestStartUntilResponseEnd": 0.6849999772384763,
"startUntilResponseEnd": 22.409999975934625
}
]

localTime

Knowing when from the client point of view can tell you if clock skew or time zone bugs are plaguing you.

"localTime": "Sat Oct 24 2020 09:37:07 GMT-0500 (Central Daylight Time)"