Setting and using error pages

You'll likely encounter an error every now and then, this happens but we can make sure users don't get stuck while encountering them.

After reading this article, you'll know:

• How to create error pages

• Why you should use them

What are error pages

There are a variety of error pages that you can use as a developer. You likely have encountered them yourself every so often, like the infamous 404 error page. This page pops up when you try to navigate to a URL that doesn't exist or has moved. Or perhaps the 500 error, this one indicates that the server encountered a problem and was unable to finish your request.

Creating an error page

Creating error pages using Betty Blocks is pretty self-explanatory, an error page is created like any other page. It might even be easier since Betty Blocks provides templates for error pages, such as a 403, a 404, and a 500 page.

To create an error page go to the pages overview and click on New page, for this example let's create a 404 page. Select the errors template and name the page 404.

Click Create page and select the 404 page in the configuration. The button on this page can link to another page within your application. In this example, we'll direct the user to the home page once he encounters the 404 page.

With this page in place, we can now set this as our error page. Just to make sure, make sure to compile the page before continuing, simply press the Play button in the top-left.

Now, to set our 404 page as our error page, go to your application's settings, which are found inside the tools section:

You'll see a variety of options like setting your home page and some default values. What we want to do is select the 404 page that we just created and use it as our error page:

After this hit the save settings button to save this page as your error page.

When a user now goes to your website and fills in an URL that doesn't exist, for example: https://lowkey.betty.app/thispageodesntexist he'll be redirected to https://lowkey.betty.app/404. And the error page will pop up with a button that'll then redirect the user to the home page of the application.