search

IQSS / dataverse-frontend

An upcoming and modernized UI for Dataverse
Apache License 2.0
20 stars 16 forks source link

126 add error handling mechanism to the UI #518

Closed ChengShi-1 closed 1 month ago

ChengShi-1 commented 1 month ago

What this PR does / why we need it:

In some cases, unexpected errors may occur in the application. To manage these effectively, we need a consistent error-handling mechanism in the UI. This not only ensures that error messages are displayed to users on the page but also enables developers to track errors by viewing detailed messages in the console.

Which issue(s) this PR closes:

Special notes for your reviewer:

The error page didn't do component test and e2e test. Component test: we log errors using the hook useRouteError, which must be used within a data router. However, the component test used memory router. e2e test: we didn't find a way to throw an error in the test environment to trigger the page. Cypress always caught the errors we throw.

Suggestions on how to test this:

Step 1: Run the Development Environment

  1. Execute npm i.
  2. Navigate with cd packages/design-system && npm run build.
  3. Return with cd ../../.
  4. Ensure you have a .env file similar to .env.example, with the variable VITE_DATAVERSE_BACKEND_URL=http://localhost:8000.
  5. Navigate with cd dev-env.
  6. Start the environment using ./run-env.sh unstable.
  7. To verify the environment, visit http://localhost:8000/ and check your local Dataverse installation.

Step 2: Test the feature Since we could only test it manually, please edit some codes in Dataverse-frontend repository.

  1. Inside dataverse-frontend/src/sections/homepage/Homepage.tsx or any other children routes, we could add a line throw new Error('This is an error') before returns.
  2. check if the error messages are printed in the console
  3. check if the error page UI is shown correctly, with the header and footer
  4. check if the button, header and footer work well

Does this PR introduce a user interface change? If mockups are available, please link/include them here:

image

Is there a release notes update needed for this change?:

No

Additional documentation:

coveralls commented 1 month ago

Coverage Status

coverage: 97.512% (-0.02%) from 97.533% when pulling a1bbdbec567ec462926d0c8b26de1a23452d8281 on 126-add-error-handling-mechanism-to-the-ui into 36c7b07cab0b6c67144431fd8a3a65f9fd729b7f on develop.

ekraffmiller commented 1 month ago

Sorry if I approved this prematurely, I thought it was ready for QA, but maybe I misread the ticket!

g-saracca commented 1 month ago

Sorry if I approved this prematurely, I thought it was ready for QA, but maybe I misread the ticket!

Don't worry, is just that I left a comment without a formal review I think

g-saracca commented 1 month ago

We wont be able to add a story for this page right now, we need an extra configuration for Storybook explained in this issue I have created.

@ChengShi-1 could you solve the merge conflicts? thanks!

ChengShi-1 commented 1 month ago

We wont be able to add a story for this page right now, we need an extra configuration for Storybook explained in this issue I have created.

@ChengShi-1 could you solve the merge conflicts? thanks!

Hi German, thanks for reminding me the conflicts. Please check that I solved the conflicts and merged 'develop' to this branch.

ofahimIQSS commented 1 month ago

Tested in local and was able to verify the error page was thrown.

image