- Implementation
- SystemError API
Common Examples
Basic Usage
Display a system error state:Copy
Ask AI
import { SystemError } from "@servicetitan/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:Copy
Ask AI
import { SystemError } from "@servicetitan/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:Copy
Ask AI
import { SystemError, ChatWindow, Content } from "@servicetitan/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:Copy
Ask AI
import { SystemError } from "@servicetitan/ext-atlas";
function DefaultErrorScreen() {
// Uses default title "Something went wrong" and default description
return <SystemError />;
}
Copy
Ask AI
<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.
