React errors break browser navigation

[jameshulse]

Hi all. If our app encounters a React error during rendering, then clicking 'back' in the browser means each subsequent page doesn't render correctly.

For example, navigating to a route with a rendering issue may cause the page to be blank. And clicking 'back' in the browser shows a blank page, where it was previously a fully rendered page before the navigation. We get the same behaviour even if we implement an ErrorBoundary: the error boundary fallback will show on the failed page, then when clicking 'back' the error boundary fallback will continue to display.

Is this a common issue? A mis-configuration in how we are using Inertia? Or is there a workaround we can employ?

I have seen some cases where people are listening to the 'popstate' browser event and reloading the page. So we may reach for this same solution.

[wb-ts]

This is a known issue in React and can happen due to how React handles its internal state and reconciliation process.

One possible workaround is to listen for the 'popstate' event, which is triggered when the user clicks the "back" button, and then force a reload of the page. This can help reset React's internal state and ensure that subsequent pages render correctly.

You can add an event listener for the 'popstate' event in your app's entry point or main component:

window.addEventListener('popstate', function() {
  window.location.reload();
});

By reloading the page when the 'popstate' event occurs, you can mitigate the rendering issues caused by React errors.

However, it's important to note that this workaround does have some drawbacks. Reloading the page can result in slower performance, as all the resources and data need to be fetched again. Additionally, any unsaved changes or state in the current page will be lost. So consider these trade-offs before implementing this solution.

In terms of a misconfiguration in how you're using Inertia, it's unlikely to be the cause of this specific issue. React errors during rendering are usually related to how React reconciles the virtual DOM and updates the actual DOM. The workaround I provided above should address the issue regardless of your Inertia configuration.

I hope this helps! Let me know if you have any further questions or need more assistance.

[jameshulse]

This is a known issue in React and can happen due to how React handles its internal state and reconciliation process.

I'm struggling to find much more info on this. Are you able to point me in a direction of any more documentation?

By reloading the page when the 'popstate' event occurs, you can mitigate the rendering issues caused by React errors.

This makes sense, but I was hoping there was a more Inertia-friendly solution.

[ankushmak2]

i have the similar issue