cloudron-box/dashboard/src/components/FileManager.vue

<script setup>

import { ref, useTemplateRef, onMounted } from 'vue';
import { fetcher } from '@cloudron/pankow';
import OfflineOverlay from '../components/OfflineOverlay.vue';
import ProfileModel from '../models/ProfileModel.js';

const profileModel = ProfileModel.create();

const offlineOverlay = useTemplateRef('offlineOverlay');
const ready = ref(false);

function onOnline() {
  ready.value = true;
}

fetcher.globalOptions.errorHook = (error) => {
  // network error, request killed by browser
  if (error instanceof TypeError) {
    ready.value = false;
    return offlineOverlay.value.open();
  }

  // re-login will make the code get a new token
  if (error.status === 401) return profileModel.logout();

  if (error.status === 500 || error.status === 501) {
    // actual internal server error, most likely a bug or timeout log to console only to not alert the user
    if (!ready.value) {
      console.error(error);
      console.log('------\nCloudron Internal Error\n\nIf you see this, please send a mail with above log to support@cloudron.io\n------\n');
    }
  }

  if (error.status >= 502) {
    // This means the box service is not reachable. We just show offline banner for now
    ready.value = false;
    return offlineOverlay.value.open();
  }
};

onMounted(() => {
  ready.value = true;
});

</script>

<template>
  <div style="height: 100%;">
    <OfflineOverlay ref="offlineOverlay" @online="onOnline()"/>
    <router-view v-if="ready"></router-view>
  </div>
</template>