fix(base): add missing DialogErrorBoundary component
Required by App.web.tsx for error boundary wrapping of dialogs. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
8dc9c74c45
commit
2314d7d3f4
|
|
@ -0,0 +1,88 @@
|
|||
import { Component, ErrorInfo, ReactNode } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { IStore } from '../../../../app/types';
|
||||
import logger from '../../../app/logger';
|
||||
import { hideDialog } from '../../../dialog/actions';
|
||||
|
||||
interface IProps {
|
||||
|
||||
/**
|
||||
* The child components.
|
||||
*/
|
||||
children: ReactNode;
|
||||
|
||||
/**
|
||||
* Redux dispatch function (injected by connect).
|
||||
*/
|
||||
dispatch: IStore['dispatch'];
|
||||
}
|
||||
|
||||
interface IState {
|
||||
|
||||
/**
|
||||
* Whether a rendering error has been caught.
|
||||
*/
|
||||
hasError: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Error boundary that wraps DialogContainer to prevent dialog rendering
|
||||
* errors from crashing the entire application. Without this, an error in
|
||||
* any dialog (e.g., Settings) would unmount the Conference component, which
|
||||
* calls hangup() and disconnects the user from the meeting.
|
||||
*/
|
||||
class DialogErrorBoundary extends Component<IProps, IState> {
|
||||
|
||||
/**
|
||||
* Initializes a new DialogErrorBoundary instance.
|
||||
*
|
||||
* @param {IProps} props - Component props.
|
||||
*/
|
||||
constructor(props: IProps) {
|
||||
super(props);
|
||||
this.state = { hasError: false };
|
||||
}
|
||||
|
||||
/**
|
||||
* React lifecycle method to derive state from an error.
|
||||
*
|
||||
* @param {Error} _error - The error that was thrown.
|
||||
* @returns {IState} New state.
|
||||
*/
|
||||
static getDerivedStateFromError(_error: Error): IState {
|
||||
return { hasError: true };
|
||||
}
|
||||
|
||||
/**
|
||||
* Logs the error and attempts to close the broken dialog.
|
||||
*
|
||||
* @param {Error} error - The error that was thrown.
|
||||
* @param {ErrorInfo} info - React error info with component stack.
|
||||
* @returns {void}
|
||||
*/
|
||||
override componentDidCatch(error: Error, info: ErrorInfo) {
|
||||
logger.error('Dialog rendering error caught by boundary', error, info);
|
||||
|
||||
// Close the broken dialog so user can continue using the app
|
||||
this.props.dispatch(hideDialog('ErrorBoundary'));
|
||||
|
||||
// Reset error state so the next dialog can render
|
||||
this.setState({ hasError: false });
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders children or nothing if there was an error.
|
||||
*
|
||||
* @returns {ReactNode}
|
||||
*/
|
||||
override render() {
|
||||
if (this.state.hasError) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
|
||||
export default connect()(DialogErrorBoundary);
|
||||
Loading…
Reference in New Issue