I've create an ErrorBoundry component which is wrapped around all child components of App. I've added a throw error function to one of the child components to test. When the component renders it seems the ErrorBoundry is catching the error but then the error appears after it. What am I doing wrong.
Here's my sandbox https://codesandbox.io/s/n0qjwjvrnm
I noticed this please take a look in the error overlay.
This error overlay is powered by react-error-overlay used in
create-react-app.
I tested in my app and it show the correct behavior because I'm not using create-react-app so this is the feature powered by it.
This is not a bug. Cheers.
Related
I am using React, and the material-ui library for my front-end UI, and on the latest component I implemented, I started getting crashes with an error stating:
TypeError: undefined is not an object (evaluating 'effect.next').
It always occurs in a material UI dialog component, I cannot point out anything different from other dialogs I have written in the same project, I also cannot find mentions of this error anywhere. It occurs after 3 or 4 actions on the page/component. Sadly I cannot reproduce the error.
Solved:
If you print so much in the console(errors), then react can desync with itself during the component lifecycle, and crash all of the mounted components. Just close inspect element and it works fine
I have a React application which is not created with create-react-app. I would like to add a error handling functionality but I have no idea how:
When there is an error, instead of getting a blank page and errors in console, in development, how do I enable this functionality in a React application
where it shows the error stack in the browser?
Do I have to write the code for it or there is a react configuration that I can just enable or should I use a library to achieve this?
EDIT:
Above image is what I want to see as an error report in my browser when there is an error. It is not an error I am trying to solve.
Try Error Boundaries . Add those in your Root Level to catch all errors inside that.
I have a component (a form) which is based on office ui fabric. The form is working fine in my react application. However, since we need this at multiple places, we decided to make it an npm package.
I extracted the component and can implement it in my app. I can fill out textfields and save and it works properly. However, as soon as I open a dropdown or datepicker (basically a "Callout" from office ui fabric), I get the following error message:
"Expected subtree parent to be a mounted class component. This error is likely caused by a bug in React. Please file an issue."
and:
"react-dom.development.js:14227 The above error occurred in the component:
in LayerBase
in CustomizedLayer
in StyledCustomizedLayer
in Callout
in div
in NormalPeoplePicker
[...]
"
Since it is working when I implement it within my app directly, it must be something in the build process I think. Can anybody eloberate, what this error message means exactly?
I am using the same package versions in my component as on my app.
Can I provide any files that might help? I don't know if showing my webpack.config or package.json for my component help at all?
Okay, it was indeed a mistake in my build process. I bundled the node_modules with my component and therefore suddenly hat two react "instances". After installing webpack-node-externals and adding
externals: [nodeExternals()]
to my webpack.config it works now.
Aloha,
I often get an error message when running a jest snapshot test where on sub component breaks. React itself writes the following warning, but keeps the thrown error message:
An error was thrown inside one of your components, but React doesn't know what it was. This is likely due to browser flakiness. React does its best to preserve the "Pause on exceptions" behavior of the DevTools, which requires
some DEV-mode only tricks. It's possible that these don't work in your browser. Try triggering the error in production mode, or switching to a modern browser. If you suspect that this is actually an issue with React, please file an issue.
That message is not really useful and I was wondering if there is a certain environment variable I could set that would cause react to just pass the thrown error on.
I am trying to use the material-ui React components in my app. I'm using webpack and installed material-ui with npm. I have already replaced text inputs in my forms with the material-ui text-field and it works great.
But.
Then I tried adding a button. Simple enough right? Suddenly, I get this error:
Invariant Violation: ReactClass: You're attempting to use a component class as a mixin. Instead, just use a regular object
I have tested and this error gets thrown even if I just load in an otherwise empty Javascript file with this line:
require('material-ui/lib/raised-button');
If I remove that line, everything works fine. It's weird because the text-field works, so I know my setup is correct. I suspect there is a Mixin being used inside the button code?
Has anyone experienced this? Information on this is sparse, any help is appreciated.