Atlas is deprecated. Use AI Kit for any new Atlas experiences.
- 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(--a2-color-yellow-500)"
/>
);
}
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(--a2-color-neutral-100)"
/>
SystemError Props
string
Detailed description of the error or suggested actions.
Svg
default:"IconError"
Custom SVG icon to display. Defaults to the Material error icon.
string
default:"var(--a2-color-neutral-100)"
Color for the icon.
string
Alternative to
description. If provided, overrides the description.string
default:"Something went wrong"
The error title heading.