Errorブロック

ErrorBlock は、MUI 上に構築された中央揃えのエラーステータスレイアウトです。

インストール

npm

npm install @nodeblocks/frontend-error-block

yarn

yarn add @nodeblocks/frontend-error-block

pnpm

pnpm add @nodeblocks/frontend-error-block

bun

bun add @nodeblocks/frontend-error-block

必要なもの

項目	用途
errorTitle	タイトルブロックに表示するメイン見出し
subtitle	タイトル下に表示する補足メッセージ
actionHref	プライマリアクションボタンの遷移先 URL
actionText	プライマリアクションボタンのラベル
titleErrorCode (任意)	タイトルの上に表示する短いコードまたはラベル（例: Error 404）

静的コンテンツ用プロパティ

ErrorBlock はメッセージの状態を管理しません。コピーとリンクはプロパティとして直接渡してください。

コード例

クイックスタート

ライブエディター

function Example() {
  return (
    <ErrorBlock
      errorTitle="ページが見つかりません"
      subtitle="アクセスしようとしたページは見つからないか、すでに存在しません。"
      actionHref="#home"
      actionText="ホームに戻る"
    />
  );
}

結果

Loading...

ラベルと URL

ライブエディター

function Example() {
  return (
    <ErrorBlock
      errorTitle="サーバーへの接続に失敗しました"
      subtitle="サーバーに接続できません。接続を確認して、もう一度お試しください。"
      actionHref="#dashboard"
      actionText="ダッシュボードに戻る"
      titleErrorCode="Error 500"
    />
  );
}

結果

Loading...

複合コンポーネント

子ブロックを使ってコピー、リンク、スタイルをカスタマイズします。ルートではなくサブコンポーネントにコンテンツを渡します。

ライブエディター

function Example() {
  return (
    <ErrorBlock errorTitle="ページが見つかりません" subtitle="" actionHref="" actionText="">
      <ErrorBlock.Icon sx={{fontSize: 70}} fontSize="large" />
      <ErrorBlock.Title titleErrorCode="Error 404" />
      <ErrorBlock.Subtitle>アクセスしようとしたページは見つからないか、すでに存在しません。</ErrorBlock.Subtitle>
      <ErrorBlock.Action actionHref="#home" actionText="ホームに戻る" />
    </ErrorBlock>
  );
}

結果

Loading...

ブロックのオーバーライド

関数の children を使ってデフォルトブロックと表示順序をオーバーライドします。

ライブエディター

function Example() {
  return (
    <ErrorBlock
      errorTitle="問題が発生しました"
      subtitle="予期しないエラーが発生しました。もう一度お試しいただくか、問題が続く場合はサポートにお問い合わせください。"
      actionHref="#home"
      actionText="ホームに戻る"
      titleErrorCode="Error 503"
    >
      {({defaultBlocks, defaultBlockOrder}) => ({
        blocks: {
          ...defaultBlocks,
          troubleshooting: (
            <div
              style={{
                background: '#eef4ff',
                border: '1px solid #cddcff',
                borderRadius: '8px',
                padding: '12px',
                fontSize: '14px',
                textAlign: 'left',
              }}
            >
              ページを更新するか、ブラウザのキャッシュをクリアしてみてください。
            </div>
          ),
        },
        blockOrder: ['icon', 'title', 'subtitle', 'troubleshooting', 'action'],
      })}
    </ErrorBlock>
  );
}

結果

Loading...

ブロックのオーバーライドを使うタイミング

ブロックの表示順序を変更したり、デフォルトの UI ブロックを差し替えたり、アイコン・タイトル・サブタイトル・アクションの間にカスタムコンテンツを挿入する必要がある場合にオーバーライドを使います。

主要プロパティ

コアプロパティ

プロパティ	型	必須	デフォルト	説明
errorTitle	string	はい	-	メインのエラー見出し
subtitle	string	はい	-	タイトル下の補足メッセージ
actionHref	string	はい	-	プライマリアクションボタンの href
actionText	string	はい	-	プライマリアクションボタンのラベル

コンテンツプロパティ

プロパティ	型	必須	デフォルト	説明
titleErrorCode	string	いいえ	undefined	errorTitle の上に表示する任意のコードまたはラベル

レイアウトと構成プロパティ

プロパティ	型	必須	デフォルト	説明
children	BlocksOverride | ReactNode	いいえ	undefined	複合サブコンポーネント、またはブロックオーバーライド関数
spacing	StackProps['spacing']	いいえ	4	描画されるブロック間の縦方向の間隔
blockSpacingBefore	Record<string, StackProps['spacing']>	いいえ	{ title: { xs: 2, sm: 3 }, action: { xs: 4, sm: 6 } }	特定のブロック（icon、title、subtitle、action）の前に上マージンを追加
className	string	いいえ	undefined	ルートコンテナのクラス名（nbb-error-block も適用されます）
sx	SxProps	いいえ	undefined	ルート Stack 用の MUI システムスタイル

ErrorBlock は StackProps（children を除く）を継承するため、ルートでは標準のレイアウトプロパティをサポートします。デフォルトのブロック順序は icon → title → subtitle → action です。

サブコンポーネントはコンテキストから値を読み取り、MUI プロパティの一部を受け取れます:

• ErrorBlock.Icon — ErrorOutlined のプロパティ（sx、className など）
• ErrorBlock.Title — Typography のプロパティに加え、任意の titleErrorCode、errorTitle、children
• ErrorBlock.Subtitle — Typography のプロパティに加え、任意の subtitle または children
• ErrorBlock.Action — Button のプロパティに加え、任意の actionHref、actionText、children

デフォルト UI ブロック

ブロック	ベース	備考
ErrorBlock (ルート)	Stack	maxWidth: 350、textAlign="center"、デフォルト spacing={4} の中央揃えコンテナ
ErrorBlock.Icon	ErrorOutlined	secondary.main を使った 48px アイコン
ErrorBlock.Title	Typography (variant="h4")	設定時は titleErrorCode をタイトルの上に表示
ErrorBlock.Subtitle	Typography	subtitle からのサブタイトル文言
ErrorBlock.Action	Button (variant="contained")	actionHref へ遷移

TypeScript

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

type ErrorBlockProps = ComponentProps<typeof ErrorBlock>;

function NotFoundError(props: Pick<ErrorBlockProps, 'actionHref' | 'actionText'>) {
  return (
    <ErrorBlock
      errorTitle="ページが見つかりません"
      subtitle="リクエストされたページは存在しないか、移動されました。"
      titleErrorCode="Error 404"
      {...props}
    />
  );
}