Adding ErrorBoundary over Graph #1585

matt-dahlgren · 2025-07-13T19:59:04Z

Proposed Changes

Added the ErrorBoundary and created an ErrorBoundary fallback component to render if/when Graph fails to render.

...

Type of Change

(Write an X or a brief description next to the type or types that best describe your changes.)

Type	Applies?
🚨 Breaking change (fix or feature that would cause existing functionality to change)
✨ New feature (non-breaking change that adds functionality)	X
🐛 Bug fix (non-breaking change that fixes an issue)
🎨 User interface change (change to user interface; provide screenshots)
♻️ Refactoring (internal change to codebase, without changing functionality)
🚦 Test update (change that only adds or modifies tests)
📦 Dependency update (change that updates a dependency)	X
🔧 Internal (change that only affects developers or continuous integration)

Checklist

(Complete each of the following items for your pull request. Indicate that you have completed an item by changing the [ ] into a [x] in the raw text, or by clicking on the checkbox in the rendered description on GitHub.)

Before opening your pull request:

I have performed a self-review of my changes.
- Check that all changed files included in this pull request are intentional changes.
- Check that all changes are relevant to the purpose of this pull request, as described above.
I have added tests for my changes, if applicable.
- This is required for all bug fixes and new features.
I have updated the project documentation, if applicable.
- This is required for new features.
If this is my first contribution, I have added myself to the list of contributors.
I have updated the project Changelog (this is required for all changes).

After opening your pull request:

I have verified that the CircleCI checks have passed.
I have requested a review from a project maintainer.

Questions and Comments

(Include any questions or comments you have regarding your changes.)

coveralls · 2025-07-14T05:52:32Z

Pull Request Test Coverage Report for Build b735c2dd-d113-4bb4-aaf5-be6f8ceeb9d3

Details

3 of 3 (100.0%) changed or added relevant lines in 1 file are covered.
No unchanged relevant lines lost coverage.
Overall coverage increased (+0.02%) to 50.769%

Totals
Change from base Build 8897d2ec-2414-448c-8905-d5b770524b98:	0.02%
Covered Lines:	1774
Relevant Lines:	3553

💛 - Coveralls

matt-dahlgren · 2025-07-14T14:14:32Z

js/components/graph/__tests__/Container.test.js

I was only able to write one test on this file that gets the Graph to fail (and not one where the graph does not fail) as it kept on throwing errors for tests in js/components/generate/__tests__/generate.test.js

Overall, I don't think you should mock the import of Graph. Instead, you can mock a Graph method like fetchData. Also, do it within a test case rather than globally; this should allow you to implement more test cases.

david-yz-liu · 2025-07-15T22:24:01Z

CHANGELOG.md

@@ -8,6 +8,7 @@

 - Updated the Zoom In/Zoom Out buttons on the graph page to Awesome Icons from +/-
 - Updated the export button on the graph and grid pages to Awesome Icons; also added highlight effect and tooltip popup on hover
+- Added the React ErrorBoundary library and implemented an ErrorBoundary for the Graph Component in the Container and `js/components/draw/main.js`


you can just say "for the Graph component" (note lowercase "c") and don't need to include the part after that

david-yz-liu · 2025-07-15T22:24:21Z

js/components/draw/main.js

+import { ErrorBoundary } from "react-error-boundary"
+import GraphFallback from "../graph/GraphFallback"
+
+function sendEmail() {


This code is unused

david-yz-liu · 2025-07-15T22:29:04Z

js/components/graph/GraphFallback.js

+            <p style={{ marginBottom: "0.5rem" }} id="graph-fallback">
+              Your graph has failed to render. Please reload this page or report this
+              issue to David Liu at {""}
+              <span


This is a bit more complicated than it needs to be. You can use an <a> tag with the appropriate href attribute, and the formatting should be handled automatically by CSS.

david-yz-liu · 2025-07-15T22:29:32Z

js/components/graph/GraphFallback.js

+        <div className="error-boundary-box">
+          <div className="error-boundary-text">
+            <FontAwesomeIcon icon={faTriangleExclamation} id="error-svg" />
+            <p style={{ marginBottom: "0.5rem" }} id="graph-fallback">


Don't use inline styling, and instead use class-based CSS rules.

david-yz-liu · 2025-07-15T22:30:24Z

js/components/graph/__tests__/Container.test.js

+describe("Verify that the Error Fallback component is only rendered on a Graph render error", () => {
+  it("Should render the Fallback component when the Graph fails to render", () => {
+    const result = render(<Container />)
+    const foundFallback = result.container.querySelector("#graph-fallback")


In general, front-end tests should query text that the user sees, and not invisible attributes like ids or classes.

david-yz-liu · 2025-07-15T22:31:29Z

js/components/graph/__tests__/Container.test.js

Overall, I don't think you should mock the import of Graph. Instead, you can mock a Graph method like fetchData. Also, do it within a test case rather than globally; this should allow you to implement more test cases.

… into graph-error-boundary zsh:1: command not found: wq

david-yz-liu · 2025-07-22T20:33:07Z

js/components/graph/Graph.js

@@ -126,7 +126,7 @@ export class Graph extends React.Component {
    }
  }

-  getGraph = () => {
+  getGraph() {


Revert the changes in this file (they are unrelated to your PR)

david-yz-liu · 2025-07-22T20:34:31Z

js/components/graph/__tests__/Container.test.js

+  })
+
+  it("Should render the Fallback component when the Graph fails to render", async () => {
+    jest.spyOn(Graph.prototype, "getGraph").mockImplementation(() => {


I see, I think you can try mocking componentDidMount instead

david-yz-liu · 2025-07-22T20:34:51Z

package.json

@@ -11,7 +11,8 @@
    "test": "jest",
    "prettier": "prettier --write .",
    "eslint": "eslint --fix js",
-    "prepare": "husky"
+    "prepare": "husky",
+    "stylelint": "stylelint '**/*.scss'"


revert this change (unrelated to your current task)

david-yz-liu · 2025-07-22T20:35:17Z

style/app.scss

+  font-size: 20px;
+}
+
+#error-svg {


avoid id-based CSS rules; you can use class-based rules instead

matt-dahlgren added 3 commits July 13, 2025 11:59

Trying to commit this pr

cb076cf

added the CHANGELOG

34add0d

Adding yarn.lock to this commit to see if that fixes my coveralls issue

9feb293

Merge branch 'master' into graph-error-boundary

d8fb6d7

matt-dahlgren commented Jul 14, 2025

View reviewed changes

matt-dahlgren requested a review from david-yz-liu July 14, 2025 14:16

david-yz-liu reviewed Jul 15, 2025

View reviewed changes

matt-dahlgren added 3 commits July 22, 2025 14:32

Added tests and made some modifications

8be04a3

Merge branch 'master' of https://github.com/Courseography/courseography…

8287853

… into graph-error-boundary zsh:1: command not found: wq

Merging from master

0d8c2ae

matt-dahlgren requested a review from david-yz-liu July 22, 2025 18:53

david-yz-liu reviewed Jul 22, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Adding ErrorBoundary over Graph #1585

Adding ErrorBoundary over Graph #1585

Uh oh!

matt-dahlgren commented Jul 13, 2025 •

edited

Loading

Uh oh!

coveralls commented Jul 14, 2025 •

edited

Loading

Uh oh!

matt-dahlgren Jul 14, 2025

Uh oh!

david-yz-liu Jul 15, 2025

Uh oh!

david-yz-liu Jul 15, 2025

Uh oh!

david-yz-liu Jul 15, 2025

Uh oh!

david-yz-liu Jul 15, 2025

Uh oh!

david-yz-liu Jul 15, 2025

Uh oh!

david-yz-liu Jul 15, 2025

Uh oh!

david-yz-liu Jul 15, 2025

Uh oh!

david-yz-liu Jul 22, 2025

Uh oh!

david-yz-liu Jul 22, 2025

Uh oh!

david-yz-liu Jul 22, 2025

Uh oh!

david-yz-liu Jul 22, 2025

Uh oh!

Uh oh!

Adding ErrorBoundary over Graph #1585

Are you sure you want to change the base?

Adding ErrorBoundary over Graph #1585

Uh oh!

Conversation

matt-dahlgren commented Jul 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed Changes

Type of Change

Checklist

Questions and Comments

Uh oh!

coveralls commented Jul 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull Request Test Coverage Report for Build b735c2dd-d113-4bb4-aaf5-be6f8ceeb9d3

Details

💛 - Coveralls

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

matt-dahlgren commented Jul 13, 2025 •

edited

Loading

coveralls commented Jul 14, 2025 •

edited

Loading