Create Custom Error Pages

Last modified: August 19, 2024

Introduction

Whenever your application is stopped, you are presented with the default Mendix error page. However, you can make a custom error page on Mendix Cloud for a more tailored user experience.

Specifically, you can create an offline.html page, a 404.html page, and a 403.html page.

The different files serve different purposes:

  • offline.html: will be served when your application has been stopped manually
  • 404.html: will be served whenever a path does not exist
  • 403.html: will be served when access to a resource is denied, because an IP filter has been implemented or because of client certificate restrictions

If you do not create these files, the default error page will be used for each scenario:

This how-to teaches you how to do the following:

  • Create a custom error page

Prerequisites

Before starting this how-to, make sure you have completed the following prerequisites:

  • Have a local repository of the app
  • Have your app hosted in Mendix Cloud
  • Identify which version of the Atlas module you are using

Creating a Custom Error Page

If you are using Atlas 3, do the following:

  1. Open the local folder of your app.

  2. Go to theme:

  3. Go to web:

  4. Create a new folder named error_page:

  5. In the error_page folder, place your offline.html file:

    Optionally, you can also create 404.html and 403.html pages.

  6. Commit the changes in Studio Pro.

Example Offline Page

An example offline.html, 404.html, or 403.html page could look like this:

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/error_page/style.css">
    <script src="/error_page/script.js"></script>
  </head>
  <body>
    This application is currently offline.
  </body>
</html>

This example refers to style.css and script.js, which you should also create and place in the error_page directory if you want to have special styling and/or JavaScript.

Creating a Re-Usable Custom Error Page

It is also possible to create custom error pages inside re-usable theme modules.

To create a custom error page inside your theme module, do the following:

  1. Open your app’s local folder.

  2. Go to themesource:

  3. Open your theme module’s folder:

  4. Open the public folder:

  5. Create a new folder named error_page:

  6. In the error_page folder, place your offline.html, 404.html, and/or 403.html files:

Now you have a custom error page inside a re-usable theme module! When this module is imported into other apps, its custom error pages will automatically become available.

This can also be used in a company design system.