<aside> 💡

@Charles Delfs ready for review

</aside>

Introduction

This document covers the system static and app dynamic error pages and how they work. The static error page is a non-customizable page that will be shown for lower level errors (e.g. BF server, network, providers errors), and the app dynamic error page is shown for some higher level errors (e.g. page not found, request timeout, and some FM errors like Invalid Data API token).

Static Error Page

Errors that occur before the app is able to connect to the DB or a site record was not found, for example, will be redirected to a static page that can not be customized. The picture below is an example of our static error page.

Dynamic Error Page

The error page can be accessed via the nav slug error. It will be associated with either a default or custom page. The picture below shows the default error page.

Custom error pages

If a custom error page will be used, a navigation slug error needs to be associated with the desired page. Errors are saved to the app model as app.error, and can be accessed in the error page. The object looks like:

{
	"error": {
		"code": "404",
		"description": "Page Not Found",
		"message": "Page not found for slug: nopage"
	}
}

Custom error handlers

Besides customizing the error page, how the errors should be handled can be customized as well, according to its code.

For example, if ‘Page Not Found’ errors should just show an alert, the following could be added to the App Model.

{
	"errorHandlers": [{
        "actions": [{
            "action": "showAlert",
            "function": "action.options.text = action.options.error.message",
            "options": {
                "text": "",
                "title": "Error",
                "type": "error"
            }
        }],
        "codes": ["404"]
    }]
}

As it can be seen above, custom behaviours are added under a key errorHandlers, and that will be an array of objects. Each object having have codes and actions.

The result from the example code above is the alert shown below.