fix(react): import correctly @honeybadger-io/js

[subzero10]

Fixes: #1020

Status

READY

Description

This was a brain teaser 😓 .
This PR fixes a bug I introduced with the release of the Collect User Feedback feature. The bug was introduced because I couldn't run the tests 🤦 .

Some context:

• With the "Collect User Feedback", I added a new property in the react component to show the form automatically in case of an error (showUserFeedbackForm)
• I created a test for it, but it was failing with HTTP 403, even though I tried mocking the fetch api. I realised that it was importing the server implementation of Honeybadger (as it is the main entry point of the @honeybadger-io/js package.
• So, since we always need the client side implementation, I changed the import to be explicit and imported @honeybadger-io/js/dist/browser.
• Hooray! My tests passed!

This is what I missed:

• Some frameworks use SSR, and in this case importing the browser implementation will create errors; and this is what happens with the next.js app.

The fix:

• Always import @honeybadger-io/js and let bundlers decide which entry point to use depending on the environment. I tested this in @BethanyBerkowitz's repo by adding a line in _app.js:

// honeybadger.errorHandler should exist only on server implementation
console.log(typeof window === 'undefined' ? 'server' : 'browser', honeybadger.errorHandler) 

When running npm run dev, I get this on the terminal:

server [Function: bound errorHandler]

and this on the browser console:

browser undefined

Which indicates that everything is imported correctly.

• Fixing the tests: jest supports a resolver config which can be used for these cases (to make it respect the browser field in package.json). However, it's not supported in react-scripts so I explicitly import the browser implementation.

[BethanyBerkowitz]

This was a tricky one! Glad you were able to find it.