Fixup: error boundary context not needed, local error resets already

This commit is contained in:
Valere
2025-03-17 11:26:16 +01:00
parent 20ba3e9573
commit 03b5f0f2f9
5 changed files with 5 additions and 116 deletions

View File

@@ -1,18 +0,0 @@
/*
Copyright 2025 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/
import { createContext } from "react";
import { type ElementCallError } from "../utils/errors.ts";
export type GroupCallErrorBoundaryContextType = {
subscribe: (cb: (error: ElementCallError) => void) => () => void;
notifyHandled: (error: ElementCallError) => void;
};
export const GroupCallErrorBoundaryContext =
createContext<GroupCallErrorBoundaryContextType | null>(null);

View File

@@ -1,54 +0,0 @@
/*
Copyright 2025 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/
import {
type FC,
type PropsWithChildren,
useCallback,
useMemo,
useRef,
} from "react";
import type { ElementCallError } from "../utils/errors.ts";
import {
GroupCallErrorBoundaryContext,
type GroupCallErrorBoundaryContextType,
} from "./GroupCallErrorBoundaryContext.tsx";
export const GroupCallErrorBoundaryContextProvider: FC<PropsWithChildren> = ({
children,
}) => {
const subscribers = useRef<Set<(error: ElementCallError) => void>>(new Set());
// Register a component for updates
const subscribe = useCallback(
(cb: (error: ElementCallError) => void): (() => void) => {
subscribers.current.add(cb);
return (): boolean => subscribers.current.delete(cb); // Unsubscribe function
},
[],
);
// Notify all subscribers
const notify = useCallback((error: ElementCallError) => {
subscribers.current.forEach((callback) => callback(error));
}, []);
const context: GroupCallErrorBoundaryContextType = useMemo(
() => ({
notifyHandled: notify,
subscribe,
}),
[subscribe, notify],
);
return (
<GroupCallErrorBoundaryContext.Provider value={context}>
{children}
</GroupCallErrorBoundaryContext.Provider>
);
};

View File

@@ -68,7 +68,6 @@ import {
useSetting,
} from "../settings/settings";
import { useTypedEventEmitter } from "../useEvents";
import { GroupCallErrorBoundaryContextProvider } from "./GroupCallErrorBoundaryContextProvider.tsx";
import { useGroupCallErrorBoundary } from "./useCallErrorBoundary.ts";
declare global {
@@ -90,15 +89,7 @@ interface Props {
widget: WidgetHelpers | null;
}
export const GroupCallView: FC<Props> = (props) => {
return (
<GroupCallErrorBoundaryContextProvider>
<GroupCallViewInner {...props} />
</GroupCallErrorBoundaryContextProvider>
);
};
export const GroupCallViewInner: FC<Props> = ({
export const GroupCallView: FC<Props> = ({
client,
isPasswordlessUser,
confineToRoom,

View File

@@ -11,7 +11,6 @@ import { type ReactElement, useCallback } from "react";
import userEvent from "@testing-library/user-event";
import { BrowserRouter } from "react-router-dom";
import { GroupCallErrorBoundaryContextProvider } from "./GroupCallErrorBoundaryContextProvider.tsx";
import { GroupCallErrorBoundary } from "./GroupCallErrorBoundary.tsx";
import { useGroupCallErrorBoundary } from "./useCallErrorBoundary.ts";
import { ConnectionLostError } from "../utils/errors.ts";
@@ -36,11 +35,9 @@ it("should show async error", async () => {
render(
<BrowserRouter>
<GroupCallErrorBoundaryContextProvider>
<GroupCallErrorBoundary widget={null} recoveryActionHandler={vi.fn()}>
<TestComponent />
</GroupCallErrorBoundary>
</GroupCallErrorBoundaryContextProvider>
<GroupCallErrorBoundary widget={null} recoveryActionHandler={vi.fn()}>
<TestComponent />
</GroupCallErrorBoundary>
</BrowserRouter>,
);

View File

@@ -5,44 +5,17 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/
import { useCallback, useContext, useEffect, useMemo, useState } from "react";
import { useMemo, useState } from "react";
import type { ElementCallError } from "../utils/errors.ts";
import { GroupCallErrorBoundaryContext } from "./GroupCallErrorBoundaryContext.tsx";
export type UseErrorBoundaryApi = {
showGroupCallErrorBoundary: (error: ElementCallError) => void;
};
export function useGroupCallErrorBoundary(): UseErrorBoundaryApi {
const context = useContext(GroupCallErrorBoundaryContext);
if (!context)
throw new Error(
"useGroupCallErrorBoundary must be used within an GoupCallErrorBoundary",
);
const [error, setError] = useState<ElementCallError | null>(null);
const resetErrorIfNeeded = useCallback(
(handled: ElementCallError): void => {
// There might be several useGroupCallErrorBoundary in the tree,
// so only clear our state if it's the one we're handling?
if (error && handled === error) {
// reset current state
setError(null);
}
},
[error],
);
useEffect(() => {
// return a function to unsubscribe
return context.subscribe((error: ElementCallError): void => {
resetErrorIfNeeded(error);
});
}, [resetErrorIfNeeded, context]);
const memoized: UseErrorBoundaryApi = useMemo(
() => ({
showGroupCallErrorBoundary: (error: ElementCallError) => setError(error),