Skip to content

Error message

UX patterns
3.9.14

Error

The component that can be used to collect any global errors display on the page.

import Error from '@semcore/ui/errors';
<Error />;
interface
IErrorsProps extends IFlexProps
PropertyDescription
icon
string | React.ReactNode

Error icon

Error.Title

Error name. Extends for <Box/>.

import Error from '@semcore/ui/errors';
<Error.Title />;

Error.Description

Error description. Extends for <Box/>.

import Error from '@semcore/ui/errors';
<Error.Description />;

Error.Controls

Container for controls. Extends for <Box/>.

import Error from '@semcore/ui/errors';
<Error.Controls />;

AccessDenied

Placeholder for the 403 error. For some reason the page is restricted for the user.

import { AccessDenied } from '@semcore/ui/errors';
<AccessDenied />;
interface
IAccessDeniedProps extends IWithI18nEnhanceProps
PropertyDescription
string = /

href of the home link

Maintenance

The placeholder for the global state for the period of technical works.

import { Maintenance } from '@semcore/ui/errors';
<Maintenance />;
interface
IMaintenanceProps extends IWithI18nEnhanceProps
PropertyDescription
toolName*
string

Tool name

string = /

href of the home link

PageError

The placeholder for 500 error, caused by some technical problems on the page. There are two options to display: when we are aware of the error and warn the user; when we don't know about the error and recommend the user to refresh the page or contact us.

import { PageError } from '@semcore/ui/errors';
<PageError />;
interface
IPageErrorProps extends IWithI18nEnhanceProps
PropertyDescription
onClick
(e: React.MouseEvent) => void = () => { if (canUseDOM()) { location.reload(); } }

Page reloading button click handler

PageNotFound

Placeholder for the 404 error, when the page is not found.

import { PageNotFound } from '@semcore/ui/errors';
<PageNotFound />;
interface
IPageNotFoundProps extends IWithI18nEnhanceProps
PropertyDescription
string = /

href of the home link

ProjectNotFound

The placeholder for the 404 error, but for the project page.

import { ProjectNotFound } from '@semcore/ui/errors';
<ProjectNotFound />;
interface
IProjectNotFoundProps extends IWithI18nEnhanceProps
PropertyDescription
string = /projects

Link to the projects

string
string