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.

Sign up for GitHub

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

Jump to bottom

Display full page errors for passed page error data #233

Closed
kschiffer opened this issue Mar 5, 2019 · 2 comments
Closed

Display full page errors for passed page error data #233

kschiffer opened this issue Mar 5, 2019 · 2 comments
Assignees
@kschiffer
Labels
c/console This is related to the Console ui/web This is related to a web interface
Milestone
September 2020

Comments

@kschiffer
Copy link
Member

Summary:
As a result of #41, we need a proper error page that will be shown when fatal errors occur that prevent the app from loading. This error page should match the static ones that are rendered by the backend (https://github.com/TheThingsIndustries/lorawan-stack/issues/1315#issuecomment-440804413).

A request curl -H "Accept: text/html" -XPOST http://localhost:1885/oauth/api/auth/login results in the following (formatted for readability):

<!doctype html>
<html lang="en">

<head>
    <!-- ... -->
</head>

<body>
    <div id="app"></div>
    <script>
        window.APP_ROOT = "/oauth";
        window.ASSETS_ROOT = "http://localhost:1885/assets";
        window.APP_CONFIG = { "language": "en" };
        window.PAGE_DATA = {
            "error": {
                "code": 2,
                "message": "error:pkg/errors/web:http (HTTP error: code=403, message=invalid csrf token)",
                "details": [
                    {
                        "@type": "type.googleapis.com/ttn.lorawan.v3.ErrorDetails",
                        "namespace": "pkg/errors/web",
                        "name": "http",
                        "message_format": "HTTP error: {message}",
                        "attributes": {
                            "message": "code=403, message=invalid csrf token"
                        }
                    }
                ]
            }
        };
    </script>
    <script type="text/javascript" src="http://localhost:1885/assets/oauth.b4ebca19adbb1b50d911.js"></script>
</body>

</html>

Errors are structured in the same way as the errors you receive from the API, so with the details array, where you need to find the object with "@type": "type.googleapis.com/ttn.lorawan.v3.ErrorDetails" to get TTN error details.

Why do we need this?
Because the errors returned from the backend need to be properly displayed to the user.

What is already there? What do you see now?
We have a screen design ready:
image
This should cover most cases as it can display: Error Code, Error Name, Error Message.
My only concern would be the state of the header/nav-bar. Depending on the situation it could make sense to have it rendered fully (with links and user info) and in others it might not be possible. I will come up with something here.

What is missing? What do you want to see?
A logic in the console/oauth app that checks for the existence of PAGE_DATA.error and displays the error respectively.

How do you propose to implement this?
We could use the common init component (lib/components/init.js) to take care of this. The component could make the check and pass possible errors to an error view component that would need to be built with styling according to the screen design above.

What can you do yourself and what do you need help with?
This should be pretty straight-forward.
@kschiffer kschiffer added the c/console This is related to the Console label Mar 5, 2019
@kschiffer kschiffer added this to the Backlog milestone Mar 5, 2019
@kschiffer kschiffer self-assigned this Mar 5, 2019
@johanstokking johanstokking mentioned this issue Mar 5, 2019
Closed
@bafonins bafonins mentioned this issue May 8, 2019
Closed
@kschiffer kschiffer changed the title Full page errors Display full page errors for passed page error data Jul 17, 2019
@johanstokking johanstokking added the ui/web This is related to a web interface label Jul 19, 2019
@johanstokking johanstokking modified the milestones: Backlog, Next Up Mar 3, 2020
@pierrephz
Copy link

Hey, here is a 404 error page that can be used as a template for other error messages in the console

image

here is the code, its already responsive and ready to use (just need to be edited with values we want for each error we have)

error_page.zip

Open for feedbacks and modifications

(bonus: dark mode, if we decide to go this way one day, this is never waste ⚫️error_page_dark.zip)

@htdvisser htdvisser modified the milestones: Next Up, September 2020 Aug 24, 2020
@kschiffer kschiffer mentioned this issue Sep 21, 2020
Closed
@kschiffer
Copy link
Member Author

So from a technical perspective, this is already implemented as defined in the OP. Our outermost error boundary will catch errors and render the error view. I will close this issue and open a new one about static HTML/CSS templates for backend error responses on routes that are not handled by our frontend react apps.

#3261

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kschiffer kschiffer

Labels
c/console This is related to the Console ui/web This is related to a web interface
Projects
None yet
Milestone
September 2020
Development

No branches or pull requests
4 participants
@htdvisser @kschiffer @johanstokking @pierrephz