Fix typescript definitions

[subzero10]

Status

READY

Description

This PR is for an issue on honeybadger-js: honeybadger-io/honeybadger-js#633
After some trial and error, this appears to be the simplest solution:

• Export type definitions for class Client (both Server and Browser) and set that as the type of the honeybadger prop of ErrorBoundary component.

Let me know what you think.

Related PRs

n/a

Todos

• Fix ts error when passing honeybadger client to ErrorBoundary component

Steps to Test or Reproduce

I tested this by creating a react app with the typescript template.
I then installed the honeybadger-react package and used it as in the docs.

> npx create-react-app honeybadger-react-ts-app --template typescript
> cd honeybadger-react-ts-app
> npm i "[email protected]:honeybadger-io/honeybadger-react.git#fix-ts-definitions"

2. Open src/index.tsx and do:

import Honeybadger from '@honeybadger-io/js';
import ErrorBoundary from '@honeybadger-io/react';

const apikey = (
    process.env.REACT_APP_HONEYBADGER_API_KEY ||
    prompt('Enter the API key for your Honeybadger project:') as string
);

const honeybadgerClient = Honeybadger.configure({
    apiKey: apikey,
    environment: 'production'
})

ReactDOM.render(
    <ErrorBoundary honeybadger={honeybadgerClient}>
    <App />
    </ErrorBoundary>,
  document.getElementById('root')
);

[joshuap]

@subzero10 thanks for looking into this!

I'm wondering, since we're already doing something similar in the honeybadger-js types, would it be possible to just import the Honeybadger type from honeybadger.d.ts in honeybadger-js? If not, then I think what you're doing works; it would just be nice if we didn't have to duplicate combining the types in dependent libraries.

[subzero10]

@subzero10 thanks for looking into this!

I'm wondering, since we're already doing something similar in the honeybadger-js types, would it be possible to just import the Honeybadger type from honeybadger.d.ts in honeybadger-js? If not, then I think what you're doing works; it would just be nice if we didn't have to duplicate combining the types in dependent libraries.

Good question! I have already tried that, but it doesn't work. I'm not 100% sure why but the explanation I gave to my self (for my own sanity!) is this:

• Honeybadger from Browser extends Client and has a new method: resetMaxErrors()
• Honeybadger from Server extends Client and has new methods, one being: lambdaHandler()
• ErrorBoundary component expects one of the two implementations above

The Honeybadger.configure() method call returns a Client class. The result, when passed into honeybadger prop of the ErrorBoundary component does not conform to any of the Server or Browser classes, i.e. it should have defined methods of at least of one of the two, but it doesn't since it's just an instance of a Client.
Does this make sense? Again, not 100% sure of this, just my theory.

[joshuap]

Thanks for the explanations! I'm good if you want to merge this, although #274 may supersede it?

[subzero10]

Thanks for the explanations! I'm good if you want to merge this, although #274 may supersede it?

Yeah, #274 would render this PR obsolete.
I think I will be able to have that done next week. If we have the time, we can wait for that PR.

[joshuap]

@subzero10 I'll go ahead and merge/release this in the meantime, and see if it fixes the issue the customer reported. Then #274 can replace it.