Custom error page in <Layout error={MyError} /> not show

[lumpov]

I would like to use custom error page (src/error.js) as described in https://marmelab.com/react-admin/Theming.html#customizing-the-error-page

Custom error page don't show on server error.

Sandbox https://codesandbox.io/p/github/lumpov/react-admin/master

Click on error-resource.

Environment

• React-admin version: 4.6.2
• Last version that did not exhibit the issue (if applicable):
• React version: 18.2.0
• Browser: google chrome 108.0.5359.98 (Mac arm)
• Stack trace (in case of a JS error):

[slax57]

Hi, and thanks for your question.
As explained in the react-admin contributing guide, we use the GitHub issues for bugs and feature requests only.

For support question ("How To", usage advice, or troubleshooting your own code), you have three options:

• Community support: Ask your question on StackOverFlow. This makes your question easy to find by the developer community. StackOverFlow has great SEO, gamification, voting, and reputation system.
• Community support: Ask your question on Discord. Some react-admin users and contributors might have time to answer your questions.
• Professional support: If you're a React-Admin Enterprise Edition subscriber, you have unlimited access to the Professional Support service. This service guarantees that you'll get an answer shortly.
  If your problem is urgent, please consider subscribing to the Enterprise Edition, starting at 125€. It's a good way to contribute to the sustainability of react-admin.

So I'm closing this issue, and inviting you to ask your question in one of the support channels above.

[lumpov]

This is not how-to, etc question. There is the bug in documentation or code. I did everything as described in tutorial, double tested, create clean separate sandbox for it and it doesn't work.

[slax57]

If you think you have found a bug, then you should follow the issue template (completely), and provide a codesandbox based on the simple example of react-admin.

Besides, in the case of your example, even if you remove your custom error page, you won't see the default error page. This is because the error you trigger happens outside the scope of the <ErrorBoundary> set by react-admin. Have a look at the code here for more info: https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/layout/Layout.tsx#L51

You should try to make it appear with a different kind of error, for example updating an inexistant resource or throwing an error inside a mutation side-effect, or something in this taste.

[lumpov]

Thanks. I thing that API errors must covered ErrorBoundary. I'm wrong?

Now I'm get only notification on API server errors.

How can I catch API server errors on separate page?

Please give me an advise or example.

[slax57]

You could probably wrap your whole App inside your own <ErrorBoundary>.
But this is now turning into a How-To question. Hence, I suggest you ask it in one of the channels I mentioned above, which are better suited for this type of question.

[lumpov]

Thank you for not leaving me alone in trouble. I posted a question on Stackoverflow, there are no answers yet.

I double-checked everything again.

Now I am absolutely sure that I have identified either an error in the documentation or an error in the code.

The project has tag label:documentation and there is not 1 issue.

I created a clean React-Admin sandbox in which I added the code from the instructions from the page https://marmelab.com/react-admin/Theming.html#customizing-the-error-page

Sandbox: https://codesandbox.io/p/github/lumpov/react-admin/master For error please click on error-resource

Provoked an error inside React-Admin, but it appears only in bottom notifications. This means that the error is in the React-Admin scope.

The error page, as described in the documentation, does not show.

And I apologise, I issued the issue according to the requirements described in the hidden comments, what did I not specify?

[slax57]

@lumpov

As you have found out with your codesandbox, the custom error page will only appear for specific types of errors.
This is because, internally, we use React's Error Boundaries.

Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

Besides, as I already pointed out, we put the ErrorBoundary component around the main container only, but not the Menu nor the AppBar. This is to allow the user to navigate away from the error when it happens.

So, I don't think this is something we can/should change in the code, but I figured you are correct about the docs being a bit misleading about when the Error Page will be shown.
I'll reopen this Issue as a Doc issue and will provide a PR to add clarifications to the docs.

[lumpov]

thanks guys! @fzaninotto one more thing.

Maybe this is a separate issue, but related to error handling.

For example, in the ListView component, which is used in List, the built-in use of the Error component, but without taking the possibility of built-in error customization

ListView.tsx:

<Error error={error} resetErrorBoundary={null} />

That is, with any HTTP status != 200 the standard Error component is displayed, not the one specified <Layout {...props} error={MyError} />

Layout.tsx:

                        <ErrorBoundary
                            onError={handleError}
                            fallbackRender={({ error, resetErrorBoundary }) => (
                                <Error
                                    error={error}
                                    errorComponent={errorComponent}
                                    errorInfo={errorInfo}
                                    resetErrorBoundary={resetErrorBoundary}
                                    title={title}
                                />
                            )}
                        >
                            {children}
                        </ErrorBoundary>

I think that in ListView it is necessary to use the same construction as in Layout.

Please consider this and can I issue a new issue?

[fzaninotto]

@lumpov I opened #8801 to discuss the possible solutions to your last comment.