refactored error handling and resource blocked message

Author: lohanidamodar

src/global.d.ts

@@ -4,6 +4,11 @@ interface Window { }
 namespace App {
     interface Error {
         type: string = 'unknown',
-        resource: string = 'project',
+    }
+
+    interface HandleClientError {
+        message: string;
+        status?: number;
+        type: string;
     }
 }

src/hooks.client.ts

@@ -13,13 +13,16 @@ Sentry.init({
 
 export const handleError: HandleClientError = ({ error, message, status }) => {
     console.error(error);
+    let type = 'unknown';
     if (error instanceof AppwriteException) {
         status = error.code === 0 ? undefined : error.code;
         message = error.message;
+        type = error.type
     }
 
     return {
         message,
-        status
-    };
+        status,
+        type
+    }
 };

src/routes/(console)/project-[region]-[project]/+error.svelte

@@ -1,12 +1,19 @@
-<script>
+<script lang="ts">
     import { page } from '$app/state';
     import { Container } from '$lib/layout';
     import { Card, Typography } from '@appwrite.io/pink-svelte';
+    function getResource(id: string) {        
+        id = id.replace('/(console)/project-[region]-[project]/', '');
+        let parts = id.split('/');
+        const resource = parts[0];
+
+        return resource === 'settings' ? 'project' : resource;
+    }
 </script>
 
 <Container>
     {#if page.error.type === 'general_resource_blocked'}
-        {@const resource = page.error.resource || 'project'}
+        {@const resource = getResource(page.route.id)}
         <Card.Base>
             <Typography.Title size="s">Your {resource} is paused</Typography.Title>
             <p class="text-red-500">

src/routes/(console)/project-[region]-[project]/+layout.ts

@@ -1,6 +1,5 @@
 import { Dependencies } from '$lib/constants';
 import { sdk } from '$lib/stores/sdk';
-import { error } from '@sveltejs/kit';
 import type { LayoutLoad } from './$types';
 import { preferences } from '$lib/stores/preferences';
 import { failedInvoice } from '$lib/stores/billing';
@@ -17,50 +16,47 @@ export const load: LayoutLoad = async ({ params, depends }) => {
     depends(Dependencies.PROJECT);
     let currentPlan: Plan = null;
 
-    try {
-        const project = await sdk.forConsole.projects.get(params.project);
-        const [organization, prefs, regionalConsoleVariables, _] = await Promise.all([
-            sdk.forConsole.teams.get(project.teamId) as Promise<Organization>,
-            sdk.forConsole.account.getPrefs(),
-            sdk.forConsoleIn(project.region).console.variables(),
-            loadAvailableRegions(project.teamId)
-        ]);
-        if (prefs?.organization !== project.teamId) {
-            sdk.forConsole.account.updatePrefs({
-                ...prefs,
-                organization: project.teamId
-            });
-        }
-        await preferences.loadTeamPrefs(project.teamId);
-        let roles = isCloud ? [] : defaultRoles;
-        let scopes = isCloud ? [] : defaultScopes;
-        if (isCloud) {
-            currentPlan = await sdk.forConsole.billing.getOrganizationPlan(project.teamId);
-            const res = await sdk.forConsole.billing.getRoles(project.teamId);
-            roles = res.roles;
-            scopes = res.scopes;
-            if (scopes.includes('billing.read')) {
-                await failedInvoice.load(project.teamId);
-                if (get(failedInvoice)) {
-                    headerAlert.add({
-                        show: true,
-                        component: PaymentFailed,
-                        id: 'paymentFailed',
-                        importance: 1
-                    });
-                }
+    const project = await sdk.forConsole.projects.get(params.project);
+    const [organization, prefs, regionalConsoleVariables, _] = await Promise.all([
+        sdk.forConsole.teams.get(project.teamId) as Promise<Organization>,
+        sdk.forConsole.account.getPrefs(),
+        sdk.forConsoleIn(project.region).console.variables(),
+        loadAvailableRegions(project.teamId)
+    ]);
+    if (prefs?.organization !== project.teamId) {
+        sdk.forConsole.account.updatePrefs({
+            ...prefs,
+            organization: project.teamId
+        });
+    }
+    await preferences.loadTeamPrefs(project.teamId);
+    let roles = isCloud ? [] : defaultRoles;
+    let scopes = isCloud ? [] : defaultScopes;
+    if (isCloud) {
+        currentPlan = await sdk.forConsole.billing.getOrganizationPlan(project.teamId);
+        const res = await sdk.forConsole.billing.getRoles(project.teamId);
+        roles = res.roles;
+        scopes = res.scopes;
+        if (scopes.includes('billing.read')) {
+            await failedInvoice.load(project.teamId);
+            if (get(failedInvoice)) {
+                headerAlert.add({
+                    show: true,
+                    component: PaymentFailed,
+                    id: 'paymentFailed',
+                    importance: 1
+                });
             }
         }
-
-        return {
-            project,
-            organization,
-            regionalConsoleVariables,
-            roles,
-            scopes,
-            currentPlan
-        };
-    } catch (e) {
-        error(e.code, e.message);
     }
+
+    return {
+        project,
+        organization,
+        regionalConsoleVariables,
+        roles,
+        scopes,
+        currentPlan
+    };
+
 };

src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/+layout.ts

@@ -3,17 +3,13 @@ import Header from './header.svelte';
 import { sdk } from '$lib/stores/sdk';
 import type { LayoutLoad } from './$types';
 import { Dependencies } from '$lib/constants';
-import { error } from '@sveltejs/kit';
 
 export const load: LayoutLoad = async ({ params, depends }) => {
     depends(Dependencies.TEAM);
-    try {
-        return {
-            header: Header,
-            breadcrumbs: Breadcrumbs,
-            team: await sdk.forProject(params.region, params.project).teams.get(params.team)
-        };
-    } catch (e) {
-        error(e.code, e.message);
-    }
+    return {
+        header: Header,
+        breadcrumbs: Breadcrumbs,
+        team: await sdk.forProject(params.region, params.project).teams.get(params.team)
+    };
+
 };

src/routes/(console)/project-[region]-[project]/auth/usage/[[period]]/+page.ts

@@ -2,15 +2,11 @@ import { isValueOfStringEnum } from '$lib/helpers/types';
 import { sdk } from '$lib/stores/sdk';
 import { UserUsageRange } from '@appwrite.io/console';
 import type { PageLoad } from './$types';
-import { error } from '@sveltejs/kit';
 
 export const load: PageLoad = async ({ params }) => {
     const period = isValueOfStringEnum(UserUsageRange, params.period)
         ? params.period
         : UserUsageRange.ThirtyDays;
-    try {
-        return sdk.forProject(params.region, params.project).users.getUsage(period);
-    } catch (e) {
-        error(e.code, e.message);
-    }
+    return sdk.forProject(params.region, params.project).users.getUsage(period);
+
 };

src/routes/(console)/project-[region]-[project]/auth/user-[user]/+layout.ts

@@ -3,24 +3,19 @@ import Breadcrumbs from './breadcrumbs.svelte';
 import Header from './header.svelte';
 import { sdk } from '$lib/stores/sdk';
 import { Dependencies } from '$lib/constants';
-import { error } from '@sveltejs/kit';
 
 export const load: LayoutLoad = async ({ params, depends }) => {
     depends(Dependencies.USER);
 
-    try {
-        const [user, userFactors] = await Promise.all([
-            sdk.forProject(params.region, params.project).users.get(params.user),
-            sdk.forProject(params.region, params.project).users.listMfaFactors(params.user)
-        ]);
+    const [user, userFactors] = await Promise.all([
+        sdk.forProject(params.region, params.project).users.get(params.user),
+        sdk.forProject(params.region, params.project).users.listMfaFactors(params.user)
+    ]);
 
-        return {
-            header: Header,
-            breadcrumbs: Breadcrumbs,
-            user,
-            userFactors
-        };
-    } catch (e) {
-        error(e.code, e.message);
-    }
+    return {
+        header: Header,
+        breadcrumbs: Breadcrumbs,
+        user,
+        userFactors
+    };
 };

src/routes/(console)/project-[region]-[project]/databases/+page.ts

@@ -8,7 +8,6 @@ import type { BackupPolicy } from '$lib/sdk/backups';
 import { isSelfHosted } from '$lib/system';
 import { isCloud } from '$lib/system';
 import type { Plan } from '$lib/sdk/billing';
-import { error } from '@sveltejs/kit';
 
 export const load: PageLoad = async ({ url, route, depends, params, parent }) => {
     depends(Dependencies.DATABASES);
@@ -22,31 +21,22 @@ export const load: PageLoad = async ({ url, route, depends, params, parent }) =>
     // already loaded by parent.
     const { currentPlan } = await parent();
 
-    try {
-        const { databases, policies, lastBackups } = await fetchDatabasesAndBackups(
-            limit,
-            offset,
-            params,
-            search,
-            currentPlan
-        );
-        return {
-            offset,
-            limit,
-            view,
-            search,
-            policies,
-            databases,
-            lastBackups
-        };
-
-    } catch (e) {
-        error(e.status || 500, {
-            message: e.message,
-            type: e.type || 'unknown',
-            resource: 'databases'
-        });
-    }
+    const { databases, policies, lastBackups } = await fetchDatabasesAndBackups(
+        limit,
+        offset,
+        params,
+        search,
+        currentPlan
+    );
+    return {
+        offset,
+        limit,
+        view,
+        search,
+        policies,
+        databases,
+        lastBackups
+    };
 };
 
 async function fetchDatabasesAndBackups(

src/routes/(console)/project-[region]-[project]/databases/database-[database]/+layout.ts

@@ -1,22 +1,17 @@
 import { sdk } from '$lib/stores/sdk';
 import { Dependencies } from '$lib/constants';
-import { error } from '@sveltejs/kit';
 import type { LayoutLoad } from './$types';
 import Breadcrumbs from './breadcrumbs.svelte';
 import Header from './header.svelte';
 
 export const load: LayoutLoad = async ({ params, depends }) => {
     depends(Dependencies.DATABASE);
 
-    try {
-        return {
-            header: Header,
-            breadcrumbs: Breadcrumbs,
-            database: await sdk
-                .forProject(params.region, params.project)
-                .databases.get(params.database)
-        };
-    } catch (e) {
-        error(e.code, e.message);
-    }
+    return {
+        header: Header,
+        breadcrumbs: Breadcrumbs,
+        database: await sdk
+            .forProject(params.region, params.project)
+            .databases.get(params.database)
+    };
 };

src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.ts

@@ -3,30 +3,26 @@ import { Dependencies } from '$lib/constants';
 import type { LayoutLoad } from './$types';
 import Breadcrumbs from './breadcrumbs.svelte';
 import Header from './header.svelte';
-import { error } from '@sveltejs/kit';
 import SubNavigation from './subNavigation.svelte';
 import { Query } from '@appwrite.io/console';
 
 export const load: LayoutLoad = async ({ params, depends }) => {
     depends(Dependencies.COLLECTION);
-    try {
-        const [collection, allCollections] = await Promise.all([
-            sdk
-                .forProject(params.region, params.project)
-                .databases.getCollection(params.database, params.collection),
-            sdk
-                .forProject(params.region, params.project)
-                .databases.listCollections(params.database, [Query.orderDesc(''), Query.limit(100)])
-        ]);
 
-        return {
-            header: Header,
-            breadcrumbs: Breadcrumbs,
-            subNavigation: SubNavigation,
-            collection,
-            allCollections
-        };
-    } catch (e) {
-        error(e.code, e.message);
-    }
+    const [collection, allCollections] = await Promise.all([
+        sdk
+            .forProject(params.region, params.project)
+            .databases.getCollection(params.database, params.collection),
+        sdk
+            .forProject(params.region, params.project)
+            .databases.listCollections(params.database, [Query.orderDesc(''), Query.limit(100)])
+    ]);
+
+    return {
+        header: Header,
+        breadcrumbs: Breadcrumbs,
+        subNavigation: SubNavigation,
+        collection,
+        allCollections
+    };
 };