Appearance

Error Component ​

File Information ​

  • Path: components/theme/global/Error.vue
  • Purpose: Error page display component for handling application errors
  • Type: Global Theme Component

Overview ​

The Error component provides a user-friendly error display page for handling various HTTP errors (404, 401, 500, etc.). It shows appropriate error messages based on the error type and environment, with a "Back to Home" button for navigation.

Key Features ​

  1. Error Code Display

    • Shows HTTP status code (404, 401, 500, etc.)
    • Large, prominent display

  2. Error Messages

    • Development: Shows actual error messages
    • Production: Shows generic messages (except 404)
    • Special handling for 401 (Unauthenticated)

  3. Navigation

    • "Back to Home" button
    • Share page detection
    • Workspace-aware navigation

  4. Environment Awareness

    • Different messages for dev/prod
    • Detailed errors in development
    • User-friendly messages in production

Props ​

error ​

  • Type: Object
  • Required: Yes
  • Description: Error object with statusCode and message

Error Object Structure:

javascript
{
  statusCode: number,    // HTTP status code (404, 401, 500, etc.)
  message: string       // Error message
}

isSharePage ​

  • Type: Boolean
  • Default: false
  • Required: No
    • Description: Indicates if error occurred on share page

Computed Properties ​

errorMessage ​

Returns appropriate error message based on:

  • Environment (development/production)
  • Status code
  • Error type

Logic:

  • Development: Always shows actual error message
  • Production 404: Shows actual error message
  • Production 401: Shows error message or generic
  • Production other: Shows generic "Woops! something went wrong"

Methods ​

backToHome() ​

Handles navigation back to home:

  • Share page: Checks workspace and navigates or reloads
  • Regular page: Navigates to home (/)
  • External users: Logs out and reloads if no workspace

Template Structure ​

vue
<template>
  <div class="error-text h-100">
    <h1>{{ error.statusCode }}</h1>
    <h4>{{ errorMessage }}</h4>
    <v-btn 
      v-if="!isSharePage" 
      @click="backToHome"
    >
      Back to Home
    </v-btn>
  </div>
</template>

Error Handling ​

401 Unauthenticated ​

  • Shows "Session is expired" message
  • Handles authentication errors
  • May show custom message if provided

404 Not Found ​

  • Shows actual error message in all environments
  • User-friendly 404 handling

Other Errors ​

  • Development: Shows actual error message
  • Production: Shows generic message

Styling ​

Uses CSS classes:

  • .error-text - Error container
  • .h-100 - Full height
  • .mt-n10 - Negative top margin
  • .btn-primary - Primary button style

Imports: @/assets/css/collage-login.css

Usage Examples ​

Basic Usage ​

vue
<template>
  <Error :error="error" />
</template>

<script>
import Error from '~/components/theme/global/Error.vue'

export default {
  components: {
    Error
  },
  data() {
    return {
      error: {
        statusCode: 404,
        message: 'Page not found'
      }
    }
  }
}
</script>

In Error Layout ​

vue
<template>
  <Error 
    :error="error" 
    :isSharePage="isSharePage"
  />
</template>

With Different Error Types ​

javascript
// 404 Error
{
  statusCode: 404,
  message: 'Page not found'
}

// 401 Error
{
  statusCode: 401,
  message: 'Unauthenticated'
}

// 500 Error
{
  statusCode: 500,
  message: 'Internal server error'
}

Integration Points ​

  • Error Pages: Used in Nuxt error pages
  • Layouts: Used in error layouts
  • Router: Handles navigation
  • Auth: Checks authentication state

Notes for Development ​

  • Environment-aware error messages
  • Special handling for 401 errors
  • Share page detection
  • Workspace-aware navigation
  • User-friendly error display