Cómo personalizar la página de error de APEX

En esta entrega quiero darte una de las formas que se podría personalizar la página de Error de APEX para cuando no queremos usar la clásica página de error por defecto.

Ante todo, vemos que, si bien nuestra aplicación esta definida para que utilice el lenguaje español, – observando el texto en español en la segunda sentencia- podemos ver que el mensaje interno de APEX se encuentra en inglés, y ciertamente ver esta página de error así no es muy atractivo, ¿verdad?

Para manejar los mensajes internos de APEX y poder traducirlos a nuestro idioma vamos a usar la característica en la sección de Globalización llamada Text Messages.

Ingresamos a Shared Components –> Globalization –> Text Messages

Hacemos clic en el botón Create Text Message

Se abre una ventana modal en la cual vamos a ingresar:

1. El nombre del código de error de APEX (apex_error_code), en este caso es: APEX.AUTHORIZATION.ACCESS_DENIED
2. El lenguaje: Spanish
3. El texto del mensaje:  
   <h1>Acceso Denegado</h1>
   <p>No tiene permiso para ingresar a esta página. </p>
   <p>Ponte en contacto con tu administrador de TI para obtener acceso. </p>

Volvemos a generar el error y ahora se visualiza de la siguiente manera:

Muy bien, ahora sí pasemos a lo interesante, la personalización de esta página.

Lo primero que necesitamos hacer es visualizar que tipo de plantilla de página está utilizando la página de error de APEX.

Para ello volvemos a Shared Components –> User Interface –> Themes.

Seleccionamos el Tema Universal 42

Verificamos en los componentes por defecto cuál template de página está asignado para la página de error.

Como vemos en la imagen de arriba el template que usa la página de error es la de login.

Seguidamente volvemos a los componentes compartidos e ingresamos a la opción Templates dentro de la sección Interfaz de Usuario.

APEX agrupa los templates por tipo, en este caso necesitamos crear una plantilla de tipo página y para ello haremos una copia de la plantilla de login.

Le pondremos un nombre, por ejemplo: Custom Error Page.

Luego abrimos la plantilla. Las plantillas de APEX tienen varias secciones, en nuestro caso como queremos utilizar esta página como la página de error, en donde vamos a realizar los cambios será en la sección Error Page Template Control.

Esta plantilla admite las siguientes cadenas de sustitución:

#MESSAGE# y #ADDITIONAL_INFO#: coloca el mensaje de error.

#TECHNICAL_INFO#: muestra información detallada sobre errores internos que solo será visible para los desarrolladores.

#BACK_LINK#: muestra un enlace a la página anterior.

#OK# y #RETURN_TO_APPLICATION#: devuelve cadenas de texto traducidas.

Vamos a reemplazar el código HTML contenido en la sección Error Page Template Control –> Error Page Template:

El cual vemos las cadenas de sustitución:

<div class="t-Alert t-Alert--danger t-Alert--wizard t-Alert--defaultIcons">
  <div class="t-Alert-wrap">
    <div class="t-Alert-icon">
      <span class="t-Icon"></span>
    </div>
    <div class="t-Alert-content">
      <div class="t-Alert-body">
        <h1 class="t-Alert-errorTitle">#MESSAGE#</h1>
        <p>#ADDITIONAL_INFO#</p>
        <div class="t-Alert-inset">#TECHNICAL_INFO#</div>
      </div>
    </div>
    <div class="t-Alert-buttons">
      <button onclick="#BACK_LINK#" class="t-Button t-Button--hot w50p t-Button--large" type="button">#OK#</button>
    </div>
  </div>
</div>

Por nuestro propio HTML:

<div id="error-page">
         <div class="content">
            <h2 class="header" data-text="Error">
               Error
            </h2>
            <h4 data-text="Mensaje">
               #MESSAGE#
            </h4>
            <div class="t-Alert-inset">#TECHNICAL_INFO#</div>
            <div class="btns">
                <button onclick="#BACK_LINK#" class="t-Button t-Button--hot w50p t-Button--large" type="button">#OK#</button> 
            </div>
         </div>
</div>

Antes de aplicar los cambios, necesitamos dar estilos CSS a este HTML, para ello ingresamos a la sección Cascading Style Sheet y colocamos las siguientes reglas CSS.

Para conocer mas sobre las Fonts de Google te dejo el siguiente link: https://developers.google.com/fonts/docs/getting_started

Para estudiar sobre reglas CSS te recomiendo este sitio web: https://www.w3schools.com/css/default.asp

Es momento de ingresar estas reglas CSS:

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  height: 100vh;
  background: -webkit-repeating-linear-gradient(-45deg, #0000FF, #1E90FF, #87CEEB, #ADD8E6, #00BFFF, #87CEFA, #00FFFF);
  background-size: 400%;
}
#error-page{
  position: absolute;
  top: 10%;
  left: 15%;
  right: 15%;
  bottom: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: 0px 5px 10px rgba(0,0,0,0.1);
}
#error-page .content{
  max-width: 900px;
  text-align: center;
}
.content h2.header{
  font-size: 18vw;
  line-height: 1em;
  position: relative;
}
.content h2.header:after{
  position: absolute;
  content: attr(data-text);
  top: 0;
  left: 0;
  right: 0;
  background: -webkit-repeating-linear-gradient(-45deg, #0000FF, #1E90FF, #87CEEB, #ADD8E6, #00BFFF, #87CEFA, #00FFFF);
  background-size: 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 1px 1px 2px rgba(255,255,255,0.25);
  animation: animate 10s ease-in-out infinite;
}
@keyframes animate {
  0%{
    background-position: 0 0;
  }
  25%{
    background-position: 100% 0;
  }
  50%{
    background-position: 100% 100%;
  }
  75%{
    background-position: 0% 100%;
  }
  100%{
    background-position: 0% 0%;
  }
}
.content h4{
  font-size: 1.5em;
  margin-bottom: 20px;
  text-transform: uppercase;
  color: #000;
  font-size: 2em;
  max-width: 900px;
  position: relative;
}
.content h4:after{
  position: absolute;
  content: attr(data-text);
  top: 0;
  left: 0;
  right: 0;
  text-shadow: 1px 1px 2px rgba(255,255,255,0.4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.content p{
  font-size: 1.2em;
  color: #0d0d0d;
}
.content .btns{
  margin: 25px 0;    
}

Y luego aplicamos los cambios.

Nota: Si te pasa como a mi que a veces no sabes cómo combinar los colores para armar un gradiente, te cuento que le pedí ayuda a la IA 😊, ahora que está tan de moda, estoy descubriendo cómo usarla.

Y esto fue lo que me contestó 😉

Ahora es momento de asignar nuestra plantilla como la página de error por defecto.

Para ello volvemos a Shared Components –> User Interface –> Themes.

Seleccionamos el Tema Universal 42.

Y asignamos al componente Error Page se muestre con la plantilla Custom Error Page.

Aplicamos los cambios.

Forzamos nuevamente para que se genere el error y podemos ver los cambios.

Como estamos en modo desarrollo la página la visualizamos de la siguiente manera:

En el cual vemos la información técnica.

El usuario final vería la página de error de esta otra forma:

Cuando hacemos clic en el botón Aceptar regresa a la página anterior.

Compartí esto porque Tomás, un alumno me preguntó sobre este tema y pensé sería una buena idea escribirlo para compartirlo con la comunidad.

Espero sea de utilidad y si encuentras otra forma de personalizar esta página te invito a que lo comentes abajo, así todos aprendemos!

¡Será hasta la próxima!