From 46eafc98815a41ff0d7a1e27256804fe8f974393 Mon Sep 17 00:00:00 2001 From: Xiao Yijun Date: Mon, 24 Jul 2023 15:06:59 +0800 Subject: [PATCH] refactor(console): improve error handling for cloud api request (#4211) --- .../console/src/cloud/hooks/use-cloud-api.ts | 32 +++++++++++++++++-- .../SelectTenantPlanModal/index.tsx | 7 ++-- .../components/CreateTenantModal/index.tsx | 8 ++--- packages/console/src/hooks/use-invoices.ts | 8 +---- packages/console/src/hooks/use-subscribe.ts | 2 +- .../src/hooks/use-subscription-plans.ts | 8 +---- .../src/hooks/use-subscription-usage.ts | 8 +---- .../console/src/hooks/use-subscription.ts | 8 +---- .../pages/CheckoutSuccessCallback/index.tsx | 2 +- .../MauLimitExceededNotification/index.tsx | 4 +-- .../SwitchPlanActionBar/index.tsx | 23 +++++++------ .../TenantBasicSettings/index.tsx | 2 +- 12 files changed, 58 insertions(+), 54 deletions(-) diff --git a/packages/console/src/cloud/hooks/use-cloud-api.ts b/packages/console/src/cloud/hooks/use-cloud-api.ts index 7478b08c4..c768fc8c5 100644 --- a/packages/console/src/cloud/hooks/use-cloud-api.ts +++ b/packages/console/src/cloud/hooks/use-cloud-api.ts @@ -1,11 +1,34 @@ import type router from '@logto/cloud/routes'; import { useLogto } from '@logto/react'; -import Client from '@withtyped/client'; +import { conditional } from '@silverhand/essentials'; +import Client, { ResponseError } from '@withtyped/client'; import { useMemo } from 'react'; +import { toast } from 'react-hot-toast'; +import { z } from 'zod'; import { cloudApi } from '@/consts'; -export const useCloudApi = (): Client => { +export const responseErrorBodyGuard = z.object({ + message: z.string(), +}); + +export const toastResponseError = async (error: unknown) => { + if (error instanceof ResponseError) { + const parsed = responseErrorBodyGuard.safeParse(await error.response.json()); + toast.error(parsed.success ? parsed.data.message : error.message); + return; + } + + toast(error instanceof Error ? error.message : String(error)); +}; + +type UseCloudApiProps = { + hideErrorToast?: boolean; +}; + +export const useCloudApi = ({ hideErrorToast = false }: UseCloudApiProps = {}): Client< + typeof router +> => { const { isAuthenticated, getAccessToken } = useLogto(); const api = useMemo( () => @@ -16,8 +39,11 @@ export const useCloudApi = (): Client => { return { Authorization: `Bearer ${(await getAccessToken(cloudApi.indicator)) ?? ''}` }; } }, + before: { + ...conditional(!hideErrorToast && { error: toastResponseError }), + }, }), - [getAccessToken, isAuthenticated] + [getAccessToken, hideErrorToast, isAuthenticated] ); return api; diff --git a/packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/index.tsx b/packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/index.tsx index 0940c4b11..a7e14c4f5 100644 --- a/packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/index.tsx +++ b/packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/index.tsx @@ -1,8 +1,7 @@ -import { toast } from 'react-hot-toast'; import { Trans, useTranslation } from 'react-i18next'; import Modal from 'react-modal'; -import { useCloudApi } from '@/cloud/hooks/use-cloud-api'; +import { useCloudApi, toastResponseError } from '@/cloud/hooks/use-cloud-api'; import { type TenantResponse } from '@/cloud/types/router'; import { ReservedPlanId } from '@/consts/subscriptions'; import DangerousRaw from '@/ds-components/DangerousRaw'; @@ -27,7 +26,7 @@ function SelectTenantPlanModal({ tenantData, onClose }: Props) { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const { data: subscriptionPlans } = useSubscriptionPlans(); const { subscribe } = useSubscribe(); - const cloudApi = useCloudApi(); + const cloudApi = useCloudApi({ hideErrorToast: true }); if (!subscriptionPlans || !tenantData) { return null; } @@ -45,7 +44,7 @@ function SelectTenantPlanModal({ tenantData, onClose }: Props) { await subscribe({ planId, tenantData }); } catch (error: unknown) { - toast.error(error instanceof Error ? error.message : String(error)); + void toastResponseError(error); } }; diff --git a/packages/console/src/components/CreateTenantModal/index.tsx b/packages/console/src/components/CreateTenantModal/index.tsx index a2597126c..2d7224a12 100644 --- a/packages/console/src/components/CreateTenantModal/index.tsx +++ b/packages/console/src/components/CreateTenantModal/index.tsx @@ -1,9 +1,9 @@ import type { AdminConsoleKey } from '@logto/phrases'; import { Theme } from '@logto/schemas'; import { TenantTag } from '@logto/schemas/models'; +import { trySafe } from '@silverhand/essentials'; import { useState } from 'react'; import { Controller, FormProvider, useForm } from 'react-hook-form'; -import { toast } from 'react-hot-toast'; import { useTranslation } from 'react-i18next'; import Modal from 'react-modal'; @@ -65,14 +65,12 @@ function CreateTenantModal({ isOpen, onClose, skipPlanSelection = false }: Props const cloudApi = useCloudApi(); const createTenant = async (data: CreateTenantData) => { - try { + void trySafe(async () => { const { name, tag } = data; const newTenant = await cloudApi.post('/api/tenants', { body: { name, tag } }); reset(); onClose(newTenant); - } catch (error: unknown) { - toast.error(error instanceof Error ? error.message : String(error)); - } + }); }; /** diff --git a/packages/console/src/hooks/use-invoices.ts b/packages/console/src/hooks/use-invoices.ts index 3c45862c9..213eb7b7e 100644 --- a/packages/console/src/hooks/use-invoices.ts +++ b/packages/console/src/hooks/use-invoices.ts @@ -1,4 +1,3 @@ -import { toast } from 'react-hot-toast'; import useSWR from 'swr'; import { useCloudApi } from '@/cloud/hooks/use-cloud-api'; @@ -12,12 +11,7 @@ const useInvoices = (tenantId: string) => { * Todo: @xiaoyijun remove this condition on subscription features ready. */ !isProduction && isCloud && `/api/tenants/${tenantId}/invoices`, - async () => cloudApi.get('/api/tenants/:tenantId/invoices', { params: { tenantId } }), - { - onError: (error: unknown) => { - toast.error(error instanceof Error ? error.message : String(error)); - }, - } + async () => cloudApi.get('/api/tenants/:tenantId/invoices', { params: { tenantId } }) ); const { data: invoicesResponse } = swrResponse; diff --git a/packages/console/src/hooks/use-subscribe.ts b/packages/console/src/hooks/use-subscribe.ts index 94478a45f..8b8628335 100644 --- a/packages/console/src/hooks/use-subscribe.ts +++ b/packages/console/src/hooks/use-subscribe.ts @@ -18,7 +18,7 @@ type SubscribeProps = { }; const useSubscribe = () => { - const cloudApi = useCloudApi(); + const cloudApi = useCloudApi({ hideErrorToast: true }); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const { getUrl } = useTenantPathname(); diff --git a/packages/console/src/hooks/use-subscription-plans.ts b/packages/console/src/hooks/use-subscription-plans.ts index 5c5f7850a..9ef168865 100644 --- a/packages/console/src/hooks/use-subscription-plans.ts +++ b/packages/console/src/hooks/use-subscription-plans.ts @@ -1,6 +1,5 @@ import { type Optional } from '@silverhand/essentials'; import { useMemo } from 'react'; -import { toast } from 'react-hot-toast'; import useSWRImmutable from 'swr/immutable'; import { useCloudApi } from '@/cloud/hooks/use-cloud-api'; @@ -17,12 +16,7 @@ const useSubscriptionPlans = () => { * Todo: @xiaoyijun remove this condition on subscription features ready. */ !isProduction && isCloud && '/api/subscription-plans', - async () => cloudApi.get('/api/subscription-plans'), - { - onError: (error: unknown) => { - toast.error(error instanceof Error ? error.message : String(error)); - }, - } + async () => cloudApi.get('/api/subscription-plans') ); const { data: subscriptionPlansResponse } = useSwrResponse; diff --git a/packages/console/src/hooks/use-subscription-usage.ts b/packages/console/src/hooks/use-subscription-usage.ts index f30fc0bdc..5994720d0 100644 --- a/packages/console/src/hooks/use-subscription-usage.ts +++ b/packages/console/src/hooks/use-subscription-usage.ts @@ -1,4 +1,3 @@ -import { toast } from 'react-hot-toast'; import useSWR from 'swr'; import { useCloudApi } from '@/cloud/hooks/use-cloud-api'; @@ -16,12 +15,7 @@ const useSubscriptionUsage = (tenantId: string) => { async () => cloudApi.get('/api/tenants/:tenantId/usage', { params: { tenantId }, - }), - { - onError: (error: unknown) => { - toast.error(error instanceof Error ? error.message : String(error)); - }, - } + }) ); }; diff --git a/packages/console/src/hooks/use-subscription.ts b/packages/console/src/hooks/use-subscription.ts index bcb4a40a5..35af54395 100644 --- a/packages/console/src/hooks/use-subscription.ts +++ b/packages/console/src/hooks/use-subscription.ts @@ -1,4 +1,3 @@ -import { toast } from 'react-hot-toast'; import useSWR from 'swr'; import { useCloudApi } from '@/cloud/hooks/use-cloud-api'; @@ -15,12 +14,7 @@ const useSubscription = (tenantId: string) => { async () => cloudApi.get('/api/tenants/:tenantId/subscription', { params: { tenantId }, - }), - { - onError: (error: unknown) => { - toast.error(error instanceof Error ? error.message : String(error)); - }, - } + }) ); }; diff --git a/packages/console/src/pages/CheckoutSuccessCallback/index.tsx b/packages/console/src/pages/CheckoutSuccessCallback/index.tsx index 3b9c25cb3..bc90690dd 100644 --- a/packages/console/src/pages/CheckoutSuccessCallback/index.tsx +++ b/packages/console/src/pages/CheckoutSuccessCallback/index.tsx @@ -23,7 +23,7 @@ const subscriptionCheckingTimeout = 10 * 1000; function CheckoutSuccessCallback() { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.subscription' }); const { navigate } = useTenantPathname(); - const cloudApi = useCloudApi(); + const cloudApi = useCloudApi({ hideErrorToast: true }); const { currentTenantId, navigateTenant } = useContext(TenantsContext); const { search } = useLocation(); const checkoutState = new URLSearchParams(search).get(checkoutStateQueryKey); diff --git a/packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/MauLimitExceededNotification/index.tsx b/packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/MauLimitExceededNotification/index.tsx index 59dbb60cc..52c538e6e 100644 --- a/packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/MauLimitExceededNotification/index.tsx +++ b/packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/MauLimitExceededNotification/index.tsx @@ -1,6 +1,6 @@ import { useContext } from 'react'; -import { toast } from 'react-hot-toast'; +import { toastResponseError } from '@/cloud/hooks/use-cloud-api'; import { subscriptionPage } from '@/consts/pages'; import { ReservedPlanId } from '@/consts/subscriptions'; import { TenantsContext } from '@/contexts/TenantsProvider'; @@ -41,7 +41,7 @@ function MauLimitExceededNotification({ activeUsers, currentPlan, className }: P callbackPage: subscriptionPage, }); } catch (error: unknown) { - toast.error(error instanceof Error ? error.message : String(error)); + void toastResponseError(error); } }} > diff --git a/packages/console/src/pages/TenantSettings/Subscription/SwitchPlanActionBar/index.tsx b/packages/console/src/pages/TenantSettings/Subscription/SwitchPlanActionBar/index.tsx index 136251036..8a62ae6b1 100644 --- a/packages/console/src/pages/TenantSettings/Subscription/SwitchPlanActionBar/index.tsx +++ b/packages/console/src/pages/TenantSettings/Subscription/SwitchPlanActionBar/index.tsx @@ -1,7 +1,9 @@ +import { ResponseError } from '@withtyped/client'; import { useContext } from 'react'; import { toast } from 'react-hot-toast'; import { Trans, useTranslation } from 'react-i18next'; +import { responseErrorBodyGuard, toastResponseError } from '@/cloud/hooks/use-cloud-api'; import PlanName from '@/components/PlanName'; import { contactEmailLink } from '@/consts'; import { subscriptionPage } from '@/consts/pages'; @@ -58,17 +60,20 @@ function SwitchPlanActionBar({ * Note: this is a temporary solution to handle the case when the user tries to downgrade but the quota limit is exceeded. * Need a better solution to handle this case by sharing the error type between the console and cloud. - LOG-6608 */ - if (error instanceof Error && error.message.includes('Exceeded quota limit')) { - await show({ - ModalContent: () => , - title: 'subscription.downgrade_modal.not_eligible', - confirmButtonText: 'general.got_it', - confirmButtonType: 'primary', - }); + if (error instanceof ResponseError) { + const parsed = responseErrorBodyGuard.safeParse(await error.response.json()); + if (parsed.success && parsed.data.message.includes('Exceeded quota limit')) { + await show({ + ModalContent: () => , + title: 'subscription.downgrade_modal.not_eligible', + confirmButtonText: 'general.got_it', + confirmButtonType: 'primary', + }); + } return; } - toast.error(error instanceof Error ? error.message : String(error)); + void toastResponseError(error); } }; @@ -126,7 +131,7 @@ function SwitchPlanActionBar({ callbackPage: subscriptionPage, }); } catch (error: unknown) { - toast.error(error instanceof Error ? error.message : String(error)); + void toastResponseError(error); } }} /> diff --git a/packages/console/src/pages/TenantSettings/TenantBasicSettings/index.tsx b/packages/console/src/pages/TenantSettings/TenantBasicSettings/index.tsx index 61a4ce5e0..ce8199d8e 100644 --- a/packages/console/src/pages/TenantSettings/TenantBasicSettings/index.tsx +++ b/packages/console/src/pages/TenantSettings/TenantBasicSettings/index.tsx @@ -27,7 +27,7 @@ const tenantProfileToForm = (tenant?: TenantResponse): TenantSettingsForm => { function TenantBasicSettings() { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); - const api = useCloudApi(); + const api = useCloudApi({ hideErrorToast: true }); const { currentTenant, currentTenantId, updateTenant, removeTenant, navigateTenant } = useContext(TenantsContext); const [error, setError] = useState();