diff --git a/src/plugins/unified_field_list/public/components/error_boundary/error_boundary.tsx b/src/plugins/unified_field_list/public/components/error_boundary/error_boundary.tsx new file mode 100644 index 0000000000000..3fe938b3cbdf5 --- /dev/null +++ b/src/plugins/unified_field_list/public/components/error_boundary/error_boundary.tsx @@ -0,0 +1,31 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React from 'react'; + +/** + * Renders nothing instead of a component which triggered an exception. + */ +export class ErrorBoundary extends React.Component<{}, { hasError: boolean }> { + constructor(props: {}) { + super(props); + this.state = { hasError: false }; + } + + static getDerivedStateFromError() { + return { hasError: true }; + } + + render() { + if (this.state.hasError) { + return null; + } + + return this.props.children; + } +} diff --git a/src/plugins/unified_field_list/public/components/error_boundary/index.tsx b/src/plugins/unified_field_list/public/components/error_boundary/index.tsx new file mode 100644 index 0000000000000..4e2cd318ddcf4 --- /dev/null +++ b/src/plugins/unified_field_list/public/components/error_boundary/index.tsx @@ -0,0 +1,9 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +export { ErrorBoundary } from './error_boundary'; diff --git a/src/plugins/unified_field_list/public/components/field_popover/field_popover.tsx b/src/plugins/unified_field_list/public/components/field_popover/field_popover.tsx index 59c6b9621f8c3..42806637b8cda 100644 --- a/src/plugins/unified_field_list/public/components/field_popover/field_popover.tsx +++ b/src/plugins/unified_field_list/public/components/field_popover/field_popover.tsx @@ -22,8 +22,24 @@ export const FieldPopover: React.FC = ({ renderContent, ...otherPopoverProps }) => { - const header = (isOpen && renderHeader?.()) || null; - const content = (isOpen && renderContent?.()) || null; + let header = null; + let content = null; + + if (isOpen) { + try { + header = renderHeader?.() || null; + } catch (error) { + // eslint-disable-next-line no-console + console.error(error); + } + + try { + content = renderContent?.() || null; + } catch (error) { + // eslint-disable-next-line no-console + console.error(error); + } + } return ( = (props) => { +const FieldPopoverFooterComponent: React.FC = (props) => { const [visualizeButton, setVisualizeButton] = useState(null); const [categorizeButton, setCategorizeButton] = useState(null); useEffect(() => { - getFieldVisualizeButton(props).then(setVisualizeButton); - getFieldCategorizeButton(props).then(setCategorizeButton); + getFieldVisualizeButton(props) + .then(setVisualizeButton) + .catch((error) => { + // eslint-disable-next-line no-console + console.error(error); + }); + getFieldCategorizeButton(props) + .then(setCategorizeButton) + .catch((error) => { + // eslint-disable-next-line no-console + console.error(error); + }); }, [props]); return visualizeButton || categorizeButton ? ( @@ -30,3 +41,11 @@ export const FieldPopoverFooter: React.FC = (props) => ) : null; }; + +export const FieldPopoverFooter: React.FC = (props) => { + return ( + + + + ); +}; diff --git a/src/plugins/unified_field_list/public/components/field_stats/field_stats.tsx b/src/plugins/unified_field_list/public/components/field_stats/field_stats.tsx index ae5857c4feafa..028ceddc080c9 100755 --- a/src/plugins/unified_field_list/public/components/field_stats/field_stats.tsx +++ b/src/plugins/unified_field_list/public/components/field_stats/field_stats.tsx @@ -47,6 +47,7 @@ import { getDefaultColor, } from './field_top_values'; import { FieldSummaryMessage } from './field_summary_message'; +import { ErrorBoundary } from '../error_boundary'; export interface FieldStatsState { isLoading: boolean; @@ -540,25 +541,6 @@ const FieldStatsComponent: React.FC = ({ return null; }; -class ErrorBoundary extends React.Component<{}, { hasError: boolean }> { - constructor(props: FieldStatsProps) { - super(props); - this.state = { hasError: false }; - } - - static getDerivedStateFromError() { - return { hasError: true }; - } - - render() { - if (this.state.hasError) { - return null; - } - - return this.props.children; - } -} - /** * Component which fetches and renders stats for a data view field * @param props