Skip to content
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.

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

Process server errors in API components #418

Merged
merged 10 commits into from
Apr 21, 2020
Merged

Conversation

usu
Copy link
Member

@usu usu commented Apr 8, 2020

Fixes #275 (sort of)

  • catch server errors in ApiWrapper and display properly
  • display retry + cancel button after server/connection errors
  • display reload button when initial data loading fails

Catch

  • Validation errors
  • Connection timeouts
  • Permission errors
  • Removed entities
  • General (non specified) errors

@usu usu added the WIP Work in progress label Apr 8, 2020
@usu usu added Backend type: Frontend and removed WIP Work in progress labels Apr 13, 2020
Copy link
Member

@carlobeltrame carlobeltrame left a comment

Choose a reason for hiding this comment

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

Sieht weitgehend sehr gut aus! Habe noch ein paar Inputs bzw. offene Fragen.

Screenshot from 2020-04-14 12-04-26
Noch ein visueller Bug, vielleicht related zu #420 oder einem versuchten Fix dafür?

Ich habe noch ein Ticket erfasst zu einem Problem das mir beim manuellen Testing aufgefallen ist. Die Error-Message unter dem Input-Feld funktioniert aber korrekt.

frontend/src/components/form/api/ApiCheckbox.vue Outdated Show resolved Hide resolved
frontend/src/components/form/api/ApiWrapper.vue Outdated Show resolved Hide resolved

// 422 validation error
if (error.name === 'ServerException' && error.response && error.response.status === 422) {
this.serverErrorMessage = 'Validation error: '
Copy link
Member

Choose a reason for hiding this comment

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

Weshalb schreiben wir das in die serverErrorMessage und nicht in eine validationErrorMessage? Oder wieso heisst es nicht allgemeiner errorMessage und loading Fehler sind auch gleich drin?

Copy link
Member Author

Choose a reason for hiding this comment

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

Hmm, errorMessages gibt es ja als computed und dort werden die einzelnen Messages zusammengebaut (als Array von mehreren Messages, nach Konzept Vuetify wird aber nur jeweils die erste Message angezeigt).

validationErrorMessage würde ich nicht nehmen um das nicht mit der Frontend Validation zu vermischen. Es heisst zwar beides "Validation" hat aber ja einen ganz anderen Ursprung.

Loading und (patch) serverError könnte man schon zusammen nehmen, ich seh jetzt aber nicht den grossen Benefit. Wär es für dich klarer wenn alles in einer serverErrorMessage drin ist, egal ob vom load oder patch?

Copy link
Member

Choose a reason for hiding this comment

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

Meine Idee ging schon eher in die Richtung Frontend- und Backend-Validierung am gleichen Ort kombinieren, da die beiden sich ja theoretisch zumindest nie widersprechen sollten. Aber ich verstehe auch wenn das nicht so einfach ist / wenn die nicht wirklich zusammenpassen.

Ist auch gar nicht so schlimm so wie du es aktuell gelöst hast, einfach etwas unintuitiv dass zuerst die Server-Validierung (User ist der Grund) und Server-Fehler (Server ist der Grund) an einem Ort (serverErrorMessage) zusammengefasst werden, und nachher erst mit der Frontend-Validierung und Loading-Fehlern in ein gemeinsames computed errorMessage gestopft werden

frontend/src/components/form/api/ApiWrapperAppend.vue Outdated Show resolved Hide resolved
frontend/src/components/form/api/ButtonRetry.vue Outdated Show resolved Hide resolved
frontend/src/plugins/ignoreAnnoyingWarnMessages.js Outdated Show resolved Hide resolved
frontend/src/plugins/store/__tests__/store.spec.js Outdated Show resolved Hide resolved
frontend/src/plugins/store/__tests__/store.spec.js Outdated Show resolved Hide resolved
frontend/src/plugins/store/index.js Outdated Show resolved Hide resolved
frontend/vue.config.js Show resolved Hide resolved
@manuelmeister
Copy link
Member

@usu An welchem Beispiel kann ich mir die Server Errors anschauen?

@manuelmeister manuelmeister added this to the Core 21.04.2020 milestone Apr 18, 2020
@usu
Copy link
Member Author

usu commented Apr 19, 2020

@usu An welchem Beispiel kann ich mir die Server Errors anschauen?

@manuelmeister In der ApiDemo z.B. das Feld title. Backend verlangt min. 10 Zeichen (testweise), wird im Frontend aber nicht validiert. Oder du schaltest nach dem Laden der Seite deinen PHP-Server aus, dann kriegst du einen Network-Error.

@usu usu mentioned this pull request Apr 20, 2020
@usu usu merged commit 86b044a into ecamp:devel Apr 21, 2020
@usu usu deleted the feature/api-error branch November 6, 2022 05:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Exceptions auf Services überprüfen (Output API und Controller)
3 participants