Implement error handling in JS

assets/app.js

@@ -1,9 +1,2 @@
 import './bootstrap.js';
-/*
- * Welcome to your app's main JavaScript file!
- *
- * We recommend including the built version of this JavaScript file
- * (and its CSS file) in your base layout (base.html.twig).
- */
-
-// any CSS you import will output into a single css file (app.css in this case)
+import './error_handling'

assets/error_handling.js

@@ -0,0 +1,35 @@
+window.addEventListener("unhandledrejection", (event) => {
+    const requestInfo = event.target.requestInformation;
+    const timestamp = new Date();
+
+    // Hide the form
+    document.getElementById("form").classList.add('hidden');
+
+    // Show the error report
+    document.getElementById("errorData").classList.remove('hidden');
+    let errorFields = document.querySelectorAll('[data-content-for]');
+    let written = false;
+    errorFields.forEach((element) => {
+        fieldName = element.dataset.contentFor;
+        written = false;
+        // 1. The timestamp is filled with the current time
+        if (fieldName === 'timestamp') {
+            element.innerHTML = timestamp.toISOString();
+            written = true;
+        }
+        // Other fields are displayed from the requestInformation that is present in the event
+        if (requestInfo.hasOwnProperty(fieldName)) {
+            element.innerHTML = requestInfo[fieldName];
+            written = true;
+        }
+        // Show the error message from the uncaught exception
+        if (fieldName === 'errorMessage' && requestInfo['errorMessage'] === undefined ) {
+            element.innerHTML = event.reason.message;
+            written = true;
+        }
+        // If no sensible data was available to write error field, remove the tr
+        if (!written) {
+            element.parentElement.remove();
+        }
+    });
+});

templates/Exception/error.html.twig

@@ -6,40 +6,17 @@
 {% block body %}
     <p>{{ description }}</p>
 
-    <table class="table table-bordered">
-        <tr>
-            <th>{{ 'stepup.error.timestamp'|trans }}</th>
-            <td>{{ timestamp }}</td>
-        </tr>
-        <tr>
-            <th>{{ 'stepup.error.hostname'|trans }}</th>
-            <td>{{ hostname }}</td>
-        </tr>
-        <tr>
-            <th>{{ 'stepup.error.request_id'|trans }}</th>
-            <td>{{ request_id }}</td>
-        </tr>
-        <tr>
-            <th>{{ 'stepup.error.error_code'|trans }}</th>
-            <td>{{ errorMessage }}</td>
-        </tr>
-        {% if sari %}
-        <tr>
-            <th>{{ 'stepup.error.sari'|trans }}</th>
-            <td>{{ sari }}</td>
-        </tr>
-        {% endif %}
-        {% if user_agent %}
-        <tr>
-            <th>{{ 'stepup.error.user_agent'|trans }}</th>
-            <td>{{ user_agent }}</td>
-        </tr>
-        {% endif %}
-        <tr>
-            <th>{{ 'stepup.error.ip_address'|trans }}</th>
-            <td>{{ ip_address }}</td>
-        </tr>
-    </table>
+    {%  include 'partial/error_table.html.twig' with
+    {
+        'timestamp': timestamp,
+        'hostname': hostname,
+        'requestId': request_id,
+        'errorMessage': errorMessage,
+        'sari': sari,
+        'userAgent': user_agent,
+        'ipAddress': ip_address
+    }
+    %}
 
     <p>{{ 'stepup.error.support_page.text'|trans({'%support_url%': global_view_parameters.supportUrl })|raw }}</p>
 

templates/default/authentication.html.twig

@@ -3,15 +3,18 @@
 {% block body %}
     <h2>{{ 'authentication.sub_title'|trans }}</h2>
 
-    <form
-            {{ stimulus_controller('@web-auth/webauthn-stimulus',
+    <form id="form"
+        {{ stimulus_controller('@web-auth/webauthn-stimulus',
                 {
                     requestResultUrl: path('verify-assertion'),
                     requestOptionsUrl: path('request-options'),
                     requestSuccessRedirectUri: path('app_identity_authentication')
                 }
             ) }}
     >
+
+        <span>{{ 'status.authentication_initial'|trans }}</span>
+
         <input
                 type="hidden"
                 name="username"
@@ -24,12 +27,26 @@
                 {{ stimulus_action('@web-auth/webauthn-stimulus', 'signin') }}
                 hidden>
         </button>
-
-        <script>
-            window.onload = function(){
-                document.getElementById("authenticationButton").click();
-            }
-        </script>
     </form>
 
+
+    {%  include 'partial/error_table.html.twig' with
+        {
+            'timestamp': 'timestamp',
+            'hostname': 'hostname',
+            'requestId': 'requestId',
+            'errorMessage': 'errorMessage',
+            'sari': 'sari',
+            'userAgent': 'userAgent',
+            'ipAddress': 'ipAddress',
+        } %}
+
+    <script>
+        window.onload = function(){
+            document.getElementById("authenticationButton").click();
+        }
+    </script>
+
+    {% include 'default/variables.twig' %}
+
 {% endblock %}

templates/default/registration.html.twig

@@ -1,9 +1,10 @@
+
 {% extends 'base.html.twig' %}
 
 {% block body %}
     <h2>{{ 'registration.sub_title'|trans }}</h2>
 
-    <form
+    <form id="form"
             {{ stimulus_controller('@web-auth/webauthn-stimulus',
                 {
                     creationResultUrl: path('attestation-verification'),
@@ -12,6 +13,8 @@
                 }
             ) }}
     >
+        <span>{{ 'status.registration_initial'|trans }}</span>
+
         <input
                 type="hidden"
                 name="username"
@@ -33,6 +36,18 @@
         </button>
     </form>
 
+    {% include 'partial/error_table.html.twig' with
+        {
+            'timestamp': 'timestamp',
+            'hostname': 'hostname',
+            'requestId': 'requestId',
+            'errorMessage': 'errorMessage',
+            'sari': 'sari',
+            'userAgent': 'userAgent',
+            'ipAddress': 'ipAddress',
+        }
+    %}
+
     <script>
         window.onload = function(){
             document.getElementById("registerButton").click();

templates/default/variables.twig

@@ -1,38 +1,5 @@
-{% set translations = {
-    'authentication.start_button': 'authentication.start_button' | trans,
-    'registration.start_button': 'registration.start_button' | trans,
-    'registration.sub_title':  'registration.sub_title' | trans,
-    'status.registration_initial':  'status.registration_initial' | trans,
-    'status.missing_attestation_statement':  'status.missing_attestation_statement' | trans,
-    'authentication.sub_title':  'authentication.sub_title' | trans,
-    'status.authentication_initial':  'status.authentication_initial' | trans,
-    'status.general_error':  'status.general_error' | trans,
-    'status.webauthn_not_supported':  'status.webauthn_not_supported' | trans,
-    'status.no_active_request':  'status.no_active_request' | trans,
-    'status.authenticator_not_supported':  'status.authenticator_not_supported' | trans,
-    'retry':  'retry' | trans,
-    'cancel':  'cancel' | trans,
-    'abort':  'abort' | trans,
-    'error_title':  'error_title' | trans,
-    'user_not_found.title':  'user_not_found.title' | trans,
-    'user_not_found.description':  'user_not_found.description' | trans,
-    'stepup.error.support_page.mail_to':  'stepup.error.support_page.mail_to' | trans,
-    'stepup.error.support_page.mail_subject':  'stepup.error.support_page.mail_subject' | trans,
-    'stepup.error.support_page.mail_intro':  'stepup.error.support_page.mail_intro' | trans,
-    'stepup.error.support_page.mail_closure':  'stepup.error.support_page.mail_closure' | trans,
-    'stepup.error.timestamp':  'stepup.error.timestamp' | trans,
-    'stepup.error.hostname':  'stepup.error.hostname' | trans,
-    'stepup.error.request_id':  'stepup.error.request_id' | trans,
-    'stepup.error.sari':  'stepup.error.sari' | trans,
-    'stepup.error.error_code':  'stepup.error.error_code' | trans,
-    'stepup.error.user_agent':  'stepup.error.user_agent' | trans,
-    'stepup.error.ip_address':  'stepup.error.ip_address' | trans,
-    'stepup.error.support_page.text': 'stepup.error.support_page.text'|trans({'%support_url%': global_view_parameters.supportUrl })
-} %}
-
-    {% block javascripts %}
-        <script>
-            var translations = {{ translations | json_encode | raw }};
-            var requestInformation = {{ global_view_parameters.requestInformation | json_encode | raw }};
-        </script>
-    {% endblock %}
+{% block javascripts %}
+    <script>
+        var requestInformation = {{ global_view_parameters.requestInformation | json_encode | raw }};
+    </script>
+{% endblock %}

templates/partial/error_table.html.twig

@@ -0,0 +1,39 @@
+<div id="errorData" class="hidden">
+    <span>{{ 'error_title'|trans }}</span>
+    <table class="table table-bordered">
+        <tr>
+            <th>{{ 'stepup.error.timestamp'|trans }}</th>
+            <td data-content-for="timestamp">{{ timestamp }}</td>
+        </tr>
+        <tr>
+            <th>{{ 'stepup.error.hostname'|trans }}</th>
+            <td data-content-for="hostname">{{ hostname }}</td>
+        </tr>
+        <tr>
+            <th>{{ 'stepup.error.request_id'|trans }}</th>
+            <td data-content-for="requestId">{{ requestId }}</td>
+        </tr>
+        <tr>
+            <th>{{ 'stepup.error.error_code'|trans }}</th>
+            <td data-content-for="errorMessage">{{ errorMessage }}</td>
+        </tr>
+        {% if sari %}
+            <tr>
+                <th>{{ 'stepup.error.sari'|trans }}</th>
+                <td data-content-for="sari">{{ sari }}</td>
+            </tr>
+        {% endif %}
+        {% if userAgent %}
+            <tr>
+                <th>{{ 'stepup.error.user_agent'|trans }}</th>
+                <td data-content-for="userAgent">{{ userAgent }}</td>
+            </tr>
+        {% endif %}
+        <tr>
+            <th>{{ 'stepup.error.ip_address'|trans }}</th>
+            <td data-content-for="ipAddress">{{ ipAddress }}</td>
+        </tr>
+    </table>
+    {{ 'stepup.error.support_page.text'|trans({'%support_url%': global_view_parameters.supportUrl })|striptags('<a>')|raw }}
+    <button class="btn btn-primary" onclick="window.location.reload();">{{ 'retry'|trans }}</button>
+</div>