apiでエラーが起きた時用のアラートの表示

[komaitaira]

概要

掲題の通り

対応の詳細

• muiのAlertコンポーネントを使用したAlertErrorコンポーネントを作成
  • エラー表示はapiリクエスト時くらいしかユースケースはなさそうなのでそんなに汎用的なものにはしてません

レビュー観点

エラー時の文言とか、これで良さそう？

動作確認

• wonder-app/src/mocks/browser.jsのレスポンス返却値を下記のように修正すればエラーが返るようになるので確認できるはず https://github.com/Apocalyptic-Wonderboiled/wonder-app/blob/develop/src/mocks/browser.js#L19

  export const worker = setupWorker(
  rest.post('/v1/chat/completions', (req, res, ctx) => {
  
  ・・・中略・・・
  
  return res(
    ctx.status(200), ←ここを500に変えるだけ
    ctx.delay(2000),
    ctx.json({
      content: `
        ${prefecture.kanji}の説明だよ〜〜〜〜。${prefecture.kanji}の説明だよ〜〜〜〜。
        ${prefecture.kanji}の説明だよ〜〜〜〜。${prefecture.kanji}の説明だよ〜〜〜〜。
        ${prefecture.kanji}の説明だよ〜〜〜〜。${prefecture.kanji}の説明だよ〜〜〜〜。
        ${prefecture.kanji}の説明だよ〜〜〜〜。${prefecture.kanji}の説明だよ〜〜〜〜。
        ${prefecture.kanji}の説明だよ〜〜〜〜。${prefecture.kanji}の説明だよ〜〜〜〜。
        ${prefecture.kanji}の説明だよ〜〜〜〜。${prefecture.kanji}の説明だよ〜〜〜〜。
        ${prefecture.kanji}の説明だよ〜〜〜〜。${prefecture.kanji}の説明だよ〜〜〜〜。
        ${prefecture.kanji}の説明だよ〜〜〜〜。${prefecture.kanji}の説明だよ〜〜〜〜。
        ${prefecture.kanji}の説明だよ〜〜〜〜。${prefecture.kanji}の説明だよ〜〜〜〜。
        ${prefecture.kanji}の説明だよ〜〜〜〜。${prefecture.kanji}の説明だよ〜〜〜〜。
        ${prefecture.kanji}の説明だよ〜〜〜〜。${prefecture.kanji}の説明だよ〜〜〜〜。
        ${prefecture.kanji}の説明だよ〜〜〜〜。${prefecture.kanji}の説明だよ〜〜〜〜。
        ${prefecture.kanji}の説明だよ〜〜〜〜。${prefecture.kanji}の説明だよ〜〜〜〜。
        ${prefecture.kanji}の説明だよ〜〜〜〜。${prefecture.kanji}の説明だよ〜〜〜〜。
      `,
    }),
  );
  }),
  );

イメージ

https://github.com/Apocalyptic-Wonderboiled/wonder-app/assets/63830279/38b72061-cbd6-4a6a-8e23-58e5233fee5e