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) =>
++ ) : null} ++ {error.description} ({error.code}) ++{error.explanation}+
+ We have been automatically notified and we're doing our best to make sure this does not happen + again! +
+ +