feat: improve error handling

gershon commented 3 days ago

Describe the feature you'd like to request

We should add / improve server and client error handling.

Describe the solution you'd like to see

Handle server-side errors with custom 500 page.
Handle client-side errors with Error Boundaries.

Additional information

No response

ShantelPeters commented 3 days ago

@gershon i wil love to work on this by tomorrow when the OD hack commence kindly assign please

od-hunter commented 2 days ago

hi @gershon , please can I be assigned this?

To solve this issue, I’d take the following steps:

1.⁠ ⁠I’ll create a custom 500 error page in pages/500.js (or 500.tsx for TypeScript) to display user-friendly messages. 2.⁠ ⁠I’ll implement an ErrorBoundary component to catch rendering errors in React. I’ll use getDerivedStateFromError and componentDidCatch for logging and fallback UI. 3.⁠ ⁠⁠I’ll use the ErrorBoundary to wrap components where errors may occur. 4.⁠ ⁠⁠Lastly, I’ll test both server-side and client-side error handling by inducing errors, ensuring the correct pages and messages are displayed.

Please assign me.

stephanniegb commented 2 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I’m Stephanie, a frontend engineer, and I would like to contribute by improving server and client-side error handling in your application.

How I plan on tackling this issue

My approach:

I will implement a custom 500 error page to handle server-side errors, ensuring users see a clear, user-friendly message instead of a generic server error. This page can also guide users to refresh the page or contact support.
Implement a custom 500 error page to handle server-side issues gracefully. This page will provide users with a user-friendly message and guidance on what they can do if the problem persists

addegbenga commented 2 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

i am a frontend engineer engineer with over 5 years experience building webapps.

How I plan on tackling this issue

I will tackle this issue by:

For server errors: I will create a custom 500 page in the app dir. as I see the project is a new NextJs app router.
For client errors: I will create a custom Error boundary component based on react documentation. This component will accept a children props and have a custom error message and a button to refresh. I will wrap this component with all client pages so all client's components handle errors gracefully.

ETA: 24hrs

raizo07 commented 2 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello I'll like to be assigned to work on this.

I'm a software Dev with over four years experience and have worked on a couple of projects here. Here's a link to my profile https://app.onlydust.com/u/raizo07

Ugo-X commented 2 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a Full Stack blockchain Developer with expertise in Next.js, Nest.js, TypeScript, JavaScript, React, Node.js, Three.js, Solidity and rust. My journey with OnlyDust hackathons began at Edition 1, and I've since made 69 contributions across 14 projects. With my extensive experience on the OnlyDust platform (profile: https://app.onlydust.com/u/Ugo-X), I've honed my skills in delivering quality solutions under pressure.

I bring a unique blend of technical proficiency and user-focused design to every project, whether it's crafting immersive 3D experiences or developing smart contracts. My track record shows I can adapt quickly and contribute effectively to diverse challenges.

As we surf through Edition 8, I'm excited to leverage my skills and hackathon experience to push the boundaries of blockchain development. I'm confident in my ability to tackle new challenges and drive innovation in this space.

How I plan on tackling this issue

I will improve server and client error handling as follows:

I will implement a custom 500 error page for server-side errors: I will create a 500.js file in the pages directory. I will design a user-friendly error page with helpful information. I will configure the server to use this custom page for 500 errors.

I will implement Error Boundaries for client-side error handling: I will create an ErrorBoundary component using React's error boundary feature. I will wrap main content areas or routes with this ErrorBoundary component. I will design a fallback UI for the ErrorBoundary to display when errors occur.

I will test both server and client error scenarios to ensure proper handling.

od-hunter commented 2 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Please can I be assigned this issue? This is my first time applying in this ecosystem and I’d love to be given the opportunity. I am a blockchain Developer, and my experience includes html, css, react, JavaScript,TypeScript and solidity, python and Cairo.

How I plan on tackling this issue

To solve this issue, I’d take the following steps:

1.⁠ ⁠I’ll create a custom 500 error page in pages/500.js (or 500.tsx for TypeScript) to display user-friendly messages. 2.⁠ ⁠I’ll implement an ErrorBoundary component to catch rendering errors in React. I’ll use getDerivedStateFromError and componentDidCatch for logging and fallback UI. 3.⁠ ⁠⁠I’ll use the ErrorBoundary to wrap components where errors may occur. 4.⁠ ⁠⁠Lastly, I’ll test both server-side and client-side error handling by inducing errors, ensuring the correct pages and messages are displayed.

Please assign me.

martinvibes commented 2 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

hello i am a frontend dev and blockchain developer please can i work on this issue :) and would love to be a contributor

How I plan on tackling this issue

Proposed Solutions: Server-Side Errors: Implement a custom 500 error page to handle server errors gracefully. Client-Side Errors: Utilize Error Boundaries to catch and handle errors in the React component tree.

Benjtalkshow commented 2 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I’m Benjamin, a full-stack JavaScript developer, and I’m eager to improve our app’s reliability by enhancing error handling. I believe that effective error management can really elevate the user experience, making our application not just functional but also user-friendly.

How I plan on tackling this issue

To tackle this, I’ll start by focusing on server-side errors. My plan is to create a custom 500 error page that clearly communicates to users when something goes wrong on the server. This page will guide them back to safety and reassure them that we’re on top of the issue.

On the client side, I’ll implement Error Boundaries. By wrapping key components in these boundaries, I can catch JavaScript errors during rendering and ensure that users see a friendly fallback UI instead of a confusing error screen. This approach will help us log errors for further review while keeping users informed and engaged.

I’ll thoroughly test both strategies to ensure they function correctly and document everything for the team. This way, we’ll have a solid error handling framework that’s easy to maintain and improve in the future.

Ugo-X commented 1 day ago

Thank you, will get to it.

ArkProjectNFTs / ark-market