\r\n\r\n \r\n\r\n## Why react-error-boundary\r\n\r\nBy design, React unmounts the entire tree when it encounters an unhandled error. This leaves the application in an ususable state unless the user refreshes the application. In the context of a video game, the player would need to leave and rejoin the game. Error boundaries provide a way to recover from errors to greatly improve user experience.\r\n\r\n### Use cases\r\n\r\n- Rendering fallback components upon errors (e.g., error screen)\r\n- Reverting state to a known good state\r\n- Retrying render with reverted state\r\n- Logging errors in an external database\r\n\r\n## Installation\r\n\r\n### Wally\r\n\r\nAdd the latest version of react-error-boundary to your wally.toml (e.g., `ReactErrorBoundary = \"chriscerie/react-error-boundary@\"`)\r\n\r\n## Getting Started\r\n\r\nGetting started with react-error-boundary is simple. First, create a fallback component.\r\n\r\n```lua\r\nlocal e = React.createElement\r\n\r\nlocal Fallback: React.FC = function(_props)\r\n return e(\"TextLabel\", {\r\n AnchorPoint = Vector2.new(0.5, 0.5),\r\n Size = UDim2.fromScale(0.5, 0.5),\r\n Position = UDim2.fromScale(0.5, 0.5),\r\n Text = \"An error was encountered!.\",\r\n })\r\nend\r\n```\r\n\r\nNext, in your app, wrap an `ErrorBoundary` where needed.\r\n\r\n```lua\r\nlocal App: React.FC<{}> = function(_props)\r\n return e(ReactErrorBoundary.ErrorBoundary, {\r\n FallbackComponent = Fallback,\r\n }, {\r\n ComponentThatMightError = e(ComponentThatMightError),\r\n })\r\nend\r\n```\r\n\r\nNow when `ComponentThatMightError` or any of its descendant errors, the error boundary will catch it and render the fallback component. When an error is encountered somewhere in your app, the nearest `ErrorBoundary` will catch and handle it. You don't need to wrap every component in an `ErrorBoundary`. Consider the [granularity of error boundaries](https://aweary.dev/fault-tolerance-react/) and where it makes sense to display an error message or revert states.\r\n\r\nThis was a very basic example. In a real application, you might want the fallback component to render a \"go back\" button that reverts state, or you might want to do that immediately after encountering an error. More advanced usage is detailed in react-error-boundary's official [documentation](https://www.chrisc.dev/react-error-boundary/).\r\n\r\n## License\r\n\r\n`react-error-boundary` is available under the MIT license. See [LICENSE](LICENSE) for details.\r\n","readmeTruncated":false}
![](\"https://i.imgur.com/1Ta6WRv.png\")
\r\n ![\"Deploy](\"https://github.com/chriscerie/react-error-boundary/workflows/docs/badge.svg\"){kind=icon}
\r\n \r\n