feat: collect user feedback

[subzero10]

Status

READY

Description

Closes: #943

Todos

• HTML Template
• Form styling
• Form submission (+ error control)
• User Feedback Options (i.e. custom message labels)
• Store and read last notice id
• Add prop on react component to allow showing the feedback form automatically
• Unit Tests
• Integration Tests
• Documentation
• Upload js script to CDN
• Bonus: Invalidate bunny.net (similar to how we invalidate cloudfront)

[subzero10]

Progress!

[subzero10]

I tried not to apply custom styling so that it would be adapted based on the user's CSS.

Form:

Success:

Error:

[stympy]

I tried not to apply custom styling so that it would be adapted based on the user's CSS.

I appreciate not wanting to push our own styling, but the mixture of serif (most text) and sans-serif (buttons) doesn't look great, and Times New Roman is meh. :) How about something like this (from CSS tricks):

#honeybadger-feedback {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

[subzero10]

I tried not to apply custom styling so that it would be adapted based on the user's CSS.

I appreciate not wanting to push our own styling, but the mixture of serif (most text) and sans-serif (buttons) doesn't look great, and Times New Roman is meh. :) How about something like this (from CSS tricks):

#honeybadger-feedback {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

Awesome, thanks!

[subzero10]

Much, much better!

[BethanyBerkowitz]

Cool! I had a few questions.

Also what's the best way for me to try this out? Use the React example project?

[subzero10]

Cool! I had a few questions.

Also what's the best way for me to try this out? Use the React example project?

Thanks for the review, I applied all your feedback!

I also committed my changes in the example apps to try this out locally:

1. Start the express app (needed to serve the feedback form script)

• cd packages/js/examples/express
• npm install
• node index.js
• verify that the feedback form script is available by visiting http://localhost:3000/feedback-form

2. I used the webpack example project to test the form

• (in a new terminal) cd packages/js/examples/webpack
• npm install
• uncomment line 12 in packages/js/examples/webpack/main.js
• npm run build
• open the index.html page with chrome
• click on Throw an error.
• open chrome dev tools and verify that hb.__lastNoticeId prints out a notice id
• still in dev tools, call hb.showUserFeedbackForm() to show the feedback form

With a couple of tweaks, I think you should be able to use the react example app instead of the webpack one.

[joshuap]

Cool! I had a few questions.
Also what's the best way for me to try this out? Use the React example project?

Thanks for the review, I applied all your feedback!

I also committed my changes in the example apps to try this out locally:

1. Start the express app (needed to serve the feedback form script)

• cd packages/js/examples/express
• npm install
• node index.js

2. I used the webpack example project to test the form

• (in a new terminal) cd packages/js/examples/webpack
• npm install
• uncomment line 12 in packages/js/examples/webpack/main.js
• npm run build
• open the index.html page

With a couple of tweaks, I think you should be able to use the react example app instead of the webpack one.

I tried following these instructions, and while it's setting hb.__lastNoticeId in the console, it's not showing the feedback form after the error is reported.

[subzero10]

@joshuap That's because I left out the most important part 🤦 .

You will need to call hb.showUserFeedbackForm() after the error is reported (after __lastNoticeId is set).
I updated the instructions above.

Here are a few screenshots on what you should expect in the console and network tabs of dev tools:

[BethanyBerkowitz]

@subzero10 I pulled your branch and did npm run build within the packages/js folder and got a few ts errors (see below). I haven't looked further into it yet, maybe you know why?

The reason I even ran the build command is because I followed your test instructions and didn't get the error reported correctly, and I noticed that /packages/js/examples/webpack/main.js pulls from /packages/js/dist, so I figured I might need to rebuild.

bethanyberkowitz@Bethanys-MBP js % npm run build

> @honeybadger-io/js@4.8.2 build
> tsc --build tsconfig.json && rollup -c && node ./scripts/copy-typedefs.js && node ./scripts/generate-feedback-form-assets.js

src/browser.ts:97:52 - error TS2694: Namespace '"/Users/bethanyberkowitz/projects/honeybadger/honeybadger-js/packages/js/node_modules/@honeybadger-io/core/build/src/types"' has no exported member 'UserFeedbackFormOptions'.

97   public async showUserFeedbackForm(options: Types.UserFeedbackFormOptions = {}) {
                                                      ~~~~~~~~~~~~~~~~~~~~~~~

test/unit/helpers.ts:30:50 - error TS2694: Namespace '"/Users/bethanyberkowitz/projects/honeybadger/honeybadger-js/packages/js/node_modules/@honeybadger-io/core/build/src/types"' has no exported member 'UserFeedbackFormOptions'.

30   protected showUserFeedbackForm(_options: Types.UserFeedbackFormOptions): Promise<void> {
                                                    ~~~~~~~~~~~~~~~~~~~~~~~


Found 2 errors.

[subzero10]

@BethanyBerkowitz I had this happen to me a couple of times. I resolved it by removing all node_modules from all folders (root and packages) and running npm install from the root.

This happens because sometimes the internal packages that are dependencies (i.e. @honeybadger-io/core) are not properly linked in node_modules but copied instead. I don't know why it happens and I wasn't able to reproduce in a way to be able to investigate further.

[subzero10]

@joshuap, @BethanyBerkowitz and I just realized another thing. Probably you already know about it, but pointing it out here just in case:

• in order to test this locally, you need to serve the index.html file from a local web server (i.e. localhost, not file://...)
• for vs code, you can do that with a plugin
• for intellij (jetbrains), you can do that by opening the html file in the IDE and clicking on the browser icon on the top right of the file

[BethanyBerkowitz]

Awesome, this worked for me on the webpack example project! Was able to see my feedback in HB.

[joshuap]

It worked for me too! 👌

[subzero10]

I think all feedback has been resolved.
@BethanyBerkowitz @joshuap Can I please get an approval to merge and release?

[stympy]

@subzero10 do you want to switch to the /v2/feedback endpoint with authentication?

[subzero10]

@subzero10 do you want to switch to the /v2/feedback endpoint with authentication?

I was planning to do it in a separate PR, but I tried on this one since you suggested :)

And... It's not working for some reason. Is the change deployed on the backend?

I'm getting a 301 Redirect and then a 403. I looked at my project and verified that the comment is not added to the notice.

Note: I'm issuing a GET request (which should be OK according to this. I can't do a POST request because of the implementation.

[stympy]

Ah, it is not deployed — I added the new endpoint to the wrong repo. :) I have a PR ready, so it should be deployed soon.

[stympy]

Ok, now you should be good for testing

[subzero10]

Update with the latest commits:

• I switched to the v2 endpoint which requires an api key
• I made the user feedback endpoint part of the configuration options; defaults to https://api.honeybadger.io/v2/feedback
• I added some more error control (caught while testing the v2 endpoint)
• I updated the docs PR to include the new configuration parameter

@stympy This is ready for final review. I will merge with your approval. Thanks!

[stympy]