HTTP Error

This component was designed to render standardized 40X and 50X error pages.

Basic Usage

This component is designed to be used as a page error in downstream applications. So if a user hits a page that doesn't exist or there's an authentication error, you can render this component with the appropriate error code and message.

The preferred usage is to have it fill into the entire content area within our standard Layout. This way, the user can still navigate to other parts of the application.

You can also render it easily directly from your router configuration. Here's an example of how you can use it in your Vue Router configuration:

import { createRouter, createWebHistory } from 'vue-router';
import { useUserStore } from '@/piniaStores/user';
import { auth0 } from '@/services/auth';

const router = createRouter({
  routes: [
    {
      path: '/401',
      name: 'not-authorized',
      component: () => import('@leaflink/stash/HttpError.vue'),
      props: (route) => ({
        errorCode: 401,
        onLogout: auth0.isAuthenticated.value ? useUserStore().logout : null,
        retryLink: route.redirectedFrom?.href,
      }),
    },
    {
      path: '/403',
      name: 'forbidden',
      component: () => import('@leaflink/stash/HttpError.vue'),
      props: (route) => ({
        errorCode: 403,
        onLogout: auth0.isAuthenticated.value ? useUserStore().logout : null,
        retryLink: route.redirectedFrom?.href,
      }),
    },
    {
      path: '/500',
      name: '500',
      component: () => import('@leaflink/stash/HttpError.vue'),
      props: (route) => ({
        errorCode: 500,
        retryLink: route.redirectedFrom?.href,
      }),
    },
    {
      path: '/:catchAll(.*)',
      name: 'not-found',
      component: () => import('@leaflink/stash/HttpError.vue'),
      props: (route) => ({
        errorCode: 404,
        retryLink: route.redirectedFrom?.href,
      }),
    },
  ],
});

WARNING

Work with a designer to decide whether a logout button should be displayed on the error page. If you decide to display the logout button, make sure to handle the onLogout callback properly.

In order to get the desired design, the following styles should be applied to main content area and the error component itself.

#content {
  grid-area: appcontent;
  height: 100%; /* Important */
  overflow: hidden;
}

#content:not(:has(.stash-http-error)) {
  /* Some apps may give the content area a bottom padding of N pixels. That's fine, but we want to make sure */
  /* it's not applied to error pages, so the error padding can be uniformly applied on every edge and */
  /* can have no padding on mobile. */
  padding-bottom: theme('spacing.6');
}

@media screen('md') {
  #content:has(.stash-http-error) {
    padding: theme('spacing.6');
  }

  .stash-http-error {
    border-radius: theme('borderRadius.DEFAULT');
    box-shadow: theme('boxShadow.DEFAULT');
  }
}

The component provides a default title and description, depending on the errorCode, as displayed in the table below.

Playground

Below you can select the desired error code and toggle between a fullscreen mode to see how the component works as a full page. Also, you can change the title and description.

Title

Description

Retry Link

Hide logout button

<script>
  const title = ref('');
  const description = ref('');
  const hideLogoutButton = ref(false);

  const handleLogout = () => {
    alert('Logout clicked!');
  };
</script>

<template>
  <ClientOnly>
    <HttpError
      error-code="404"
      :title="title"
      :description="description"
      :hideLogoutButton="hideLogoutButton"
      :onLogout="handleLogout"
    />
  </ClientOnly>
</template>

Error Code Defaults

The component provides a default title and description, depending on the errorCode, as displayed in the table below.

Error Code	Title (default)	Description (default)
401	Unauthorized	Sorry, you are not authorized to access the LeafLink portal!
403	Access denied.	Sorry, you can not access the page you are looking for. Check the URL for errors or talk to your account admin regarding your account's permission settings.
404	Sorry, we can't find this page.	We couldn't find the page you're looking for.
405	Not allowed.	We couldn't reach the page you're looking for this way.
500	Please wait while we hash this out.	You've encountered an error.
502	Please wait while we hash this out.	You've encountered an error.
503	Please wait while we hash this out.	You've encountered an error.
504	Your request got lost in the weeds.	You've encountered an error.

INFO

The following text is displayed next to the description (regardless of if you provide a custom description or not): "Please try again or feel free to contact support@leaflink.com."

Actions

By default, if you pass a callback function using the onLogout prop the component renders a "Logout" button in the actions slot. You can use the hide-logout-button prop to hide the logout button.

API

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.

• <HttpError />