test: website page with intentional issues (React Doctor CI demo)#685
test: website page with intentional issues (React Doctor CI demo)#685rayhanadev wants to merge 1 commit into
Conversation
Adds a `/preview` route and a `DiagnosticsPreview` client component that deliberately trip a mix of React Doctor rules (no-eval, alt-text, jsx-key, no-secrets-in-client-code, no-array-index-as-key, nextjs-no-img-element, control-has-associated-label) so we can see how React Doctor renders errors and warnings in CI (sticky summary comment + inline review comments). Not intended to merge. Co-authored-by: Cursor <cursoragent@cursor.com>
This comment was marked as off-topic.
This comment was marked as off-topic.
|
React Doctor found 9 new issues in 2 files · 4 errors & 5 warnings · score 82 / 100 (Great) · 0 fixed · vs Errors
5 warnings
Reviewed by React Doctor for commit |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| // Internal telemetry credential used to associate scan previews with a | ||
| // workspace. (Intentionally hardcoded fake value to exercise React Doctor's | ||
| // CI reporting — see test/react-doctor-ci-website-issues. Not a real secret.) | ||
| const telemetryToken = "demo-telemetry-token-not-a-real-secret-001"; |
There was a problem hiding this comment.
React Doctor · react-doctor/no-secrets-in-client-code (warning)
Hardcoding "telemetryToken" in client code is a security vulnerability: the secret ships to the browser where anyone can read it.
Fix → Move secrets to server-only code. In Next.js, only NEXT_PUBLIC_* env vars are exposed to the browser, and they must not contain secrets
|
|
||
| // Let power users type a quick expression to narrow the rule list. | ||
| const matchesFilter = (rule: string) => { | ||
| return eval(`${JSON.stringify(rule)}.includes(${JSON.stringify(filter)})`) as boolean; |
There was a problem hiding this comment.
React Doctor · react-doctor/no-eval (error)
eval() is a code-injection vulnerability: it runs any string as code.
Fix → Use JSON.parse for data, or rewrite the code so it doesn't build and run code from strings.
|
|
||
| return ( | ||
| <div className="rounded border border-white/10 p-4"> | ||
| <img src={thumbnailUrl} className="mb-3 w-full rounded" /> |
There was a problem hiding this comment.
React Doctor · react-doctor/alt-text (error)
Blind users can't use this image because screen readers skip it without alt, so add alt="..." (or alt="" if decorative).
Fix → Give every meaningful image an alt, aria-label, or aria-labelledby.
|
|
||
| return ( | ||
| <div className="rounded border border-white/10 p-4"> | ||
| <img src={thumbnailUrl} className="mb-3 w-full rounded" /> |
There was a problem hiding this comment.
React Doctor · react-doctor/nextjs-no-img-element (warning)
Plain ships unoptimized, oversized images to your users.
Fix → import Image from 'next/image' for automatic WebP/AVIF, lazy loading, and responsive srcset
| <div className="rounded border border-white/10 p-4"> | ||
| <img src={thumbnailUrl} className="mb-3 w-full rounded" /> | ||
|
|
||
| <input |
There was a problem hiding this comment.
React Doctor · react-doctor/control-has-associated-label (warning)
Blind users can't tell what this control does because screen readers find no label, so add visible text, aria-label, or aria-labelledby.
Fix → Give every interactive control a label screen readers can read.
|
|
||
| <ul className="text-sm"> | ||
| {visibleIssues.map((issue, index) => ( | ||
| <IssueRow key={index} issue={issue} /> |
There was a problem hiding this comment.
React Doctor · react-doctor/no-array-index-as-key (warning)
Your users can see & submit the wrong data when this list reorders or filters, so use a stable id like key={item.id}, not the array index "index".
Fix → Use a stable id from the item, like key={item.id} or key={item.slug}. Index keys break when the list reorders or filters.
|
|
||
| <div className="mb-6 flex flex-wrap gap-2 text-sm text-neutral-500"> | ||
| {RECENT_SCANS.map((path) => ( | ||
| <span className="rounded border border-white/10 px-2 py-1">{path}</span> |
There was a problem hiding this comment.
React Doctor · react-doctor/jsx-key (error)
Your users can see the wrong data when this list reorders.
Fix → Add a key={...} prop to each element produced inside .map / array literal.
| ))} | ||
| </div> | ||
|
|
||
| <img src="/og.png" className="mb-6 w-full rounded border border-white/10" /> |
There was a problem hiding this comment.
React Doctor · react-doctor/alt-text (error)
Blind users can't use this image because screen readers skip it without alt, so add alt="..." (or alt="" if decorative).
Fix → Give every meaningful image an alt, aria-label, or aria-labelledby.
| ))} | ||
| </div> | ||
|
|
||
| <img src="/og.png" className="mb-6 w-full rounded border border-white/10" /> |
There was a problem hiding this comment.
React Doctor · react-doctor/nextjs-no-img-element (warning)
Plain ships unoptimized, oversized images to your users.
Fix → import Image from 'next/image' for automatic WebP/AVIF, lazy loading, and responsive srcset
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
This comment was marked as duplicate.
This comment was marked as duplicate.
Sorry, something went wrong.
1 participant
Warning
Test/demo PR — not intended to merge. It intentionally introduces problems in the
websitepackage so we can see how React Doctor renders errors and warnings in CI (the sticky summary comment + inline review comments posted by.github/workflows/react-doctor.yml).What this adds
Two new files under
packages/websitethat deliberately trip a spread of React Doctor rules across both error and warning severities:src/app/preview/page.tsx— a/previewApp Router pagesrc/components/diagnostics-preview.tsx— a"use client"component it rendersEverything is otherwise type-valid (so
next build/tscstill pass); the only intentional problems are the React Doctor rule violations below.Intentional issues (verified locally with
react-doctor)Errors (4)
app/preview/page.tsx:25jsx-key(missing key in list)app/preview/page.tsx:29alt-text(image missing alt)components/diagnostics-preview.tsx:32no-evalcomponents/diagnostics-preview.tsx:39alt-text(image missing alt)Warnings (5)
components/diagnostics-preview.tsx:8no-secrets-in-client-code(fake value — not a real secret)app/preview/page.tsx:29nextjs-no-img-elementcomponents/diagnostics-preview.tsx:39nextjs-no-img-elementcomponents/diagnostics-preview.tsx:41control-has-associated-labelcomponents/diagnostics-preview.tsx:51no-array-index-as-keyTotal: 4 errors + 5 warnings across 2 files.
What to expect in CI
The repo's
React Doctorworkflow runs the local CLI in baseline mode withblocking: none, so it should post a sticky summary comment and inline review comments without failing the check. Use this PR to eyeball that rendering (errors block expanded, warnings collapsed, inline comments anchored to the changed lines).Unrelated checks (lint/build) may also flag these patterns — that's expected and not the point of this PR.
Made with Cursor
Note
Low Risk
Demo-only additions with deliberate lint violations; not meant to ship to production and no real secrets are introduced.
Overview
Adds a demo
/previewpage and aDiagnosticsPreviewclient component inpackages/websiteso React Doctor CI can show how errors and warnings render in PR comments.The page lists sample scan paths and sample issues, then renders the preview widget with a thumbnail and issue list. The component adds a rule filter (implemented with
eval), a fake telemetry token on the filter input,<img>withoutalt, array index keys on list rows, and a missingkeyon mapped spans—on purpose for the CI demo, not for production merge.Reviewed by Cursor Bugbot for commit 3dae1ee. Bugbot is set up for automated code reviews on this repo. Configure here.