error.php

An error is a UI that is displayed when an error occurs.

For example, to create your first error page, add a error.php file in the root directory src/app/error.php

This file will display any error that occurs in the application. If this file is not present, the default error page will be displayed in the same route file that caused the error. It is important to know that in the .env file, the SHOW_ERRORS=false is set by default. This will show the error in the error.php file. If set to true, the error will be displayed as "An error occurred". The SHOW_ERRORS=true setting is for production purposes only, ensuring that the application does not expose any sensitive information to the user.

Note: If SHOW_ERRORS=true is set and the error.php file is not present, the default error page will display a blank page without any error message.

Display Error Message

To display an error message, it is recommended to use a container element like <div> or <section>. The following example uses the variable $errorContent to display the error message:

<div>
      <?= $errorContent ?>
  </div>

Advanced and User-Friendly Error Message Display

To display an advanced and user-friendly error message, it is recommended to use a container element like <div> or <section>. The following example uses the variable $errorContent to display the error message:

Oops, something went wrong!

We're sorry, but an unexpected error has occurred. Please try again later or contact support if the issue persists.

Go to Homepage

<div class="flex min-h-[100dvh] flex-col items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8">
  <div class="mx-auto max-w-md text-center">
      <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="mx-auto h-12 w-12 text-primary">
          <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path>
          <path d="M12 9v4"></path>
          <path d="M12 17h.01"></path>
      </svg>
      <h1 class="mt-4 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">Oops, something went wrong!</h1>
      <div class="mt-4 text-muted-foreground">
          <?= $errorContent ?>
      </div>
      <div class="mt-6">
        <a class="inline-flex h-10 items-center justify-center rounded-md border border-gray-200 bg-white px-8 text-sm font-medium shadow-sm transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:pointer-events-none   disabled:opacity-50 dark:border-gray-800  dark:bg-gray-950 dark:hover:bg-gray-800 dark:hover:text-gray-50 dark:focus-visible:ring-gray-300" href="/">
              Go to Homepage
          </a>
      </div>
  </div>
  </div>

As demonstrated, the error message is presented in a user-friendly manner. It is centered on the screen, accompanied by a clear message and a button that redirects users to the homepage. This approach enhances user experience by providing a clear and actionable response to errors.