Bugsnag-js: [@bugsnag/plugin-react] createErrorBoundary() type

[antoinerousseau]

Using TS 3.9.3, with

export const ErrorBoundary = Bugsnag.getPlugin("react")?.createErrorBoundary(React)

I get this error:

JSX element type 'ErrorBoundary' does not have any construct or call signatures.
ts(2604)

[mattdyoung]

Hi @antoinerousseau

Can you confirm which version of bugsnag-js you're using? The syntax above was only introduced in v7.1.0, so wouldn't be expected to work on earlier versions.

[antoinerousseau]

Yes I'm talking about v7.1.0

[mattdyoung]

Hi @antoinerousseau

I don't get that error using typescript 3.9.3 and bugsnag-js 7.1.0. Can you share a complete reproduction example including all of your Bugsnag initialization code?

[antoinerousseau]

Ok, as I was trying to make a reproduction example, I realized that it's because createErrorBoundary() can return undefined, as clearly mentioned in the doc, my bad, so I should test for the existence of its return value.

const children = (
  <UserProvider>
    <App />
  </UserProvider>
)
return ErrorBoundary ? (
  <ErrorBoundary FallbackComponent={ErrorComponent}>{children}</ErrorBoundary>
) : (
  children
)

Sorry for the false alarm!

Also it would be cool to export the BugsnagErrorBoundary and BugsnagPluginReactResult types.

In particular, I would like to write this:

const plugin = Bugsnag.getPlugin("react") as BugsnagPluginReactResult
export const ErrorBoundary = plugin.createErrorBoundary()

Because I know the plugin exists, and this would simplify the use of the boundary since it wouldn't be "possibly undefined"