障害対応訓練

障害対応訓練とは？

実際のシステム障害発生時に備えて、意図的に障害をシミュレーションし、チームの対応力や連携を確認・向上させる活動

今回のプロジェクトでは、壊れても問題ない Sandbox 環境上に疑似サービス「うん用API」を構築し、プレイヤーが監視画面、ログ、ターミナル、Runbook(手順書) などを使って障害対応を体験するものになっています。

想定使用ユーザー

障害対応訓練をしたことがない人
障害対応訓練を気軽にやってみたい人
理不尽な障害に立ち向いたい人

難易度として、初級、中級、上級と用意している。初級は、Runbook通りに対応していけるが、中級、上級と上がっていくにつれて理不尽になっていく

画面説明

難易度を選ぶ

シナリオを選ぶ

詳細を読んで開始おす

runbookなどをみながら障害対応を進める

技術スタック

フロントエンド

• Preact (TypeScript) • Vite • xterm.js（ターミナル） • Canvas API + MediaRecorder（ユーザー操作録画） • WebSocket / SSE（ターミナル、イベント配信）

バックエンド

• Hono (TypeScript) • Cloudflare Sandbox SDK（実行環境） • Durable Objects（セッション管理）

DB

• Cloudflare D1（セッション、リプレイ metadata保存） • Cloudflare R2（リプレイ動画、イベントログ保存） • Cloudflare KV

技術こだわりポイント

Cloudflare Sandbox SDK を使ったサンドボックス環境提供

プレイヤーのターミナル操作が、Sandbox環境の実プロセスに届き、プロセス停止、ディスク枯渇、バッチ失敗などを「本当に壊す」体験を実現

canvas を使った録画

ブラウザ全体ではなくゲーム画面(Canvas)だけを captureStream + MediaRecorderで録画で録画

Screen Capture APIを使えば、画面キャプチャできるが、自分でキャプチャする画面を選んだりする手間が発生してしまう。できる限りユーザーがスムーズにゲームを始められるようにcaptureStreamで自然の流れで録画が開始されるようにした

captureStream https://developer.mozilla.org/ja/docs/Web/API/HTMLCanvasElement/captureStream MediaRecorder https://developer.mozilla.org/ja/docs/Web/API/MediaRecorder

録画と共にイベントログを残した

ただユーザーが操作した録画を撮るだけでなく、どんなコマンドをいつ実行したかのイベントを保存することで、動画のタイムラインを作成できるようにした。タイムライン上のイベントをクリックすることで、録画の該当シーンに移動できるため、自分の行動を振り返りしやすいように工夫している。

今回のプロダクトでは、Cloudflare Sandbox の PTY(Bun.terminal) を xterm.js + SandboxAddonでWebSocket接続している。ただ、Bun.terminal側がCtrl+Cを処理してくれないので、正規の方法でプロセスを中断したりできない。修正用のPRが上がってたりするが、Bun本体にマージされていないためCtrl + Cが使えない https://github.com/oven-sh/bun/pull/25834 https://github.com/oven-sh/bun/issues/25779

なので、Sandboxの外からbashのプロセスグループに kill -INTを送って、擬似的にCtrl + Cでの中断を再現している。

録画したい要素をCanvasに全て入れる必要がある

今回、録画で使っているのがCanvasをキャプチャするものなので、Canvasの中に全て収めないといけない。 Canvasの要素調整大変

障害対応訓練

障害が起こった時にどんなふうに対応すべきか訓練できるサービス

推しアイデア

作った背景

推し技術

プロジェクト詳細

障害対応訓練

テーマ