feat: collect user feedback #965

subzero10 · 2022-12-03T09:47:47Z

Status

READY

Description

Closes: #943

Todos

Closes: #943

packages/core/src/client.ts

subzero10 · 2022-12-03T09:52:15Z

Progress!

Refs: #943

subzero10 · 2022-12-03T19:53:01Z

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

Form:

Success:

Error:

packages/js/assets/user-feedback-form.js

stympy · 2022-12-05T16:34:28Z

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 · 2022-12-05T19:57:30Z

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 · 2022-12-10T06:53:52Z

Much, much better!

Refs: #943

# Conflicts: # packages/js/src/browser.ts

Refs: #943

Closes: #943

packages/js/test/integration/test.js

Refs: #943

packages/js/src/browser.ts

packages/js/assets/user-feedback-form.js

BethanyBerkowitz

Cool! I had a few questions.

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

packages/js/assets/user-feedback-form.js

packages/js/test/unit/browser.test.ts

packages/react/src/HoneybadgerErrorBoundary.tsx

packages/core/src/types.ts

packages/js/assets/user-feedback-form.js

Refs: #943

…or testing locally Refs: #943

subzero10 · 2023-01-04T07:56:03Z

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:

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

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 · 2023-01-04T21:48:15Z

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:

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

cd packages/js/examples/express

npm install

node index.js

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.

# Conflicts: # packages/react/package-lock.json

subzero10 · 2023-01-05T07:13:21Z

@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:

Refs: #943

BethanyBerkowitz · 2023-01-05T16:01:35Z

@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/[email protected] 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 · 2023-01-05T16:09:22Z

@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 · 2023-01-05T16:47:04Z

@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 · 2023-01-05T16:52:31Z

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

joshuap · 2023-01-06T00:26:49Z

It worked for me too! 👌

subzero10 · 2023-01-06T09:33:14Z

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

stympy · 2023-01-06T12:58:13Z

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

subzero10 · 2023-01-07T09:38:33Z

@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 · 2023-01-10T17:36:48Z

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 · 2023-01-10T18:15:11Z

Ok, now you should be good for testing

Refs: #943

subzero10 · 2023-01-13T08:42:34Z

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

feat: collect user feedback

b987e03

Closes: #943

subzero10 added enhancement js @honeybadger-io/js labels Dec 3, 2022

subzero10 self-assigned this Dec 3, 2022

subzero10 commented Dec 3, 2022

View reviewed changes

packages/core/src/client.ts Outdated Show resolved Hide resolved

subzero10 added 3 commits December 3, 2022 13:27

chore: support for options

e883247

Refs: #943

chore: footer design

faa030d

Refs: #943

chore: more css and error control

625563f

Refs: #943

subzero10 commented Dec 3, 2022

View reviewed changes

packages/js/assets/user-feedback-form.js Outdated Show resolved Hide resolved

packages/js/assets/user-feedback-form.js Outdated Show resolved Hide resolved

subzero10 added 16 commits December 10, 2022 09:21

chore: upload feedback form script to cdn

3e47fc7

Refs: #943

chore: use ref, not master branch

3b5d0c2

Refs: #943

chore: optimize workflow

aa095e4

Refs: #943

chore: update lock files

8a7e07e

Refs: #943

chore: add lock file for gatsby plugin

e626b23

Refs: #943

chore: set alpha tag to test cdn upload

9798611

Refs: #943

chore: revert version bump

3869b16

Refs: #943

Merge branch 'master' into user_feedback_#943

d0fa9ec

# Conflicts: # packages/js/src/browser.ts

chore: merge with master

deef378

Refs: #943

chore: submit feedback with script tag

dc267cf

Refs: #943

Merge branch 'master' into user_feedback_#943

5c06063

chore: unit tests

5b0a793

Closes: #943

chore: integration tests

6418f82

Closes: #943

chore: bring back isIE

0e24f32

Closes: #943

chore: fix firefox integration

b1e8aeb

Closes: #943

chore: attempt#2 fix firefox integration

44c8b45

Closes: #943

subzero10 commented Dec 30, 2022

View reviewed changes

packages/js/test/integration/test.js Show resolved Hide resolved

chore: remove console.lo

6153545

Refs: #943

subzero10 commented Dec 30, 2022

View reviewed changes

packages/js/src/browser.ts Show resolved Hide resolved

packages/js/assets/user-feedback-form.js Show resolved Hide resolved

packages/js/assets/user-feedback-form.js Show resolved Hide resolved

packages/js/assets/user-feedback-form.js Show resolved Hide resolved

BethanyBerkowitz reviewed Jan 3, 2023

View reviewed changes

subzero10 added 2 commits January 4, 2023 09:41

chore: apply pr review feedback

3732cd1

Refs: #943

chore: add route in express example app to fetch user feedback form f…

1ebbef7

…or testing locally Refs: #943

subzero10 added 2 commits January 5, 2023 08:52

Merge branch 'master' into user_feedback_#943

0d980a9

# Conflicts: # packages/react/package-lock.json

chore: generate new package-lock files

87d59e1

chore: don't show feedback form more than once if visible

c6d3e96

Refs: #943

chore: change to v2 feedback endpoint

a58440a

Refs: #943

subzero10 force-pushed the user_feedback_#943 branch from cf11503 to a58440a Compare January 13, 2023 08:21

chore: fix integration tests

3ebd91e

Refs: #943

subzero10 force-pushed the user_feedback_#943 branch from a58408e to 3ebd91e Compare January 13, 2023 08:36

stympy approved these changes Jan 13, 2023

View reviewed changes

subzero10 merged commit 0842f0a into master Jan 14, 2023

stympy mentioned this pull request Mar 10, 2023

Collect user feedback honeybadger-io/honeybadger-elixir#473

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: collect user feedback #965

feat: collect user feedback #965

subzero10 commented Dec 3, 2022 •

edited

Loading

subzero10 commented Dec 3, 2022

subzero10 commented Dec 3, 2022 •

edited

Loading

stympy commented Dec 5, 2022

subzero10 commented Dec 5, 2022

subzero10 commented Dec 10, 2022

BethanyBerkowitz left a comment

subzero10 commented Jan 4, 2023 •

edited

Loading

joshuap commented Jan 4, 2023

subzero10 commented Jan 5, 2023

BethanyBerkowitz commented Jan 5, 2023

subzero10 commented Jan 5, 2023

subzero10 commented Jan 5, 2023

BethanyBerkowitz commented Jan 5, 2023

joshuap commented Jan 6, 2023

subzero10 commented Jan 6, 2023

stympy commented Jan 6, 2023 •

edited

Loading

subzero10 commented Jan 7, 2023

stympy commented Jan 10, 2023

stympy commented Jan 10, 2023

subzero10 commented Jan 13, 2023 •

edited

Loading

stympy left a comment

feat: collect user feedback #965

feat: collect user feedback #965

Conversation

subzero10 commented Dec 3, 2022 • edited Loading

Status

Description

Todos

subzero10 commented Dec 3, 2022

subzero10 commented Dec 3, 2022 • edited Loading

stympy commented Dec 5, 2022

subzero10 commented Dec 5, 2022

subzero10 commented Dec 10, 2022

BethanyBerkowitz left a comment

Choose a reason for hiding this comment

subzero10 commented Jan 4, 2023 • edited Loading

joshuap commented Jan 4, 2023

subzero10 commented Jan 5, 2023

BethanyBerkowitz commented Jan 5, 2023

subzero10 commented Jan 5, 2023

subzero10 commented Jan 5, 2023

BethanyBerkowitz commented Jan 5, 2023

joshuap commented Jan 6, 2023

subzero10 commented Jan 6, 2023

stympy commented Jan 6, 2023 • edited Loading

subzero10 commented Jan 7, 2023

stympy commented Jan 10, 2023

stympy commented Jan 10, 2023

subzero10 commented Jan 13, 2023 • edited Loading

stympy left a comment

Choose a reason for hiding this comment

subzero10 commented Dec 3, 2022 •

edited

Loading

subzero10 commented Dec 3, 2022 •

edited

Loading

subzero10 commented Jan 4, 2023 •

edited

Loading

stympy commented Jan 6, 2023 •

edited

Loading

subzero10 commented Jan 13, 2023 •

edited

Loading