hoppscotch/packages/hoppscotch-app/layouts/error.vue

<template>
  <div class="page page-error">
    <img
      :src="`/images/states/${$colorMode.value}/youre_lost.svg`"
      loading="lazy"
      class="inline-flex flex-col object-contain object-center my-4 h-46 w-46"
      :alt="message"
    />
    <h1 class="mb-4 text-4xl heading">{{ statusCode }}</h1>
    <h3 class="select-text">{{ message }}</h3>
    <p class="mt-4">
      <ButtonSecondary to="/" svg="home" filled :label="$t('app.home')" />
      <ButtonSecondary
        svg="refresh-cw"
        :label="$t('app.reload')"
        filled
        @click.native="reloadApplication"
      />
    </p>
  </div>
</template>

<script>
import { defineComponent } from "@nuxtjs/composition-api"
import { initializeFirebase } from "~/helpers/fb"

export default defineComponent({
  props: {
    error: {
      type: Object,
      default: null,
    },
  },

  computed: {
    statusCode() {
      return (this.error && this.error.statusCode) || 500
    },
    message() {
      return this.error.message || this.$t("error.something_went_wrong")
    },
  },

  beforeMount() {
    initializeFirebase()
  },

  methods: {
    reloadApplication() {
      window.location.reload()
    },
  },
})
</script>

<style scoped lang="scss">
.page-error {
  @apply flex flex-col;
  @apply items-center;
  @apply justify-center;
  @apply text-center;
}

.error_banner {
  @apply w-24;
  @apply mb-12;
}
</style>