Feature add error page (新機能：エラーページの追加)

[SakaYq4875]

エラーを自分で起こすことなんてできないので、どんなページになるか想像しながらGithub Copilotと書きました。
また、tsconfig.jsonで大文字と小文字の区別でファイルシステムが違うOSの間で起こるエラーをなくせる機能を有効にしました。

Summary by CodeRabbit

• New Features

  • Added a styled error page with retry functionality for improved error handling and user experience.

• Style

  • New responsive error-screen styles, dark‑mode support, improved typography, visible focus ring and hover transitions for accessibility.

• Chores

  • Enabled compiler option to enforce consistent filename casing across the project.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
kss-it-committee-github-io	Ready	Preview, Comment	Apr 22, 2026 0:09am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 16347031-7a50-4eb6-98c7-e518dc0ef8bb

📥 Commits

Reviewing files that changed from the base of the PR and between 853b9b0 and 2938794.

📒 Files selected for processing (1)

• src/app/error.module.css

✅ Files skipped from review due to trivial changes (1)

• src/app/error.module.css

---

📝 Walkthrough

Walkthrough

Added a client-side React error page component and its CSS module, plus enabled TypeScript's filename-casing enforcement via tsconfig.

Changes

Cohort / File(s)	Summary
Error Page component & styles src/app/error.tsx, src/app/error.module.css	New client-side React error UI (Japanese text) and CSS module: centered full-viewport layout, card, title/description typography, primary reset button with hover/focus states, and dark-mode media query. Verify localization and focus styling.
TypeScript config tsconfig.json	Enabled forceConsistentCasingInFileNames: true. Check for import path casing mismatches across the repo.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

• katsumata68
• Shirym-min
• hatuna-827
• kinoto0103

Poem

🐰 I hopped in with a tiny fix,
A cozy card, a button mix.
Click reset, the worry fades away,
Dark or light, I'll guide the way.
Quiet paws, and code that stays in line.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: adding a new error page. It directly summarizes the primary changeset across all three modified files (error.tsx, error.module.css, and tsconfig.json configuration).
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/add-error-page

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/app/error.module.css`:
- Around line 1-56: Add a dark-mode branch using the prefers-color-scheme media
query that overrides the relevant classes (.container, .card, .title,
.description, .button) with dark-compatible colors and adjusted borders/shadows;
specifically, create a `@media` (prefers-color-scheme: dark) block that sets a
dark background for .container, a darker background and subtle border for .card,
lighter text colors for .title and .description, and alternate .button
background/hover/focus-visible styles (and ensure contrast for disabled states)
so the existing selectors (container, card, title, description, button) behave
correctly in dark mode.

In `@src/app/error.tsx`:
- Line 10: The ErrorPage function destructures an unused error prop causing lint
warnings; remove the unused `error` binding from the parameter list (keep
`reset` and the type ErrorProps) so the function signature becomes ErrorPage({
reset }: ErrorProps) and update any references if present to use the remaining
props (function name ErrorPage, type ErrorProps).
- Line 3: The import of the CSS module uses a relative path; update it to use
the project path alias by replacing the "./error.module.css" import with the
alias-based import "@/app/error.module.css" so the module import in
src/app/error.tsx follows the `@/*` → `./src/*` rule (ensure the import
statement that references style from "./error.module.css" is changed to use
"@/app/error.module.css").

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 678058ff-a3c9-4acf-9db1-db39a4c2161c

📥 Commits

Reviewing files that changed from the base of the PR and between 38556da and 853b9b0.

📒 Files selected for processing (3)

• src/app/error.module.css
• src/app/error.tsx
• tsconfig.json

[rotarymars]

普通に例外が飛べばerrorになって表示できるようです、調べる限りでは。