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@0.1.6

---

📖 Usage

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

Basic Usage

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>
  );
}

Advanced Usage

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>
  );
}

---

🔧 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.