Error Component

File Information

• Path: app/components/global/Error.vue
• Rendered by: app/error.vue (Nuxt error page)
• Purpose: Shows the status code, a user-safe message and a "Back to Home" button
• Type: Global Component

Overview

app/error.vue is the Nuxt error page. It decides which shell to render, applies brand colors, and passes a normalised error object to Error.vue. Error.vue only renders text and routes the user back.

Shell selection in app/error.vue

• showShell is computed inside a watchEffect started in onMounted, so the first render is always the bare div.main; the shell appears client-side once auth and route are known.
• 401 never gets the shell: an expired session always shows the bare page, even if isAuthenticated is still true in the store.
• Brand colors are applied before brandingReady flips, so the bare-page Error renders with brand CSS variables already set (c5704db).
• The error-auth layout clears the error on any route.fullPath change, so sidebar or header navigation leaves the error page normally. See Layouts.

Features

Message rules (errorMessage)

Evaluated in this order, with raw = error.message || error.statusMessage || "":

#	Condition	Message shown
1	no error prop	Woops! something went wrong
2	statusCode === 404 and raw empty or matches /^page not found:?/i	This page could not be found
3	statusCode === 404 otherwise	raw
4	not production (import.meta.env.PROD false) or statusCode === 500	raw or the fallback
5	production and statusCode === 401	raw or the fallback
6	production, any other code	Woops! something went wrong

statusCode is parseInt(error.statusCode || 500). For 401 the template swaps the text Unauthenticated for Session is expired..

Example: an invalid encrypted search URL raises showError({ statusCode: 404, statusMessage: "The search URL is invalid.", message: "The search URL is invalid." }) in useSearch, which matches rule 3 and shows "The search URL is invalid." under a large 404.

Back to Home (backToHome)

1. No brand_name in the route: go to /.
2. appDataStore.brand.workspace.url_slug present: go to /<brand_name>.
3. Otherwise verify the brand: identifier is brand_name on a main app host (isMainAppHost) or the host without port on a custom domain; POST <apiBaseUrl>verify-domain (or /api/verify-domain when apiBaseUrl is unset) with { url }. code === 200 goes to /<brand_name>/login; any other result or an exception goes to /.

Layout

The root is div.collage-body, with ml-0 added when the user is not authenticated (no sidebar to offset). Inside, div.error-text.h-100.w-100 holds an h1 with the status code (or Error), the h4 message and the button. The earlier emptyCollageIcon illustration was removed in ee26b58.

Props

Prop	Type	Required
error	Object (statusCode, message, statusMessage)	yes

Events

None. Navigation is done with navigateTo().

Usage Example

<!-- app/error.vue (simplified) -->
<template>
  <v-app v-if="showShell">
    <NuxtLayout name="error-auth">
      <Error :error="errorObject" />
    </NuxtLayout>
  </v-app>
  <div v-else class="main">
    <Error v-if="brandingReady" :error="errorObject" />
  </div>
</template>

Related Components

• Header - hideSearch prop used by the error-auth layout
• See Components Overview for all components

Related Documentation

• Error page styles
• App Data Store - fetchBrandDetails
• Components Overview - All components
• Types - TypeScript type definitions
• Styling - SCSS styling system