@b-op/bop-app-error-handler
v1.0.8
Published
Error handler for b-op apps
Downloads
13
Maintainers
Readme
BopErrorHandler Component
The BopErrorHandler
component is a React functional component that displays an error message with relevant details.
Props
The component accepts the following props:
| Prop | Type | Description | | -------------------- | ----------------- | -------------------------------------------------------- | | EventTypeUID | string | Unique identifier for the event that triggered the error | | HumanReadableEventID | string (optional) | Human-readable identifier for the event | | GenericMessage | string (optional) | Generic error message | | HelpLink | string (optional) | Link to a help resource for the error | | SpecificMessage | string (optional) | Specific error message |
Usage
To use the BopErrorHandler component, import it from the file where it is defined and render it as a child component within another component:
import "@b-op/bop-app-error-handler/dist/ErrorPopUp.min.css";
import { BopErrorHandler } from "@b-op/bop-app-error-handler";
//_app.tsx
function ZugseilShop({ Component, pageProps }: AppProps) {
const [error, setError] = useState<BOp_EventInfoForBusiness | undefined>(
undefined
);
const handleError = (e: Event) => {
if (e instanceof CustomEvent) {
let detail = e.detail;
setError(detail as BOp_EventInfoForBusiness);
}
};
useEffect(() => {
if (typeof window !== "undefined") {
window.addEventListener("zugseil-shop-error", handleError);
}
return () => {
window.removeEventListener("zugseil-shop-error", handleError);
};
}, []);
return (
<>
<Component {...pageProps} />
{error && <BopErrorHandler {...error} />}
</>
);
}
export default ZugseilShop;
Customization
This SCSS file uses CSS custom properties (also known as CSS variables) to allow for easy customization of the component. The following custom properties can be overridden:
--main-bg-clr: var(--bop-error-handler-error-bg-clr, #f87171);
--main-box-shadow: var(
--bop-error-handler-error-box-shadow,
1px 1px 5px 0px rgba(0, 0, 0, 0.75)
);
--main-z-index: var(--bop-error-handler-error-z-index, 100);
--main-bottom: var(--bop-error-handler-error-bottom, 1rem);
--main-right: var(--bop-error-handler-error-right, 1rem);
--title-color: var(--bop-error-handler-error-title-clr, #ffffff);
You can modify these properties by setting them on the .bopMultiLanguageInput class or on any of its child elements. For example:
:root {
--main-bg-clr: red;
--bop-error-handler-error-title-clr: #eee;
}