gateway-proxy-debug

作成者: vercel

Vercel-OpenCLawのゲートウェイとプロキシデバッグ: /gatewayルーティング、HTMLインジェクション、WebSocketリライト、gateway-tokenハンドオフ、待機ページ、ステータスハートビート、…

npx skills add https://github.com/vercel-labs/vercel-openclaw --skill gateway-proxy-debug

Gateway Proxy Debug

Use this skill when the wrapper can reach a sandbox but /gateway, HTML injection, WebSockets, or token handoff is broken.

Evidence First

Collect:

  • Browser URL and failing request path.
  • GET /api/status.
  • GET /api/admin/sandbox-diag.
  • GET /api/admin/logs filtered for proxy., gateway., sandbox.port_, token..
  • Network trace for /gateway/*, WebSocket upgrade, and POST /api/status heartbeat.

Keep app auth, deployment protection bypass, gateway token, and AI Gateway auth separate. Do not paste gateway tokens in artifacts.

Path Diagram

browser -> wrapper auth -> /gateway route -> ensure sandbox running
  -> fresh gateway token -> sandbox port URL -> OpenClaw gateway
  -> HTML injection -> WebSocket rewrite -> heartbeat POST /api/status

Mark each edge unknown, verified-good, or verified-bad.

Common Failure Splits

  • Waiting page is correct because sandbox is not ready yet.
  • Proxy auth failed before any sandbox request.
  • Cached port URL is stale and needs invalidation.
  • Gateway token is stale or not injected.
  • HTML injection failed or produced a malformed script.
  • WebSocket URL rewrite points at the wrong origin/path.
  • Heartbeat is missing and sandbox times out.

Fix Boundaries

  • Primary: src/app/gateway/[[...path]]/route.ts.
  • Helpers: src/server/proxy/{proxy-route-utils,htmlInjection,waitingPage}.ts.
  • Lifecycle dependencies: src/server/sandbox/lifecycle.ts, src/server/public-url.ts.
  • Tests: proxy/html injection tests plus lifecycle tests for heartbeat interactions.
  • Docs: lat.md/sandbox-lifecycle.md, docs/architecture.md, docs/deployment-protection.md.

Verification

Run focused tests when available, then:

node scripts/verify.mjs --steps=test,typecheck
lat check

For UI/WebSocket fixes, verify in a browser or with a smoke check that HTML contains the injected script and WebSocket traffic reaches the sandbox.

vercelのその他のスキル

benchmark-sandbox
vercel
Vercel Sandbox上でvercel-pluginの評価シナリオを実行し、ローカルのWezTermパネルの代わりに使用します。Claude Codeとプラグインがプリインストールされた一時的なマイクロVMをプロビジョニングします…
official
emil-design-eng
vercel
このスキルは、Emil KowalskiのUIポリッシュ、コンポーネントデザイン、アニメーションの決定、そしてソフトウェアを素晴らしいものにする目に見えない細部に関する哲学をエンコードしています。
official
vercel-react-best-practices
vercel
Vercel EngineeringによるReactおよびNext.jsのパフォーマンス最適化ガイドライン。このスキルは、React/Next.jsのコードを記述、レビュー、またはリファクタリングする際に使用すべきものです。
official
vercel-react-best-practices
vercel
Vercel EngineeringによるReactおよびNext.jsのパフォーマンス最適化ガイドライン。このスキルは、React/Next.jsのコードを記述、レビュー、またはリファクタリングする際に使用すべきものです。
official
write-guide
vercel
現実世界のユースケースを段階的な例を通じて教える技術ガイドを作成します。概念は読者が必要とするタイミングでのみ導入されます。
official
release
vercel
Vercelプラグインをリリース — ゲートを実行し、バージョンを上げ、アーティファクトを生成し、コミットしてプッシュします。「リリースして」「出荷して」「バージョンを上げてプッシュして」または「リリースを切って」と依頼されたときに使用します。
official
deepsec
vercel
dev3000からチェックアウトしたVercelプロジェクトに対してDeepSecを実行します。ワンクリックDeepSecセットアップ、プロジェクトコンテキストのブートストラップ、制限付きの初回パス処理などに使用します。
official
backport-pr
vercel
マージされたNext.jsのプルリクエストをcanaryからnext-16-2などの以前のリリースブランチにバックポートします。ユーザーがバックポート、チェリーピック、またはオープンを依頼した場合に使用します…
official