Grab browser information for feedback box submitted issues

[JonellaCulmer]

What we're after: Consider if we can capture additional helpful information, such as browser/browser version, or other data, for issues submitted via the feedback box.

I hesitate to include additional form questions to the form from fear that users will see it as a burden to submitting an issue, so wondering if we grab this information similar to how we grab the URL.

Related issue:

• Unable to close feedback box FEC#8970

Completion criteria:

• Investigate what our options are for including more information for feedback box submitted issues.
  - [ ] Open follow-up ticket for implementation, as appropriate
• Verify if we have access to the CloudFront dashboard for making changes that would allow us to return user-agent info in headers
• Put hidden fields in the feedback box that use JS to return user-agent and possible more info like OS, device(mobile or desktop) etc.

[lbeaufort]

It looks like the HTTP_USER_AGENT header should be the browser but is being overwritten by the CloudFront, which is why it always comes back as "Amazon CloudFront"

See https://forums.aws.amazon.com/thread.jspa?messageID=420294#420294
It looks like we might be able to get the header another way: https://aws.amazon.com/blogs/aws/enhanced-cloudfront-customization/

Any headers added by CloudFront will be prefixed with CloudFront-. You can use the User Agent header to identify and discriminate between desktop and mobile devices, and to provide content that is suitable for and appropriate to each one.

[johnnyporkchops]

Using CF headers to get the user agent seems like it might be a bit involved and also require at least some maintenance in AWS dashboard.

• Looking into wether we can use Google Tag Manager User Agent var to get the browser
• Or just straight JS user agent sniffing--a decidedly inexact science.

[johnnyporkchops]

Headers solution: First we need to verify if we have access to the CloudFront dashboard for making changes that would allow us to return user-agent info in headers?
Possible JS solution: We can put hidden fields in the feedback box that use JS to return user-agent and possible more info like OS, device(mobile or desktop) etc. User-agent sniffing is an inexact practice as the strings returned can often change or be sent in differing formats, but in this case, it only has to be human-readable for us to decipher what user-agent (browser) the submitter was using.

[patphongs]

We need the feedback box working on stage.fec.gov and dev.fec.gov, currently it is not working. Those domains utilize the CDN service. After this is fixed we can try implementing one of the solutions above from @johnnyporkchops

Error when submitting to stage.fec.gov feedback box

[dorothyyeager]

I've put in an issue to fix broken feedback box in stage.fec.gov and dev.fec.gov. As Pat notes, that problem is blocking this issue from being completed.

[rfultz]

At least in Chrome, here are some variables easily available to us, along with some sample values.

window.navigator.connection.downlink: 5.8
window.navigator.language: "en-US"
window.navigator.maxTouchPoints: 0
window.navigator.platform: "MacIntel"
window.navigator.userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome..."

window.outerHeight: 1023
window.outerWidth: 1694
window.pageXOffset: 0
window.pageYOffset: 0
window.screen.colorDepth: 24
window.screen.height: 1080
window.screen.width: 1920
window.scrollX: 0
window.scrollY: 0