Blame · ErrorNotice.tsx

b69ab31	1	/**
b69ab31	2	* Copyright (c) Meta Platforms, Inc. and affiliates.
b69ab31	3	*
b69ab31	4	* This source code is licensed under the MIT license found in the
b69ab31	5	* LICENSE file in the root directory of this source tree.
b69ab31	6	*/
b69ab31	7
b69ab31	8	import type {ReactNode} from 'react';
b69ab31	9
b69ab31	10	import React, {Component, useState} from 'react';
b69ab31	11	import {Icon} from './Icon';
b69ab31	12	import type {Placement} from './Tooltip';
b69ab31	13	import {Tooltip} from './Tooltip';
b69ab31	14
b69ab31	15	import './error-notice.css';
b69ab31	16
b69ab31	17	export function ErrorNotice({
b69ab31	18	title,
b69ab31	19	description,
b69ab31	20	details,
b69ab31	21	error,
b69ab31	22	buttons,
b69ab31	23	startExpanded,
b69ab31	24	}: {
b69ab31	25	title: React.ReactNode;
b69ab31	26	description?: React.ReactNode;
b69ab31	27	/** Hidden details shown when expanded */
b69ab31	28	details?: React.ReactNode;
b69ab31	29	error?: Error;
b69ab31	30	buttons?: Array<React.ReactNode>;
b69ab31	31	startExpanded?: boolean;
b69ab31	32	}) {
b69ab31	33	const [isExpanded, setIsExpanded] = useState(startExpanded === true);
b69ab31	34	return (
b69ab31	35	<div className="error-notice" onClick={() => setIsExpanded(e => !e)}>
b69ab31	36	<div className="error-notice-left">
b69ab31	37	<div className="error-notice-arrow">
b69ab31	38	<Icon icon={isExpanded ? 'triangle-down' : 'triangle-right'} />
b69ab31	39	</div>
b69ab31	40	<div className="error-notice-content">
b69ab31	41	<span className="error-notice-title">{title}</span>
b69ab31	42	<span className="error-notice-byline">{description ?? error?.message}</span>
b69ab31	43	{isExpanded ? (
b69ab31	44	<div
b69ab31	45	className="error-notice-details"
b69ab31	46	onClick={e => {
b69ab31	47	// don't close the notice when clicking/text selecting the details
b69ab31	48	e.stopPropagation();
b69ab31	49	}}>
b69ab31	50	{details}
b69ab31	51	{error != null && (
b69ab31	52	<span className="error-notice-stack-trace">{error.stack ?? error.message}</span>
b69ab31	53	)}
b69ab31	54	</div>
b69ab31	55	) : null}
b69ab31	56	</div>
b69ab31	57	</div>
b69ab31	58	{buttons ? <div className="error-notice-buttons">{buttons}</div> : null}
b69ab31	59	</div>
b69ab31	60	);
b69ab31	61	}
b69ab31	62
b69ab31	63	type Props = {
b69ab31	64	children: React.ReactNode;
b69ab31	65	};
b69ab31	66
b69ab31	67	type State = {error: Error \| null};
b69ab31	68
b69ab31	69	export class ErrorBoundary extends Component<Props, State> {
b69ab31	70	constructor(props: Props) {
b69ab31	71	super(props);
b69ab31	72	this.state = {error: null};
b69ab31	73	}
b69ab31	74
b69ab31	75	static getDerivedStateFromError(error: Error) {
b69ab31	76	return {error};
b69ab31	77	}
b69ab31	78
b69ab31	79	render() {
b69ab31	80	if (this.state.error != null) {
b69ab31	81	return <ErrorNotice title="Something went wrong" error={this.state.error} />;
b69ab31	82	}
b69ab31	83
b69ab31	84	return this.props.children;
b69ab31	85	}
b69ab31	86	}
b69ab31	87
b69ab31	88	/**
b69ab31	89	* One-line error message, which shows the full ErrorNotice in a tooltip on hover.
b69ab31	90	*/
b69ab31	91	export function InlineErrorBadge({
b69ab31	92	children,
b69ab31	93	error,
b69ab31	94	title,
b69ab31	95	placement,
b69ab31	96	}: {
b69ab31	97	children: ReactNode;
b69ab31	98	error: Error;
b69ab31	99	title?: ReactNode;
b69ab31	100	placement?: Placement;
b69ab31	101	}) {
b69ab31	102	return (
b69ab31	103	<div className="inline-error-badge">
b69ab31	104	<Tooltip component={TooltipErrorDetails(error, title)} placement={placement}>
b69ab31	105	<Icon icon="error" slot="start" />
b69ab31	106	<span>{children}</span>
b69ab31	107	</Tooltip>
b69ab31	108	</div>
b69ab31	109	);
b69ab31	110	}
b69ab31	111
b69ab31	112	function TooltipErrorDetails(error: Error, title?: ReactNode) {
b69ab31	113	return function Component() {
b69ab31	114	return (
b69ab31	115	<div className="inline-error-tooltip">
b69ab31	116	<ErrorNotice title={title ?? error.message} error={error} startExpanded />
b69ab31	117	</div>
b69ab31	118	);
b69ab31	119	};
b69ab31	120	}