Params not passed on notify method with React ErrorBoundary

[matheusgoc]

🐞 bug report

Affected Package

The issue is caused by the package @airbrake/browser used on a React app when implemented with ErrorBoundary as recommended here.

Is this a regression?

No, the same issue is gotten on versions ^1.4.2 and ^2.1.7.

Description

Following the React sample usage by reporting through ErrorBoundary on a simple React app, does not pass any params set on notify method to the airbrake API.

🔬 Minimal Reproduction

1. Create a new React app using Create React App package: npx create-react-app my-app
2. Create a ErrorBoundary component at src following the airbrake-js sample
3. Create a new component to throw some error like this:

import { useEffect } from "react"

const ComponentWithError = () => {
  useEffect(() => {
    functionIsNotDefined()
  }, [])

  return <></>
}

export default ComponentWithError

4. Edit and wraps the App component ./src/App.js with the ErrorBoundary and place the ComponentWithError within it:

import ErrorBoundary from './ErrorBoundary'
import ComponentWithError from './ComponentWithError'

const App = () => {
  return (
    <ErrorBoundary>
      <ComponentWithError />
    </ErrorBoundary>
  );
}

export default App

5. Now, run the app and check the payload of request to the api.airbrake.io/api/v3/projects/1/notices?key=FIXME in the firebug.

At this point when the app is run, it produces an error that is catch by ErrorBoundary component. However, when checked the endpoint call on firebug, it is noted that it does not pass the info param set on notify method. Even passing another param like below it will not be forwarded:

componentDidCatch(error, info) {
  // Display fallback UI
  this.setState({ hasError: true });
  // Send error to Airbrake
  this.airbrake.notify({
    error: error,
    params: {info: info, someOtherParam: 'param 1 2 3'}
  });
}

It seems that the Airbrake notify method implemented at ErrorBoundary::componentDidCatch is never called.

🌍 Your Environment

It's a simple react app set up with Create React App.

@airbrake/* version:

    "@airbrake/browser": "^2.1.7",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.3"

Anything else relevant?

• The issue React error boundary errors are not actually sent #631 seems to be similar, but it does not have any reasonable solution that helps to solve it
• The Airbrake API is called twice for the same error when observed on the firebug network
• The notifier-configs.airbrake.io keeps calling often.

[amoedoamorim]

@matheusgoc I'm encountering the same behavior. However I've found that it seems to work when the error is a string instead of an Error object. It also works when I wrap the error in a new instance. e.g.:

this.airbrake.notify({
  error: new Error(err), // passing a string also works (e.g.: err.message)
  params: { info: ... },
});

I have no idea why, but this is how I'm currently working around it.