Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Params not passed on notify method with React ErrorBoundary #1193

Open
matheusgoc opened this issue Jan 19, 2022 · 1 comment
Open

Params not passed on notify method with React ErrorBoundary #1193

matheusgoc opened this issue Jan 19, 2022 · 1 comment
Labels

Comments

@matheusgoc
Copy link

🐞 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
  1. 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
  1. 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?

@matheusgoc matheusgoc added the bug label Jan 19, 2022
@amoedoamorim
Copy link

amoedoamorim commented Apr 21, 2022

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

amoedoamorim added a commit to meedan/check-web that referenced this issue Apr 22, 2022
This commit puts an ErrorBoundary around each Route's parent component.
This way each ErrorBoundary is under the IntlProvider and has Intercom in scope so we integrate and prefill support request messages when crashes happen.
ErrorBoundary component now gets a `component` prop to specify which component it is wrapping and this will be sent with the errbit report.
It is also collecting user name, dbid and email to send with the report, to help gain more insight/context on the crashes.

Note I: The @airbrake-js/browser calls to the Errbit server seem to ignore the extra data added as context, params and session, unless the error is a string or we cast a new instance from the raised error object. To be investigated. See github issue: airbrake/airbrake-js#1193

Note II: MainErrorBoundary has been renamed to ErrorBoundary

Fixes: CHECK-1744
amoedoamorim added a commit to meedan/check-web that referenced this issue Apr 25, 2022
* Collect user data and integrate error page with Intercom

This commit puts an ErrorBoundary around each Route's parent component.
This way each ErrorBoundary is under the IntlProvider and has Intercom in scope so we integrate and prefill support request messages when crashes happen.
ErrorBoundary component now gets a `component` prop to specify which component it is wrapping and this will be sent with the errbit report.
It is also collecting user name, dbid and email to send with the report, to help gain more insight/context on the crashes.

Note I: The @airbrake-js/browser calls to the Errbit server seem to ignore the extra data added as context, params and session, unless the error is a string or we cast a new instance from the raised error object. To be investigated. See github issue: airbrake/airbrake-js#1193

Note II: MainErrorBoundary has been renamed to ErrorBoundary

Fixes: CHECK-1744

* Remove console log with intentional error 😅

Also to mention that change in helpers.js is to guard agains `null` value for `str`.

Fixes CHECK-1747

* Add missing files 🤦
amoedoamorim added a commit to meedan/check-web that referenced this issue Apr 25, 2022
* Collect user data and integrate error page with Intercom

This commit puts an ErrorBoundary around each Route's parent component.
This way each ErrorBoundary is under the IntlProvider and has Intercom in scope so we integrate and prefill support request messages when crashes happen.
ErrorBoundary component now gets a `component` prop to specify which component it is wrapping and this will be sent with the errbit report.
It is also collecting user name, dbid and email to send with the report, to help gain more insight/context on the crashes.

Note I: The @airbrake-js/browser calls to the Errbit server seem to ignore the extra data added as context, params and session, unless the error is a string or we cast a new instance from the raised error object. To be investigated. See github issue: airbrake/airbrake-js#1193

Note II: MainErrorBoundary has been renamed to ErrorBoundary

Fixes: CHECK-1744

* Remove console log with intentional error 😅

Also to mention that change in helpers.js is to guard agains `null` value for `str`.

Fixes CHECK-1747

* Add missing files 🤦
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants