feat(web): add error page

[dgdavid]

Problem

When Agama crashes due to an unexpected error, an ugly page with a cryptic error message is shown most of the time.

Solution

Render a more appealing ErrorPage with a better formatted error message, filtering out third-party references from the stack trace and pointing to the exact location where the error originated (or at least something more accurate than what was displayed until now).

Note about error location

The new ErrorPage introduces StackTracey as a dependency, which allows using withSources/withSourcesAsync to display the original source location instead of the compiled build location, by leveraging source maps.

The output is equivalent to using source-maps-cli as described at https://lists.opensuse.org/archives/list/yast-devel@lists.opensuse.org/thread/OHU6OJAMXTPD6SXXOGKC6Q2K6U7RBFDO/, though be aware the location might be approximate. Not entirely sure why, possibly because it is the original file without comment lines and other build optimizations. In any case, React.createElement line in the examples points exactly to the problem, at least in the manual testing done to validate these changes.

Note about the as-table dependency

This PR uses the .asTable() method, which pulls in the as-table dependency from the same author as StackTracey. Although as-table has not been updated in a long time, it only has one further dependency (also from the same author) and does not appear to be a problem. In any case, as documented in the code:

It can be dropped at any point if any problem is found, but for now it gives us better formatted error messages at almost no cost.

Tests

• Added unit tests
• Tested manually

Screenshots

Before	After

Click to show/hide more screenshots

---

Waiting for error details

A route error

A not standard Error

An error with only thirdParty frames

Follow-up

Among other crazy ideas improvements, maybe the download logs button could be added to such an error page if the server still alive. But out of the scope of this fast-track PR intended for both, making the error message more useful from the very beginning and provide a kind of nicer error page.

[dgdavid]

@jreidinger

PR updated. Please find the new screenshots attachments to see how these new changes looks now 😉 Note that when the trace is too long (normally because there is only thirdParty frames) the layout it is a bit ugly. Out of the scope of this PR to achieve better alignment, sorry.

[dgdavid]

Realized that it was in the backlog. For reference, https://trello.com/c/VsMKx0eX (protected link).