use error boundary in phone number form

app/core/components/alert.tsx

@@ -1,4 +1,4 @@
-import type { ReactElement } from "react";
+import type { ReactElement, ReactChild } from "react";
 
 type AlertVariant = "error" | "success" | "info" | "warning";
 
@@ -10,8 +10,8 @@ type AlertVariantProps = {
 };
 
 type Props = {
-	title: string;
-	message: string;
+	title: ReactChild;
+	message: ReactChild;
 	variant: AlertVariant;
 };
 

app/settings/components/phone/phone-number-form.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { useMutation, useQuery } from "blitz";
+import { useMutation, useQuery, withErrorBoundary } from "blitz";
 import { useForm } from "react-hook-form";
 
 import setPhoneNumber from "../../mutations/set-phone-number";
@@ -14,8 +14,9 @@ type Form = {
 	phoneNumberSid: string;
 };
 
-export default function PhoneNumberForm() {
-	const { hasFilledTwilioCredentials } = useCurrentUser();
+export default withErrorBoundary(
+	function PhoneNumberForm() {
+		const { organization } = useCurrentUser();
 		const currentPhoneNumber = useUserPhoneNumber();
 		const {
 			register,
@@ -24,6 +25,7 @@ export default function PhoneNumberForm() {
 			formState: { isSubmitting },
 		} = useForm<Form>();
 		const [setPhoneNumberMutation, { error, isError, isSuccess }] = useMutation(setPhoneNumber);
+		const hasFilledTwilioCredentials = Boolean(organization?.twilioAccountSid && organization?.twilioAuthToken);
 		const [availablePhoneNumbers] = useQuery(getAvailablePhoneNumbers, {}, { enabled: hasFilledTwilioCredentials });
 
 		useEffect(() => {
@@ -68,7 +70,11 @@ export default function PhoneNumberForm() {
 
 					{isSuccess ? (
 						<div className="mb-8">
-						<Alert title="Saved successfully" message="Your changes have been saved." variant="success" />
+							<Alert
+								title="Saved successfully"
+								message="Your changes have been saved."
+								variant="success"
+							/>
 						</div>
 					) : null}
 
@@ -90,7 +96,31 @@ export default function PhoneNumberForm() {
 				</SettingsSection>
 			</form>
 		);
+	},
+	{
+		fallbackRender: ({ error, resetErrorBoundary }) => (
+			<Alert
+				variant="error"
+				title="Authorization error"
+				message={
+					<>
+						<p>
+							We failed to fetch your Twilio phone numbers. Make sure both your SID and your auth token
+							are valid and that your Twilio account isn&#39;t suspended.
+							{error.moreInfo ? <a href={error.moreInfo}>Related Twilio docs</a> : null}
+						</p>
+						<button className="inline-flex pt-2 text-left" onClick={resetErrorBoundary}>
+							<span className="transition-colors duration-150 border-b border-red-200 hover:border-red-500">
+								Try again
+							</span>
+						</button>
+					</>
 				}
+			/>
+		),
+		onError: (error) => console.log("error", error),
+	},
+);
 
 function parseErrorMessage(error: Error | null): string {
 	if (!error) {