Sweep: Make a more user friendly ErrorFallback component - javascript error messages should not be shown to the user

[IvoLeist]

Checklist

• Create convertPheno_client/src/code/utils/errorMessages.js ✓ 4c14f05 Edit
• Running GitHub Actions for convertPheno_client/src/code/utils/errorMessages.js ✓ Edit
• Modify convertPheno_client/src/code/views/conversion/Conversion.jsx ✓ 8609418 Edit
• Running GitHub Actions for convertPheno_client/src/code/views/conversion/Conversion.jsx ✓ Edit

[sweep-ai]

Here's the PR! #14. See Sweep's process at dashboard.

⚡ Sweep Basic Tier: I'm using GPT-4. You have 4 GPT-4 tickets left for the month and 3 for the day. (tracking ID: c746d822f2)

For more GPT-4 tickets, visit our payment portal. For a one week free trial, try Sweep Pro (unlimited GPT-4 tickets).

---

Actions (click)

• ↻ Restart Sweep

Sandbox Execution ✓

Here are the sandbox execution logs prior to making any changes:

Sandbox logs for cd434c7

Checking convertPheno_client/src/code/views/conversion/Conversion.jsx for syntax errors... ✅ convertPheno_client/src/code/views/conversion/Conversion.jsx has no syntax errors! 1/1 ✓

Checking convertPheno_client/src/code/views/conversion/Conversion.jsx for syntax errors...
✅ convertPheno_client/src/code/views/conversion/Conversion.jsx has no syntax errors!

Sandbox passed on the latest main, so sandbox checks will be enabled for this issue.

---

Step 1: 🔎 Searching

I found the following snippets in your repository. I will now analyze these snippets and come up with a plan.

Some code snippets I think are relevant in decreasing order of relevance (click to expand). If some file is missing from here, you can mention the path in the ticket description.

convert-pheno-ui/convertPheno_client/src/code/views/conversion/Conversion.jsx

Lines 1 to 32 in 3a9d7c3

	/**
	Conversion component
	This file is part of convert-pheno-ui
	Last modified: Dec/08/2023
	Copyright (C) 2022-2023 Ivo Christopher Leist - CNAG (Ivo.leist@cnag.eu)
	License: GPL-3.0 license
	*/
	import React, { useState, useEffect } from "react";
	import { ErrorBoundary } from "react-error-boundary";
	import { useParams } from "react-router-dom";
	import { Box, Typography } from "@mui/material";
	import Submission from "./ components/submission/Submission";
	import ClinicalData from "./ components/clinicalData/ClinicalData";
	import useFinishedJobs from "./hooks/finishedJobs";
	// TODO
	// Make a more user friendly ErrorFallback component
	// javascript error messages should not be shown to the user
	const ErrorFallback = ({ error, resetErrorBoundary }) => (
	<div role="alert">
	<p>Something went wrong:</p>
	<pre>{error.message}</pre>
	<button onClick={resetErrorBoundary}>Try again</button>
	</div>
	);

---

Step 2: ⌨️ Coding

• Create convertPheno_client/src/code/utils/errorMessages.js ✓ 4c14f05 Edit

Create convertPheno_client/src/code/utils/errorMessages.js with contents:
• Create a new file named errorMessages.js in the utils directory.
• In this file, define a JavaScript object that maps JavaScript error messages to user-friendly messages. The keys of this object should be the JavaScript error messages and the values should be the user-friendly messages.
• Export a function named getFriendlyErrorMessage that takes a JavaScript error message as input. This function should return the user-friendly message corresponding to the input error message from the object. If the input error message is not in the object, the function should return a default user-friendly message.

• Running GitHub Actions for convertPheno_client/src/code/utils/errorMessages.js ✓ Edit

Check convertPheno_client/src/code/utils/errorMessages.js with contents:

Ran GitHub Actions for 4c14f05aed58880f4b026be8d779845726f44861:

• Modify convertPheno_client/src/code/views/conversion/Conversion.jsx ✓ 8609418 Edit

Modify convertPheno_client/src/code/views/conversion/Conversion.jsx with contents:
• Import the getFriendlyErrorMessage function from the errorMessages.js file at the top of the Conversion.jsx file.
• In the ErrorFallback component, replace the line that displays the error message with a call to the getFriendlyErrorMessage function. Pass the error message to this function to get the user-friendly message.
• Display the user-friendly message instead of the JavaScript error message.

---

+++
@@ -15,9 +15,10 @@
import { useParams } from "react-router-dom";
import { Box, Typography } from "@mui/material";

-import Submission from "./ components/submission/Submission";
-import ClinicalData from "./ components/clinicalData/ClinicalData";
+import Submission from "./components/submission/Submission";
+import ClinicalData from "./components/clinicalData/ClinicalData";
import useFinishedJobs from "./hooks/finishedJobs";
+import { getFriendlyErrorMessage } from "../utils/errorMessages";

// TODO
// Make a more user friendly ErrorFallback component
@@ -25,7 +26,7 @@
const ErrorFallback = ({ error, resetErrorBoundary }) => (

Something went wrong:

-

{error.message}

+

{getFriendlyErrorMessage(error.message)}

Try again

);

• Running GitHub Actions for convertPheno_client/src/code/views/conversion/Conversion.jsx ✓ Edit

Check convertPheno_client/src/code/views/conversion/Conversion.jsx with contents:

Ran GitHub Actions for 8609418da0d483eb7874f642d091281f1da284c2:

---

Step 3: 🔁 Code Review

I have finished reviewing the code for completeness. I did not find errors for sweep/user-friendly-error-messages.

---

🎉 Latest improvements to Sweep:

• We just released a dashboard to track Sweep's progress on your issue in real-time, showing every stage of the process – from search to planning and coding.
• Sweep uses OpenAI's latest Assistant API to plan code changes and modify code! This is 3x faster and significantly more reliable as it allows Sweep to edit code and validate the changes in tight iterations, the same way as a human would.

---

💡 To recreate the pull request edit the issue title or description. To tweak the pull request, leave a comment on the pull request.
^{Join Our Discord}