Skip to content

User-Friendly Error Handling for Input Page #277

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

User-Friendly Error Handling for Input Page #277

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b484b54
Proper Error handling
PinJinx Jul 16, 2025
4bdc8c1
Proper Error handling changes
PinJinx Jul 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 20 additions & 5 deletions eduaid_web/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion eduaid_web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"react-dom": "^18.3.1",
"react-icons": "^5.2.1",
"react-router-dom": "^6.26.0",
"react-scripts": "5.0.1",
"react-scripts": "^5.0.1",
Copy link

@coderabbitai coderabbitai bot Jul 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Verify that the version range change is intentional and secure.

The change from exact version "5.0.1" to caret range "^5.0.1" allows automatic updates to minor and patch versions. While this provides flexibility for bug fixes and security patches, ensure this aligns with your project's dependency management strategy.

🌐 Web query:

What is the latest version of react-scripts and are there any security vulnerabilities in version 5.0.1?

💡 Result:

As of July 16, 2025, the latest version of react-scripts is 5.0.1, released approximately three years ago. This version has been identified to contain several security vulnerabilities, including:

  • Regular Expression Denial of Service (ReDoS): The nth-check package, a dependency of [email protected], is susceptible to ReDoS attacks. (github.com)

  • Denial of Service (DoS): The nwsapi package, also a dependency, has been found vulnerable to DoS attacks. (github.com)

  • Cross-Site Scripting (XSS): The serialize-javascript package, used within [email protected], has a vulnerability that can lead to XSS attacks. (github.com)

Given these vulnerabilities and the lack of recent updates to react-scripts, it's advisable to consider alternative build tools for React applications. Modern tools like Vite offer improved performance, active maintenance, and better support for current React features. (blog.logrocket.com)

If you choose to continue using [email protected], ensure that all dependencies are updated to their latest secure versions and monitor for any patches or updates that may address these vulnerabilities.

Citations:

Action Required: Address Security Vulnerabilities in [email protected]

The change from "5.0.1" → "^5.0.1" does not pull in any newer, patched versions (5.0.1 is still the latest release) and that release is known to contain several security issues:

  • Regular Expression DoS in nth-check
  • Denial of Service in nwsapi
  • Cross-Site Scripting in serialize-javascript

Even with a caret range, you’ll remain on 5.x without fixes. Please choose one of the following:

• Migrate off react-scripts to a modern, actively maintained bundler (e.g. Vite)
• Stay on CRA but manually patch or override the vulnerable transitive dependencies (e.g. via resolutions or patch-package) and monitor for upstream fixes

File: eduaid_web/package.json (line 15)

🤖 Prompt for AI Agents 
In eduaid_web/package.json at line 15, the dependency react-scripts is set to
version "^5.0.1", which does not include any patched versions and contains known
security vulnerabilities. To fix this, either migrate the project away from
react-scripts to a modern bundler like Vite, or if staying with react-scripts,
add overrides or patches for the vulnerable transitive dependencies using tools
like "resolutions" or "patch-package" and keep monitoring for official fixes.

"react-switch": "^7.0.0",
"web-vitals": "^2.1.4"
},
Expand Down
41 changes: 34 additions & 7 deletions eduaid_web/src/pages/Text_Input.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@ import Switch from "react-switch";

const Text_Input = () => {
const [text, setText] = useState("");
const [errorText, setErrorText] = useState("");
const [difficulty, setDifficulty] = useState("Easy Difficulty");
const [numQuestions, setNumQuestions] = useState(10);
const [loading, setLoading] = useState(false);
const fileInputRef = useRef(null);
const [fileContent, setFileContent] = useState("");
const [docUrl, setDocUrl] = useState("");
const [isToggleOn, setIsToggleOn] = useState(0);

Expand All @@ -32,10 +32,15 @@ const Text_Input = () => {
body: formData,
});
const data = await response.json();
setText(data.content || data.error);
if (data.content) {
setText(data.content);
setErrorText("");
} else {
setErrorText(data.error || "Unknown error");
}
} catch (error) {
console.error("Error uploading file:", error);
setText("Error uploading file");
setErrorText("Error uploading file");
}
}
};
Expand All @@ -61,18 +66,22 @@ const Text_Input = () => {
},
body: JSON.stringify({ document_url: docUrl }),
});

if (response.ok) {
const data = await response.json();
setDocUrl("");
setText(data || "Error in retrieving");
if (data?.content) {
setText(data.content);
setErrorText("");
} else {
setErrorText(data?.error || "Error retrieving Google Doc content");
}
} else {
console.error("Error retrieving Google Doc content");
setText("Error retrieving Google Doc content");
setErrorText("Error retrieving Google Doc content");
}
} catch (error) {
console.error("Error:", error);
setText("Error retrieving Google Doc content");
setErrorText("Error retrieving Google Doc content");
} finally {
setLoading(false);
}
Expand Down Expand Up @@ -169,6 +178,24 @@ const Text_Input = () => {
</div>
)}

{/*Pop up to display when error occurs while uploading tthe file*/}
{errorText && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-[#02000F] bg-opacity-40 backdrop-blur-sm">
<div className="bg-gradient-to-r from-[#7600F2] to-[#00CBE7] rounded-2xl p-1 max-w-md w-full">
<div className="bg-black rounded-2xl p-6 text-center text-white">
<div className="text-xl font-extrabold mb-3">Error</div>
<div className="mb-6 text-white/90">{errorText}</div>
<button
className="bg-gradient-to-r from-[#7600F2] to-[#00CBE7] hover:opacity-90 transition rounded-xl px-5 py-2 font-semibold"
onClick={() => setErrorText("")}
>
Close
</button>
</div>
</div>
</div>
)}

<div className={`w-full h-full bg-cust bg-opacity-50 ${loading ? "pointer-events-none" : ""}`}>
{/* Header */}
<a href="/" className="block">
Expand Down