- Implementation
- SystemError API
Common Examples
Basic Usage
Display a system error state:import { SystemError } from "@servicetitan/anvil2-ext-atlas";
function ErrorScreen() {
return (
<SystemError
title="Unable to Load Chat"
description="We're having trouble connecting to the server. Please check your connection and try again."
/>
);
}
Custom Error Icon
Use a custom icon for the error state:import { SystemError } from "@servicetitan/anvil2-ext-atlas";
import CloudOffIcon from "@servicetitan/anvil2/assets/icons/material/round/cloud_off.svg";
function OfflineError() {
return (
<SystemError
title="You're Offline"
description="Atlas requires an internet connection to work."
icon={CloudOffIcon}
iconColor="var(--color-warning-100)"
/>
);
}
Conditional Error Display
Show error based on application state:import { SystemError, ChatWindow, Content } from "@servicetitan/anvil2-ext-atlas";
function AtlasApp() {
const [error, setError] = useState<string | null>(null);
if (error) {
return (
<SystemError
title="Something went wrong"
description={error}
/>
);
}
return (
<ChatWindow open>
<Content>{/* messages */}</Content>
</ChatWindow>
);
}
Default Values
Using default title and description:import { SystemError } from "@servicetitan/anvil2-ext-atlas";
function DefaultErrorScreen() {
// Uses default title "Something went wrong" and default description
return <SystemError />;
}
<SystemError
title="Something went wrong"
description="We're having trouble loading the chat."
icon={ErrorIcon}
iconColor="var(--color-neutral-100)"
/>
SystemError Props
Detailed description of the error or suggested actions.
Custom SVG icon to display. Defaults to the Material error icon.
Color for the icon.
Alternative to
description. If provided, overrides the description.The error title heading.