Skip to main content

Error Block

The ErrorBlock Component is a fully customizable and accessible error display component built with React and TypeScript. It provides a complete error interface with modern design patterns, flexible customization options, and support for custom error messages and actions. Built on top of MUI components for consistent styling.

πŸš€ Installation​

npm install @nodeblocks/frontend-error-block@0.2.1

πŸ“– Usage​

import {ErrorBlock} from '@nodeblocks/frontend-error-block';
Live Editor
function SimpleErrorBlock() {
  return (
    <ErrorBlock
      errorTitle="Something went wrong"
      subtitle="We encountered an unexpected error. Please try again or contact support if the problem persists."
      actionHref="#home"
      actionText="Back to Home"
      titleErrorCode="Error 404"
    >
      <ErrorBlock.Icon />
      <ErrorBlock.Title />
      <ErrorBlock.Subtitle />
      <ErrorBlock.Action />
    </ErrorBlock>
  );
}
Result
Loading...

πŸ”§ Props Reference​

Main Component Props​

PropTypeDefaultDescription
errorTitlestringRequiredTitle for the error message displayed prominently
subtitlestringRequiredSubtitle providing additional context about the error
actionHrefstringRequiredURL for the action button navigation
actionTextstringRequiredText to display in the action button
titleErrorCodestringundefinedError code displayed above the title (e.g., "Error 404")
spacingnumber | string4Spacing between elements (MUI Stack spacing)
classNamestringundefinedAdditional CSS class name for styling the error container
sxSxProps<Theme>undefinedMUI system props for custom styling
childrenBlocksOverrideundefinedCustom block components to override default rendering

Note: This component inherits all MUI Stack component props.

Sub-Components​

The ErrorBlock component provides several sub-components. All sub-components receive their default values from the main component's context and can override these values through props.

ErrorBlock.Icon​

Renders the error icon using MUI's ErrorOutline icon from @mui/icons-material.

PropTypeDefaultDescription
sxSxProps<Theme>{ fontSize: '3rem', color: theme.palette.secondary.main }MUI system props for custom styling
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all MUI SvgIcon component props (from ErrorOutline).

ErrorBlock.Title​

Renders the error title using MUI Typography.

PropTypeDefaultDescription
titleErrorCodeReactNodeContext valueError code to display above the title
errorTitlestringContext valueTitle content (overrides context)
childrenReactNodeContext errorTitleCustom content - overrides errorTitle
variantTypographyVariant'h4'MUI Typography variant
sxSxProps<Theme>{ color: theme.palette.secondary.main }MUI system props for custom styling
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all MUI Typography component props.

ErrorBlock.Subtitle​

Renders the error subtitle using MUI Typography.

PropTypeDefaultDescription
subtitlestringContext valueSubtitle content (overrides context)
childrenReactNodeContext subtitleCustom content - overrides subtitle
sxSxProps<Theme>{ color: theme.palette.secondary.main }MUI system props for custom styling
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all MUI Typography component props.

ErrorBlock.Action​

Renders the action button using MUI Button.

PropTypeDefaultDescription
actionHrefstringContext valueURL for navigation (overrides context)
actionTextstringContext valueButton text (overrides context)
childrenReactNodeContext actionTextCustom content - overrides actionText
hrefstringContext actionHrefDirect MUI Button href (overrides actionHref)
variantButtonVariant'contained'MUI Button variant
size'small' | 'medium' | 'large''medium'MUI Button size
classNamestringundefinedAdditional CSS class name for styling

Note: This component inherits all MUI Button component props.

🎨 Configuration examples​

Custom Icon Styling​

<ErrorBlock.Icon 
  sx={{ 
    fontSize: '5rem', 
    color: 'warning.main',
    backgroundColor: 'warning.light',
    borderRadius: '50%',
    padding: 2
  }} 
/>

Custom Typography Styling​

<ErrorBlock.Title 
  variant="h3" 
  sx={{ 
    color: 'error.main',
    fontWeight: 'bold',
    textTransform: 'uppercase'
  }}>
  Custom Error Title
</ErrorBlock.Title>

Custom Button Styling​

<ErrorBlock.Action 
  variant="outlined"
  color="secondary"
  size="large"
  startIcon={<HomeIcon />}
  sx={{ 
    borderRadius: 2,
    textTransform: 'none'
  }}>
  Return Home
</ErrorBlock.Action>

πŸ”§ TypeScript Support​

Full TypeScript support with comprehensive type definitions:

import {ErrorBlock} from '@nodeblocks/frontend-error-block';
import {StackProps, TypographyProps, ButtonProps} from '@mui/material';

// Main component props extend MUI StackProps
interface ErrorBlockProps extends Omit<StackProps, 'children'> {
  errorTitle: string;
  subtitle: string;
  actionHref: string;
  actionText: string;
  titleErrorCode?: string;
  children?: BlocksOverride;
}

// Example with MUI prop customization
function CustomStyledErrorBlock() {
  return (
    <ErrorBlock
      errorTitle="Server Error"
      subtitle="Our servers are experiencing issues. Please try again later."
      actionHref="#dashboard"
      actionText="Back to Dashboard"
      titleErrorCode="Error 500"
      spacing={3}
      sx={{maxWidth: 500}}
    >
      <ErrorBlock.Icon sx={{fontSize: '4rem', color: 'error.main'}} />
      <ErrorBlock.Title variant="h3" sx={{color: 'error.main'}}>
        Critical Server Error
      </ErrorBlock.Title>
      <ErrorBlock.Subtitle variant="body1" sx={{color: 'text.secondary'}}>
        We&apos;re working on fixing this issue. Try refreshing in a few minutes.
      </ErrorBlock.Subtitle>
      <ErrorBlock.Action variant="outlined" size="large" href="#support" sx={{minWidth: 200}}>
        Contact Support
      </ErrorBlock.Action>
    </ErrorBlock>
  );
}

πŸ“ Notes​

  • The component uses MUI's Stack for layout with default spacing={4}
  • Default max width is 400px with auto horizontal margins for centering
  • All sub-components use theme.palette.secondary.main for consistent coloring by default
  • The Icon component uses MUI's ErrorOutline icon from @mui/icons-material
  • The Title renders with variant="h4" by default
  • The Action button uses variant="contained" and size="medium" by default
  • All sub-components support the sx prop for MUI system styling
  • Block override pattern allows inserting custom blocks between default blocks

Built with ❀️ using React, TypeScript, and MUI.