diff --git a/app/phone-calls/hooks/use-make-call.ts b/app/phone-calls/hooks/use-make-call.ts index 2b50391..84e7c91 100644 --- a/app/phone-calls/hooks/use-make-call.ts +++ b/app/phone-calls/hooks/use-make-call.ts @@ -40,17 +40,24 @@ export default function useMakeCall({ recipient, onHangUp }: Params) { // @ts-ignore window.ddd = outgoingConnection; - // TODO: remove event listeners + outgoingConnection.on("error", (error) => { + outgoingConnection.off("cancel", endCall); + outgoingConnection.off("disconnect", endCall); + setState(() => { + // hack to trigger the error boundary + throw error; + }); + }); outgoingConnection.once("accept", (call: Call) => setState("call_in_progress")); outgoingConnection.on("cancel", endCall); outgoingConnection.on("disconnect", endCall); - outgoingConnection.on("error", (error) => { - console.error("call error", error); - alert(error); - }); } function endCall() { + outgoingConnection?.off("cancel", endCall); + outgoingConnection?.off("disconnect", endCall); + outgoingConnection?.disconnect(); + setState("call_ending"); setTimeout(() => { setState("call_ended"); diff --git a/app/phone-calls/pages/outgoing-call/[recipient].tsx b/app/phone-calls/pages/outgoing-call/[recipient].tsx index dc15b5d..be705ab 100644 --- a/app/phone-calls/pages/outgoing-call/[recipient].tsx +++ b/app/phone-calls/pages/outgoing-call/[recipient].tsx @@ -1,6 +1,7 @@ -import type { BlitzPage } from "blitz"; -import { Routes, useRouter } from "blitz"; +import type { BlitzPage, ErrorFallbackProps, WithRouterProps } from "blitz"; +import { ErrorBoundary, Routes, useRouter, withRouter } from "blitz"; import { useCallback, useEffect } from "react"; +import type { TwilioError } from "@twilio/voice-sdk"; import { atom, useAtom } from "jotai"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faPhoneAlt as faPhone } from "@fortawesome/pro-solid-svg-icons"; @@ -67,7 +68,7 @@ const OutgoingCall: BlitzPage = () => { case "calling": return "Calling..."; case "call_in_progress": - return ""; // TODO display time elapsed + return "In call"; // TODO display time elapsed case "call_ending": return "Call ending..."; case "call_ended": @@ -86,5 +87,48 @@ const pressDigitAtom = atom(null, (get, set, digit: string) => { }); OutgoingCall.authenticate = { redirectTo: Routes.SignIn() }; +OutgoingCall.getLayout = (page) => {page}; + +const ErrorFallback = withRouter(function WrappedErrorFallback({ + error, + router, +}: ErrorFallbackProps & WithRouterProps) { + console.log("error", JSON.parse(JSON.stringify(error))); + return ( +
+
+

+ Sorry, an error has occurred during your call +

+ {isTwilioError(error) ? ( +
+						
+ {error.description} ({error.code}) +
+
{error.explanation}
+
+ ) : null} +

+ We have been automatically notified and we're doing our best to make sure this does not happen + again! +

+ +
+ +
+
+
+ ); +}); + +function isTwilioError(error: any): error is typeof TwilioError { + return error.hasOwnProperty("explanation"); +} export default OutgoingCall;