I have a React/Redux app in production that talks to an API. In a few situations the app will error as a result of data from the API (that we are unable to entirely control) and when this happens it takes down the entire react-router route.
We are using PropTypes as recommended in the Redux real-world example but these do not help in production. Is there a way to prevent these errors from taking down the entire route, and log the exception?
React will probably get error boundaries soon, as discussed in the issue #2461.
Somebody in that thread built a workaround until the feature is officially supported.
I hope this helps you for your use case.
Related
I'm using nextjs for quite a while now. I relied on _error.js page provided by nextjs when there is any error. In their doc here, it is specified to use errorboundary. Should I continue relying or next.js _error.js page or add errorboundary?
_error.js page is just a customization when the application throws a 500 error.
500 errors are handled both client-side and server-side by the Error component. If you wish to override it, define the file pages/_error.js and add the following code:
Error Boundaries are a React JS concept - Think of them as fallback components that can receive the error and display it or you can handle it yourself - It's considered as a best practice
They cover completely different areas of the stack.
I understand that redux-form handles reducers and actions for me which is a plus. But as far as I can tell the data will be returned as JSON upon submission and the added complexity to my app may not be worth while.
The redux-form workflow seems to be counter intuitive to the apollo graphQL wrapper that takes a mutation function prop and a gql tag in the react work-flow.
Is redux-form the wrong tool for the job or is there some insight I am missing?
I would like to hear about any alternative tools others are using in react-apollo.
-Thanks
I stand corrected.
Redux-form is worth using in Apollo-React-Redux.
After some research I found a minimumly invasive way to implement redux-form into an Apollo-React app if anyone is interested:
https://github.com/jferrettiboke/react-auth-app-example/blob/master/client/src/containers/SignInFormContainer.js
It took 2 lines in my index.js to include the formReducer (as expected) and sampling his signin form and its container.
His containerized method actually matched up well with the usual react- apollo work flow.
Thanks
I'm codesplitting my React+Redux application as described by Dan Abramov here, and everything appears to work fine. However, I'm also rendering the application on the server. This results in console error documented by this answer. However, I'm not attempting to clean up old state—I'm loading the state as the server computed it. The problem is the state from the server gets loaded into the global state before the codesplitted modules are loaded.
If I understand Dan properly, the error is just a warning, and everything appears to function correctly, but it's really not a pleasant development workflow to see errors on nearly every page load.
Is there anything I can/should be doing differently with my codesplitting code to alleviate this? It's nearly verbatim to Dan's example.
The answer was kind of obvious when it hit me. Just like you send the redux state to the client, you need to tell the client which optional reducers need to be included into the combined reducer on creation.
Based on Dan Abramov's work in the linked answer in my question, I changed store.asyncReducers into an array of paths instead of a map of objects. Then I was able to serialize this array and send it to the front-end where it was able to require the async reducers that the server-side render used.
I'm using server side rendering for my React app but can't wrap my head around the logic for showing error pages when something goes wrong.
For example:
User requests /article/123
Something goes wrong while fetching the article
I would like to show a 500 error page
The server side part was easy. I tell React-Router to serve my error component. So far so good.
But when the page is served, the client-side javascript is executed and it takes over rendering. React-Router see the url /article/123 and loads the component that shows the article (but fails since the data is not present..)
Is there a way to let the client-side know that we want to show the error component instead?
The only think I could think of is the following: Add the error to the global redux state. Before rendering a component, check if the error is present in the global state and show the error component instead.. But the downside of this is that you have to implement that checking logic in all of your components. There should be some kind more elegant way to fix this..
There's a few different ways to implement client-side error handling; I find using Higher Order Components work best. You would create a wrapper component that checks for errors from the server response. If it finds one, serve the appropriate error page. If the HOC doesn't detect an error, serve the component the user originally requested.
Here's a great explanation on how to implement HOC:
https://medium.com/#franleplant/react-higher-order-components-in-depth-cf9032ee6c3e
I am trying to build an react app where i need to pass a JSON of size more than 4MB in between routes / components.
I tried passing as query params in route, the url changes to blank..How can this be done in react.
It's probably not a direct answer but if you are starting a new app I would recommend you to use Redux with react-redux.
Redux is a predictable state container for JavaScript apps.
It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.
It's very small library so it's easy to understand how everything works. It might be a good solution to your problem.
Todo app example
You can also check out awesome egghead.io free tutorial - Getting Started with Redux
Here is the answer about the redux benefits by its author Dan Abramov