Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

The preview page keeps showing the previous report after a check fails

クローズ 初心者向け
  • 何か問題がありますか？
#168 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
88/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
react, typescript
領域
frontend, testing

調査の方向性

src/components/preview/usePreviewState.tsを読み、checkUrlの失敗分岐を追ってください。src/components/preview/PreviewApp.tsxでは、エラーとレポートがどのように表示されるかを確認できます。成功するURLの後に404とリクエスト失敗を手動で確認し、その後もう一度成功するチェックを行ってください。失敗したチェックではエラーだけが表示され、その後の成功ではレポートが表示され、PRにnpm run devでの確認結果とスクリーンショットが記載されていれば完了です。

索引モデルが issue の本文から書いたものです。

説明

bug good first issue hacktoberfest ui

On https://og.codercops.com/preview, check gohugo.io, then check gohugo.io/no-such-page. The red "Failed to fetch URL: 404 Not Found" banner shows up, but gohugo.io's whole report stays under it: the B grade, the issues and the platform previews. It looks as if the report belongs to the URL that just failed.

checkUrl in src/components/preview/usePreviewState.ts clears the old error when a check starts (line 86). When the check fails, it sets the new error and returns (lines 92 to 95) without clearing data, and the catch (lines 102 to 103) doesn't clear it either. PreviewApp.tsx shows the error (lines 41 to 45) and the report (lines 47 to 54) whenever each one is set, so you get both.

What to do

  • Clear data when a check fails, in both the !res.ok branch and the catch. Clearing it when a check starts would work too, but then the current report disappears while the next one loads.
  • Leave the address bar as it is: it only changes after a successful check (#146), and the tests on lines 201 and 220 of tests/preview/query-params.test.ts expect that.
  • A unit test isn't needed here. The hook tests (from line 116) render the hook with renderToString, which doesn't show state changes after checkUrl runs, so describe your manual check in the PR instead.

Where to look

  • src/components/preview/usePreviewState.ts: checkUrl (lines 76 to 107)
  • src/components/preview/PreviewApp.tsx: the error (lines 41 to 45) and the report (lines 47 to 54)
  • tests/preview/query-params.test.ts: the usePreviewState tests (from line 116)

Acceptance criteria

  • After a successful check, a failed one shows only the error, with no report under it
  • The same happens when the request itself fails (for example with the browser offline in DevTools)
  • A successful check after a failed one shows the new report
  • npm run check, npm run test and npm run build pass
  • The PR says how you checked it with npm run dev, with a screenshot of the error state

Want to work on this? Comment below and I'll assign it to you. Please take one issue at a time, branch off dev, and open your PR against dev with Closes #168 in the description.

主要言語
TypeScript
スター
8
フォーク
4
平均マージ
5時間 44分
マージ済み PR（30日）
83

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

codercops/ogcops のほかの issue

codercops/ogcops の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。