Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#168 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
88/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
react, typescript
Lĩnh vực
frontend, testing

Hướng nghiên cứu

Đọc src/components/preview/usePreviewState.ts và theo dõi checkUrl qua các nhánh lỗi; src/components/preview/PreviewApp.tsx cho thấy lỗi và báo cáo được hiển thị như thế nào. Kiểm tra thủ công một URL thành công, tiếp theo là lỗi 404 và lỗi yêu cầu, rồi kiểm tra thành công một lần nữa. Hoàn tất khi các lần kiểm tra thất bại chỉ hiển thị lỗi, lần thành công sau đó hiển thị báo cáo, và PR ghi lại việc kiểm tra bằng npm run dev kèm ảnh chụp màn hình.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.

Ngôn ngữ chính
TypeScript
Star
8
Fork
4
Merge trung bình
6 giờ 9 phút
Pull request đã merge (30 ngày)
66

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của codercops/ogcops

Tất cả issue của codercops/ogcops

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.