エラーブロック

ErrorBlockコンポーネントは、ReactとTypeScriptで構築された完全にカスタマイズ可能でアクセシブルなエラー表示コンポーネントです。モダンなデザインパターン、柔軟なカスタマイズオプション、カスタムエラーメッセージとアクションのサポートを備えた完全なエラーインターフェースを提供します。

---

🚀 インストール

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

---

📖 使用法

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

基本的な使用法

function BasicErrorBlock() {
  return (
    <ErrorBlock
      errorTitle="何かが間違っています"
      subtitle="予期しないエラーが発生しました。もう一度お試しいただくか、問題が続く場合はサポートにお問い合わせください。"
      actionHref="#home"
      actionText="ホームに戻る"
      titleErrorCode="Error 404">
      <ErrorBlock.Icon icon="error_outline" />
      <ErrorBlock.Title />
      <ErrorBlock.Subtitle />
      <ErrorBlock.Action>
        戻る
      </ErrorBlock.Action>
    </ErrorBlock>
  );
}

高度な使用法

function AdvancedErrorBlock() {
  return (
    <ErrorBlock
      errorTitle="サーバー接続に失敗しました"
      subtitle="サーバーに接続できません。インターネット接続を確認して、もう一度お試しください。"
      actionHref="#dashboard"
      actionText="ダッシュボードに戻る"
      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,
          
          // 🚨 強化されたスタイリング付きカスタムアイコン
          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',
              },
            },
          },
          
          // 🎯 強化されたスタイリング付きカスタムタイトル
          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)',
              },
            },
          },
          
          // 📝 強化されたコンテンツ付きカスタムサブタイトル
          subtitle: {
            ...defaultBlocks.subtitle,
            props: {
              ...defaultBlocks.subtitle.props,
              size: 'M',
              color: 'mid-emphasis',
              style: {
                lineHeight: '1.6',
                marginBottom: '24px',
              },
            },
          },
          
          // 🔧 カスタムトラブルシューティングセクション
          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'
              }}>
                🔧 トラブルシューティング手順:
              </h4>
              <ul style={{ 
                margin: '0',
                paddingLeft: '20px',
                color: '#333',
                fontSize: '14px',
                lineHeight: '1.5'
              }}>
                <li>インターネット接続を確認してください</li>
                <li>ページを更新してください（Ctrl+R または Cmd+R）</li>
                <li>ブラウザのキャッシュとCookieをクリアしてください</li>
                <li>数分後にもう一度お試しください</li>
              </ul>
            </div>
          ),
          
          // 🎨 強化されたスタイリング付きカスタムアクション
          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',
              },
            },
          },
          
          // 📞 カスタムサポート連絡先セクション
          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'
              }}>
                まだ問題が解決しませんか？
              </p>
              <button style={{
                padding: '8px 16px',
                backgroundColor: '#28a745',
                color: 'white',
                border: 'none',
                borderRadius: '4px',
                cursor: 'pointer',
                fontSize: '14px',
                fontWeight: 'bold',
              }}>
                📞 サポートに連絡
              </button>
            </div>
          ),
        },
        blockOrder: ['icon', 'title', 'subtitle', 'troubleshooting', 'action', 'support'],
      })}
    </ErrorBlock>
  );
}

---

🔧 プロパティリファレンス

メインコンポーネントプロパティ

プロパティ	型	デフォルト	説明
errorTitle	string	必須	目立つように表示されるエラーメッセージのタイトル
subtitle	string	必須	エラーに関する追加のコンテキストを提供するサブタイトル
actionHref	string	必須	アクションボタンナビゲーション用のURL
actionText	string	必須	アクションボタンに表示するテキスト
titleErrorCode	string	undefined	タイトルの上に表示されるエラーコード（例："Error 404"）
className	string	undefined	エラーコンテナのスタイリング用の追加CSSクラス名
children	BlocksOverride	undefined	デフォルトレンダリングをオーバーライドするカスタムブロックコンポーネント

注意: メインコンポーネントはすべてのHTML div要素プロパティを継承します。

サブコンポーネント

ErrorBlockコンポーネントは複数のサブコンポーネントを提供します。すべてのサブコンポーネントは、メインコンポーネントのコンテキストからデフォルト値を受け取り、プロパティを通じてこれらの値をオーバーライドできます。

ErrorBlock.Icon

プロパティ	型	デフォルト	説明
icon	enum	"error_outline"	表示するアイコン名 - マテリアルデザインアイコンをサポート
iconSize	enum	"3-extra-large"	アイコンのサイズ
color	enum	"mid-emphasis"	アイコンのカラーテーマ
className	string	undefined	スタイリング用の追加CSSクラス名
isDisabled	boolean	false	アイコンが無効かどうか
onClick	function	undefined	アイコンクリックを処理する関数

ErrorBlock.Title

プロパティ	型	デフォルト	説明
titleErrorCode	ReactNode	コンテキストから	タイトルの上に表示するエラーコード
children	ReactNode	コンテキストから	タイトルコンテンツ - コンテキストのerrorTitleをオーバーライド
size	enum	"2XL"	タイトルのタイポグラフィサイズ
type	enum	"heading"	タイポグラフィタイプ
color	enum	"low-emphasis"	タイトルのカラーテーマ
weight	enum	"bold"	タイトルの太さ
className	string	undefined	スタイリング用の追加CSSクラス名

ErrorBlock.Subtitle

プロパティ	型	デフォルト	説明
children	ReactNode	コンテキストから	サブタイトルコンテンツ - コンテキストのsubtitleをオーバーライド
size	enum	"S"	サブタイトルのタイポグラフィサイズ
type	enum	"heading"	タイポグラフィタイプ
color	enum	"low-emphasis"	サブタイトルのカラーテーマ
weight	enum	"regular"	サブタイトルの太さ
className	string	undefined	スタイリング用の追加CSSクラス名

ErrorBlock.Action

プロパティ	型	デフォルト	説明
actionHref	string	必須	アクションボタンナビゲーション用のURL
children	ReactNode	必須	ボタン内に配置するテキスト
className	string	undefined	スタイリング用の追加CSSクラス名
fill	enum	"fill"	ボタンの塗りつぶしスタイル
icon	enum	undefined	ボタンの左側のオプションアイコン
iconColor	enum	undefined	左側アイコンの色。提供されない場合、塗りつぶしタイプのデフォルト色が使用されます
isDisabled	boolean	false	ボタンが無効で使用できないかどうか
onClick	function	undefined	ボタンクリックを処理する関数
size	enum	"M"	ボタンの垂直サイズ
textAlign	enum	"center"	ボタン内のアイコンとテキストの位置
textColor	enum	"default"	ボタンテキストの色
textEmphasis	boolean	false	ボタンテキストの太さ
textSize	enum	"M"	ボタンテキストのサイズ
type	enum	"submit"	ボタンの目的（htmlタイプに影響）

---

🔧 TypeScriptサポート

包括的な型定義による完全なTypeScriptサポート：

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

// メインコンポーネントインターフェース
interface ErrorBlockProps extends Omit<ComponentProps<typeof ErrorBlock>, 'children'> {
  className?: string;
  errorTitle: string;
  subtitle: string;
  actionHref: string;
  actionText: string;
  titleErrorCode?: string;
}

// プロパティオーバーライドの例
function CustomErrorBlock() {
  return (
    <ErrorBlock
      errorTitle="サーバーエラー"
      subtitle="サーバーに問題が発生しています。後でもう一度お試しください。"
      actionHref="/dashboard"
      actionText="ダッシュボードに戻る"
      titleErrorCode="Error 500">
      <ErrorBlock.Icon icon="error_outline" color="primary" iconSize="3-extra-large" />
      <ErrorBlock.Title titleErrorCode="🚨 Error 500" size="3XL" color="error">
        重大なサーバーエラー
      </ErrorBlock.Title>
      <ErrorBlock.Subtitle color="mid-emphasis">
        この問題の修正に取り組んでいます。数分後に更新してみてください。
      </ErrorBlock.Subtitle>
      <ErrorBlock.Action size="M" fill="fill" actionHref="/support">
        サポートに連絡
      </ErrorBlock.Action>
    </ErrorBlock>
  );
}

---

React、TypeScript、モダンWebスタンダードを使用して❤️で構築されました。