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.

🚀 Installation

npm install @nodeblocks/frontend-error-block

📖 Usage

import {ErrorBlock} from '@nodeblocks/frontend-error-block';

Basic Usage
Advanced Usage

Live Editor

function BasicErrorBlock() {
  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 icon="error_outline" />
      <ErrorBlock.Title />
      <ErrorBlock.Subtitle />
      <ErrorBlock.Action>
        Go Back
      </ErrorBlock.Action>
    </ErrorBlock>
  );
}

Result

Live Editor

function AdvancedErrorBlock() {
  return (
    <ErrorBlock
      errorTitle="Server Connection Failed"
      subtitle="Unable to connect to our servers. Please check your internet connection and try again."
      actionHref="#dashboard"
      actionText="Back to Dashboard"
      titleErrorCode="Error 500"
      className="custom-error-block"
      style={{ 
        backgroundColor: '#fafafa',
        border: '1px solid #e0e0e0',
        borderRadius: '8px',
        padding: '40px',
        maxWidth: '600px',
        margin: '0 auto'
      }}>
      {({ defaultBlocks, defaultBlockOrder }) => ({
        blocks: {
          ...defaultBlocks,
          
          // 🚨 Custom icon with enhanced styling
          icon: {
            ...defaultBlocks.icon,
            props: {
              ...defaultBlocks.icon.props,
              icon: 'warning_amber',
              iconSize: '4-extra-large',
              color: 'error',
              style: {
                backgroundColor: '#fff3cd',
                padding: '20px',
                borderRadius: '50%',
                border: '3px solid #ffeaa7',
              },
            },
          },
          
          // 🎯 Custom title with enhanced styling
          title: {
            ...defaultBlocks.title,
            props: {
              ...defaultBlocks.title.props,
              size: '3XL',
              weight: 'bold',
              color: 'error',
              titleErrorCode: '🚨 Critical Error 500',
              style: {
                marginBottom: '16px',
                textShadow: '0 2px 4px rgba(0,0,0,0.1)',
              },
            },
          },
          
          // 📝 Custom subtitle with enhanced content
          subtitle: {
            ...defaultBlocks.subtitle,
            props: {
              ...defaultBlocks.subtitle.props,
              size: 'M',
              color: 'mid-emphasis',
              style: {
                lineHeight: '1.6',
                marginBottom: '24px',
              },
            },
          },
          
          // 🔧 Custom troubleshooting section
          troubleshooting: (
            <div style={{
              backgroundColor: '#e7f3ff',
              border: '1px solid #b3d9ff',
              borderRadius: '6px',
              padding: '16px',
              marginBottom: '24px',
              textAlign: 'left',
            }}>
              <h4 style={{ 
                margin: '0 0 12px 0',
                color: '#0066cc',
                fontSize: '16px',
                fontWeight: 'bold'
              }}>
                🔧 Troubleshooting Steps:
              </h4>
              <ul style={{ 
                margin: '0',
                paddingLeft: '20px',
                color: '#333',
                fontSize: '14px',
                lineHeight: '1.5'
              }}>
                <li>Check your internet connection</li>
                <li>Refresh the page (Ctrl+R or Cmd+R)</li>
                <li>Clear browser cache and cookies</li>
                <li>Try again in a few minutes</li>
              </ul>
            </div>
          ),
          
          // 🎨 Custom action with enhanced styling
          action: {
            ...defaultBlocks.action,
            props: {
              ...defaultBlocks.action.props,
              size: 'L',
              fill: 'fill',
              textSize: 'L',
              style: {
                backgroundColor: '#007bff',
                color: 'white',
                padding: '12px 24px',
                borderRadius: '8px',
                boxShadow: '0 4px 8px rgba(0,123,255,0.3)',
                border: 'none',
                fontWeight: 'bold',
                cursor: 'pointer',
                transition: 'all 0.2s ease',
              },
            },
          },
          
          // 📞 Custom support contact section
          support: (
            <div style={{
              marginTop: '24px',
              padding: '16px',
              backgroundColor: '#f8f9fa',
              border: '1px solid #dee2e6',
              borderRadius: '6px',
              textAlign: 'center',
            }}>
              <p style={{ 
                margin: '0 0 8px 0',
                fontSize: '14px',
                color: '#6c757d'
              }}>
                Still having trouble?
              </p>
              <button style={{
                padding: '8px 16px',
                backgroundColor: '#28a745',
                color: 'white',
                border: 'none',
                borderRadius: '4px',
                cursor: 'pointer',
                fontSize: '14px',
                fontWeight: 'bold',
              }}>
                📞 Contact Support
              </button>
            </div>
          ),
        },
        blockOrder: ['icon', 'title', 'subtitle', 'troubleshooting', 'action', 'support'],
      })}
    </ErrorBlock>
  );
}

Result

🔧 Props Reference

Main Component Props

Prop	Type	Default	Description
`errorTitle`	`string`	Required	Title for the error message displayed prominently
`subtitle`	`string`	Required	Subtitle providing additional context about the error
`actionHref`	`string`	Required	URL for the action button navigation
`actionText`	`string`	Required	Text to display in the action button
`titleErrorCode`	`string`	`undefined`	Error code displayed above the title (e.g., "Error 404")
`className`	`string`	`undefined`	Additional CSS class name for styling the error container
`children`	`BlocksOverride`	`undefined`	Custom block components to override default rendering

Note: The main component inherits all HTML div element 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

Prop	Type	Default	Description
`icon`	`enum`	`"error_outline"`	Icon name to display - supports material design icons
`iconSize`	`enum`	`"3-extra-large"`	Size of the icon
`color`	`enum`	`"mid-emphasis"`	Color theme for the icon
`className`	`string`	`undefined`	Additional CSS class name for styling
`isDisabled`	`boolean`	`false`	Whether the icon is disabled
`onClick`	`function`	`undefined`	Function to handle icon click

ErrorBlock.Title

Prop	Type	Default	Description
`titleErrorCode`	`ReactNode`	From context	Error code to display above the title
`children`	`ReactNode`	From context	Title content - overrides errorTitle from context
`size`	`enum`	`"2XL"`	Typography size for the title
`type`	`enum`	`"heading"`	Typography type
`color`	`enum`	`"low-emphasis"`	Color theme for the title
`weight`	`enum`	`"bold"`	Weight of the title
`className`	`string`	`undefined`	Additional CSS class name for styling

ErrorBlock.Subtitle

Prop	Type	Default	Description
`children`	`ReactNode`	From context	Title content - overrides errorTitle from context
`size`	`enum`	`"S"`	Typography size for the title
`type`	`enum`	`"heading"`	Typography type
`color`	`enum`	`"low-emphasis"`	Color theme for the title
`weight`	`enum`	`"regular"`	Weight of the title
`className`	`string`	`undefined`	Additional CSS class name for styling

ErrorBlock.Action

Prop	Type	Default	Description
`actionHref`	`string`	Required	URL for the action button navigation
`children`	`ReactNode`	Required	Text to place inside the button
`className`	`string`	`undefined`	Additional CSS class name for styling
`fill`	`enum`	`"fill"`	Button fill style
`icon`	`enum`	`undefined`	Optional icon for the left-hand side of the button
`iconColor`	`enum`	`undefined`	Color for the left-hand side icon. When not provided, a default color for the fill type will be used.
`isDisabled`	`boolean`	`false`	Whether the button is disabled and cannot be used
`onClick`	`function`	`undefined`	Function to handle button click
`size`	`enum`	`"M"`	Button vertical size
`textAlign`	`enum`	`"center"`	Button icon and text positioning within the button
`textColor`	`enum`	`"default"`	Button text color
`textEmphasis`	`boolean`	`false`	Button text weight
`textSize`	`enum`	`"M"`	Button text size
`type`	`enum`	`"submit"`	Button purpose (affects html type)

🔧 TypeScript Support

Full TypeScript support with comprehensive type definitions:

import {ErrorBlock} from '@nodeblocks/frontend-error-block';
import {ComponentProps} from 'react';

// Main component interface
interface ErrorBlockProps extends Omit<ComponentProps<typeof ErrorBlock>, 'children'> {
  className?: string;
  errorTitle: string;
  subtitle: string;
  actionHref: string;
  actionText: string;
  titleErrorCode?: string;
}

// Example with prop overriding
function CustomErrorBlock() {
  return (
    <ErrorBlock
      errorTitle="Server Error"
      subtitle="Our servers are experiencing issues. Please try again later."
      actionHref="/dashboard"
      actionText="Back to Dashboard"
      titleErrorCode="Error 500">
      <ErrorBlock.Icon icon="error_outline" color="primary" iconSize="3-extra-large" />
      <ErrorBlock.Title titleErrorCode="🚨 Error 500" size="3XL" color="error">
        Critical Server Error
      </ErrorBlock.Title>
      <ErrorBlock.Subtitle color="mid-emphasis">
        We're working on fixing this issue. Try refreshing in a few minutes.
      </ErrorBlock.Subtitle>
      <ErrorBlock.Action size="M" fill="fill" actionHref="/support">
        Contact Support
      </ErrorBlock.Action>
    </ErrorBlock>
  );
}

Built with ❤️ using React, TypeScript, and modern web standards.

🚀 Installation​

📖 Usage​

🔧 Props Reference​

Main Component Props​

Sub-Components​

ErrorBlock.Icon​

ErrorBlock.Title​

ErrorBlock.Subtitle​

ErrorBlock.Action​

🔧 TypeScript Support​