AppErrorBoundary

AppErrorBoundary is a component that should catch unexpected critical errors. Instead of rendering a blank page when the application failes, this will render a better looking error message, and instruct the user to try reloading the page, or contact the IT department if the error keeps occuring.

Usage

Only app level context providers should be outside the error boundary.

import { StyledEngineProvider, ThemeProvider } from "@mui/material";
import { AppErrorBoundary, theme } from "@olenbetong/appframe-mui";
import { createRoot } from "react-dom/client";
import App from "./App";

const root = createRoot(document.getElementById("root") as HTMLElement);
root.render(
  <StyledEngineProvider>
    <ThemeProvider theme={theme}>
      <AppErrorBoundary>
        <App />
      </AppErrorBoundary>
    </ThemeProvider>
  </StyledEngineProvider>
);