メインコンテンツまでスキップ

エラーブロック

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

🚀 インストール​

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

📖 使用法​

import {ErrorBlock} from '@nodeblocks/frontend-error-block';
ライブエディター
function SimpleErrorBlock() {
  return (
    <ErrorBlock
      errorTitle="何かが間違っています"
      subtitle="予期しないエラーが発生しました。もう一度お試しいただくか、問題が続く場合はサポートにお問い合わせください。"
      actionHref="#home"
      actionText="ホームに戻る"
      titleErrorCode="Error 404"
    >
      <ErrorBlock.Icon />
      <ErrorBlock.Title />
      <ErrorBlock.Subtitle />
      <ErrorBlock.Action />
    </ErrorBlock>
  );
}
結果
Loading...

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

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

プロパティ型デフォルト説明
errorTitlestring必須目立つように表示されるエラーメッセージのタイトル
subtitlestring必須エラーに関する追加のコンテキストを提供するサブタイトル
actionHrefstring必須アクションボタンナビゲーション用のURL
actionTextstring必須アクションボタンに表示するテキスト
titleErrorCodestringundefinedタイトルの上に表示されるエラーコード（例："Error 404"）
spacingnumber | string4要素間のスペーシング（MUI Stackスペーシング）
classNamestringundefinedエラーコンテナのスタイリング用の追加CSSクラス名
sxSxProps<Theme>undefinedカスタムスタイリング用のMUIシステムプロパティ
childrenBlocksOverrideundefinedデフォルトレンダリングをオーバーライドするカスタムブロックコンポーネント

注意: このコンポーネントはすべてのMUI Stackコンポーネントプロパティを継承します。

サブコンポーネント​

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

ErrorBlock.Icon​

MUIの@mui/icons-materialからのErrorOutlineアイコンを使用してエラーアイコンをレンダリングします。

プロパティ型デフォルト説明
sxSxProps<Theme>{ fontSize: '3rem', color: theme.palette.secondary.main }カスタムスタイリング用のMUIシステムプロパティ
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはすべてのMUI SvgIconコンポーネントプロパティ（ErrorOutlineから）を継承します。

ErrorBlock.Title​

MUI Typographyを使用してエラータイトルをレンダリングします。

プロパティ型デフォルト説明
titleErrorCodeReactNodeコンテキスト値タイトルの上に表示するエラーコード
errorTitlestringコンテキスト値タイトルコンテンツ（コンテキストをオーバーライド）
childrenReactNodeコンテキストのerrorTitleカスタムコンテンツ - errorTitleをオーバーライド
variantTypographyVariant'h4'MUI Typographyバリアント
sxSxProps<Theme>{ color: theme.palette.secondary.main }カスタムスタイリング用のMUIシステムプロパティ
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはすべてのMUI Typographyコンポーネントプロパティを継承します。

ErrorBlock.Subtitle​

MUI Typographyを使用してエラーサブタイトルをレンダリングします。

プロパティ型デフォルト説明
subtitlestringコンテキスト値サブタイトルコンテンツ（コンテキストをオーバーライド）
childrenReactNodeコンテキストのsubtitleカスタムコンテンツ - subtitleをオーバーライド
sxSxProps<Theme>{ color: theme.palette.secondary.main }カスタムスタイリング用のMUIシステムプロパティ
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはすべてのMUI Typographyコンポーネントプロパティを継承します。

ErrorBlock.Action​

MUI Buttonを使用してアクションボタンをレンダリングします。

プロパティ型デフォルト説明
actionHrefstringコンテキスト値ナビゲーション用のURL（コンテキストをオーバーライド）
actionTextstringコンテキスト値ボタンテキスト（コンテキストをオーバーライド）
childrenReactNodeコンテキストのactionTextカスタムコンテンツ - actionTextをオーバーライド
hrefstringコンテキストのactionHref直接のMUI Button href（actionHrefをオーバーライド）
variantButtonVariant'contained'MUI Buttonバリアント
size'small' | 'medium' | 'large''medium'MUI Buttonサイズ
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはすべてのMUI Buttonコンポーネントプロパティを継承します。

🎨 設定例​

カスタムアイコンスタイリング​

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

カスタムタイポグラフィスタイリング​

<ErrorBlock.Title 
  variant="h3" 
  sx={{ 
    color: 'error.main',
    fontWeight: 'bold',
    textTransform: 'uppercase'
  }}>
  カスタムエラータイトル
</ErrorBlock.Title>

カスタムボタンスタイリング​

<ErrorBlock.Action 
  variant="outlined"
  color="secondary"
  size="large"
  startIcon={<HomeIcon />}
  sx={{ 
    borderRadius: 2,
    textTransform: 'none'
  }}>
  ホームに戻る
</ErrorBlock.Action>

🔧 TypeScriptサポート​

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

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

// メインコンポーネントプロパティはMUI StackPropsを拡張
interface ErrorBlockProps extends Omit<StackProps, 'children'> {
  errorTitle: string;
  subtitle: string;
  actionHref: string;
  actionText: string;
  titleErrorCode?: string;
  children?: BlocksOverride;
}

// MUIプロパティカスタマイズの例
function CustomStyledErrorBlock() {
  return (
    <ErrorBlock
      errorTitle="サーバーエラー"
      subtitle="サーバーに問題が発生しています。後でもう一度お試しください。"
      actionHref="#dashboard"
      actionText="ダッシュボードに戻る"
      titleErrorCode="Error 500"
      spacing={3}
      sx={{maxWidth: 500}}
    >
      <ErrorBlock.Icon sx={{fontSize: '4rem', color: 'error.main'}} />
      <ErrorBlock.Title variant="h3" sx={{color: 'error.main'}}>
        重大なサーバーエラー
      </ErrorBlock.Title>
      <ErrorBlock.Subtitle variant="body1" sx={{color: 'text.secondary'}}>
        この問題の修正に取り組んでいます。数分後に更新してみてください。
      </ErrorBlock.Subtitle>
      <ErrorBlock.Action variant="outlined" size="large" href="#support" sx={{minWidth: 200}}>
        サポートに連絡
      </ErrorBlock.Action>
    </ErrorBlock>
  );
}

📝 注意事項​

  • コンポーネントはデフォルトでspacing={4}のMUI Stackを使用してレイアウトします
  • デフォルトの最大幅は400pxで、中央揃えのための自動水平マージンが設定されています
  • すべてのサブコンポーネントはデフォルトで一貫した色付けのためにtheme.palette.secondary.mainを使用します
  • Iconコンポーネントは@mui/icons-materialのMUI ErrorOutlineアイコンを使用します
  • Titleはデフォルトでvariant="h4"でレンダリングされます
  • Actionボタンはデフォルトでvariant="contained"とsize="medium"を使用します
  • すべてのサブコンポーネントはMUIシステムスタイリング用のsxプロパティをサポートします
  • ブロックオーバーライドパターンにより、デフォルトブロック間にカスタムブロックを挿入できます

React、TypeScript、MUIを使用して❤️で構築されました。