fix: Fix handling of upstream errors (#413)

* Fix error propagation

* Update some pkgs

* Better erro msg

package.json

@@ -21,15 +21,15 @@
 		"@sentry/nextjs": "^7.24.2",
 		"@stripe/stripe-js": "^1.46.0",
 		"@supabase/supabase-js": "^1.35.7",
-		"@types/cors": "^2.8.12",
+		"@types/cors": "^2.8.13",
 		"@types/mailgun-js": "^0.22.13",
 		"@types/markdown-pdf": "^9.0.1",
 		"@types/mustache": "^4.2.2",
 		"@types/react": "^17.0.43",
 		"@types/react-dom": "^18.0.3",
 		"@types/request-ip": "^0.0.37",
 		"@types/uuid": "^9.0.0",
-		"axios": "^1.2.1",
+		"axios": "^1.2.2",
 		"cors": "^2.8.5",
 		"date-fns": "^2.29.3",
 		"mailgun-js": "^0.22.0",
@@ -44,8 +44,8 @@
 	},
 	"devDependencies": {
 		"@amaurym/config": "^1.3.6",
-		"eslint-config-next": "^13.0.6",
-		"typescript": "^4.8.2",
-		"vercel": "^28.8.0"
+		"eslint-config-next": "^13.1.1",
+		"typescript": "^4.9.4",
+		"vercel": "^28.10.3"
 	}
 }

src/components/ApiUsage.tsx

@@ -1,27 +1,15 @@
 import { Capacity, Loading, Spacer, Text } from '@geist-ui/react';
 import { Loader } from '@geist-ui/react-icons';
-import { User } from '@supabase/supabase-js';
 import { format, parseISO } from 'date-fns';
 import React, { useEffect, useState } from 'react';
 
 import { sentryException } from '../util/sentry';
 import { subApiMaxCalls } from '../util/subs';
-import {
-	getApiUsageClient,
-	SupabaseSubscription,
-} from '../util/supabaseClient';
+import { getApiUsageClient } from '../util/supabaseClient';
 import { useUser } from '../util/useUser';
 import styles from './ApiUsage.module.css';
 import { Demo } from './Demo';
 
-function fetchApiCalls(
-	user: User,
-	subscription: SupabaseSubscription | null,
-	onResult: (count: number) => void
-) {
-	getApiUsageClient(user, subscription).then(onResult).catch(sentryException);
-}
-
 export function ApiUsage(): React.ReactElement {
 	const { subscription, user, userFinishedLoading } = useUser();
 	const [apiCalls, setApiCalls] = useState<number | undefined>(undefined); // undefined means loading
@@ -30,7 +18,9 @@ export function ApiUsage(): React.ReactElement {
 		if (!user || !userFinishedLoading) {
 			return;
 		}
-		fetchApiCalls(user, subscription, setApiCalls);
+		getApiUsageClient(user, subscription)
+			.then(setApiCalls)
+			.catch(sentryException);
 	}, [user, userFinishedLoading, subscription]);
 
 	if (!user) {
@@ -71,9 +61,9 @@ export function ApiUsage(): React.ReactElement {
 
 			<Spacer />
 			<Demo
-				onVerified={() => {
-					fetchApiCalls(user, subscription, setApiCalls);
-				}}
+				onVerified={() =>
+					getApiUsageClient(user, subscription).then(setApiCalls)
+				}
 			/>
 			<Spacer />
 		</section>

src/components/Demo.tsx

@@ -13,7 +13,7 @@ function alertError(e: string) {
 }
 
 interface DemoProps {
-	onVerified?(result: CheckEmailOutput): void;
+	onVerified?(result: CheckEmailOutput): Promise<void>;
 }
 
 export function Demo({ onVerified }: DemoProps): React.ReactElement {
@@ -48,11 +48,12 @@ export function Demo({ onVerified }: DemoProps): React.ReactElement {
 			.then((r) => {
 				setResult(r);
 				setLoading(false);
-				onVerified && onVerified(r);
+				return onVerified && onVerified(r);
 			})
 			.catch((err: Error) => {
-				alertError(JSON.stringify(err));
 				sentryException(err);
+				alertError(err.message);
+				setLoading(false);
 			});
 	}
 

src/pages/api/v0/check_email.ts

@@ -241,7 +241,7 @@ async function tryAllBackends(
 		}
 
 		return res.status(statusCode).json({
-			error: (err as AxiosError<unknown>).response?.data,
+			error: (err as AxiosError).response?.data,
 		});
 	}
 }

src/util/helpers.ts

@@ -38,14 +38,23 @@ export const postData = async <T = unknown>({
 
 		return res;
 	} catch (err) {
-		if ((err as AxiosError).response?.data) {
-			throw new Error(
-				(
-					err as AxiosError<{
-						error: string;
-					}>
-				).response?.data.error
-			);
+		if (err instanceof AxiosError) {
+			// Inspired by https://stackoverflow.com/questions/49967779/axios-handling-errors
+			let m: string;
+			if (err.response) {
+				// Request made and server responded
+				m = `${err.response.status?.toString()} ${JSON.stringify(
+					err.response.data
+				)}`; // eslint-disable-line
+			} else if (err.request) {
+				// The request was made but no response was received
+				m = 'Error in request';
+			} else {
+				// Something happened in setting up the request that triggered an Error
+				m = 'Error: ' + err.message;
+			}
+
+			throw new Error(m);
 		} else {
 			throw err;
 		}