ErrorContext

The OdinErrorContext components provide the Application a means to display any error messages that are thrown by it's components onto the GUI. It utilises the React Create Context Hook to allow components at any point within the component tree to report errors. Components such as the AdapterEndpoint and WithEndpoint utilise this mechanism.

Warning

Using components that use the Error Context, such as the ones mentioned above, without containing them within the error context provider will cause them to error during rendering, causing a blank screen and further issues. Always make sure all parts of your App are wrapped within the OdinErrorContext provider. The Template Apps provided have set up proper Error Context Providers.

The Error handling is done in three parts.

1. The OdinErrorContext component provides the Context for any components within it's wrapped component tree.
2. the useError hook allows a component to access this Error Context, allowing it to set the error state.
3. the OdinErrorOutlet component displays the error message as a component within the GUI, if there is an error to display.

Note

In a standard GUI project, the error handling is managed by OdinApp, and the Error Context is provided at the very top of the component tree to ensure all components have access. The only part of this that a developer of a GUI Project is likely to require is the useError hook, which allows any custom components to display an error.

Properties

import {OdinErrorContext, OdinErrorOutlet, useError} from 'odin-react';

There are no properties to be passed to any of these components.

Return Objects and Functions

useError

Name	Type	Description
ctx	error: Error, setError: React.Dispatch<React.SetStateAction<Error>>	The Error Context returned by this hook provides an Error State, that allows components to read the error, and set it. Any error message will then be displayed by the OdinErrorOutlet, assuming it is contained within the same Context Provider.

Example

// main.tsx

import {OdinErrorContext} from 'odin-react';
import {App} from `./`;

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <OdinErrorContext> //context provided here to ensure all components have access
    <App />
    </OdinErrorContext>
  </StrictMode>

//App.tsx

import { OdinErrorOutlet } from 'odin-react';

return (
    <OdinErrorOutlet/>
    ...
)