Basic Experience Set-up

Configure Error Pages

8min

Purple Experience
﻿
Summary
This article explains the configuration of error pages for the Purple Web Experience with Purple Experience Builder. If a URL doesn't exist, for both SEO and User Experience it is best to show an error page and send an appropriate HTTP code. This error page must be manually enabled per Purple App. 
﻿
Creating an Error Page
To create an error page, first add a new view in the views.json. Choose a path that is currently unoccupied by any other view or content and is unlikely to be used in the future. For instance, you might use "path": "_error", "name": "error". 
Note: For all pages, the name is set as the view's CSS class for styling. Ensure this name is valid as a CSS selector.
Then, on the view's settings, enable "errorPage" and set it to true (Note: Version > Experience 2.5.0).
﻿
To display different error messages based on the status code that occurred, you can add multiple components and add a condition based on $context.errorCode.
The value of $context.errorCode is the HTTP response code, 404 for not found, 500 for server error etc.
The following is an example config of the components on the error page:
JSON
|
{
  "name": "error",
  "path": "_error",
  "errorPage": true,
  "appBar": "default",
  "navigation": "default",
  "content": [
    {
      "tag": "p",
      "type": "html",
      "content": "Page not found",
      "class": "errorMessage",
      "condition": {
        "value": "$context.errorCode",
        "operation": "EQUALS",
        "compareValue": "404"
      }
    },
    {
      "tag": "p",
      "type": "html",
      "content": "Some other error: $context.errorCode",
      "class": "errorMessage",
      "condition": {
        "value": "$context.errorCode",
        "operation": "EQUALS",
        "compareValue": "404",
        "negated": true
      }
    }
  ]
}
{
  "name": "error",
  "path": "_error",
  "errorPage": true,
  "appBar": "default",
  "navigation": "default",
  "content": [
    {
      "tag": "p",
      "type": "html",
      "content": "Page not found",
      "class": "errorMessage",
      "condition": {
        "value": "$context.errorCode",
        "operation": "EQUALS",
        "compareValue": "404"
      }
    },
    {
      "tag": "p",
      "type": "html",
      "content": "Some other error: $context.errorCode",
      "class": "errorMessage",
      "condition": {
        "value": "$context.errorCode",
        "operation": "EQUALS",
        "compareValue": "404",
        "negated": true
      }
    }
  ]
}
﻿
Adding Error pages to existing Apps
There are some caveats when adding an error page to an existing app:
make sure there is no "wildcard" route in the views.json, e.g. a route that matches everything. The error page is only visible when no other path matches. If this is the case, it is probably a good time to also switch to the Experience Routing URL resolver feature!
If the URL resolver feature is used, the error page is only shown if neither the views.json nor the URL resolver matches any path. This means the URL resolver must return undefined or { notFound: true } for paths that are unknown.
Verify that the Error Page is working
Once built, you should see your page when navigating to any path that does not match through either views.json paths or the URL resolver.
You can test that in the Builder preview (pop the preview into a new window to edit the URL) or on the web preview of your app!
You should see the error page you just defined as well as the network code sent when inspecting the page load in your browser's Dev Tools.
﻿
﻿

Updated 30 Aug 2023

Did this page help you?

Configure JSON-LD

Configure the Side Menu in the Purple Experience

Docs powered by

Archbee

TABLE OF CONTENTS

Summary

Creating an Error Page

Adding Error pages to existing Apps

Verify that the Error Page is working