Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta Adatta ai principianti
  • Qualcosa non va?
#168 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
88/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
frontend, testing

Direzione di ricerca

Leggi src/components/preview/usePreviewState.ts e segui checkUrl nei suoi rami di errore; src/components/preview/PreviewApp.tsx mostra come vengono visualizzati l’errore e il report. Verifica manualmente un URL valido seguito da un 404 e da un errore della richiesta, quindi esegui di nuovo una verifica valida. Il lavoro è completo quando le verifiche non riuscite mostrano solo l’errore, un successo successivo mostra il relativo report e il PR documenta la verifica con npm run dev e uno screenshot.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.

Lingua principale
TypeScript
Stelle
8
Fork
4
Merge medio
6h 9m
PR unite (30g)
66

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di codercops/ogcops

Tutte le issue di codercops/ogcops

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.