Files
pezkuwi-apps/packages/react-components/src/ErrorBoundary.tsx
T
Satoshi Qazi Muhammed 45d479d2ec Move to @pezkuwi/dev 0.86.4 (eslint 10 toolchain)
- dev ^0.86.4 at the root and in packages/apps; directives renamed by
  pezkuwi-dev-migrate-eslint10.
- eslint --fix with the 0.86.4 config; one fix broke syntax
  (typescript-eslint prefer-optional-chain turned
  `(isStarted && onStart) && onStart()` into `(isStarted && onStart?.();`
  in TxButton) and is corrected by hand.
- The remaining findings fixed rather than disabled: optional chains
  (each suggestion reviewed), `cause` on rethrown errors, `if` instead of
  `a && promise` in effects, parallel instead of sequential awaits in
  Promise.all, Error rejections, no `delete` on arrays (the storage query
  cache is a Map; an upload's file list no longer keeps a hole), no
  `[object Object]` stringification (TFunction's second argument is text
  or options), dead code removed (referenda's never-shown expand button,
  react-query's unused CoreDescriptor).
2026-10-10 02:06:12 +04:00

75 lines
2.0 KiB
TypeScript

// Copyright 2017-2026 @pezkuwi/react-components authors & contributors
// SPDX-License-Identifier: Apache-2.0
import type { I18nProps } from './types.js';
import React from 'react';
import translate from './translate.js';
interface Props extends I18nProps {
children: React.ReactNode;
doThrow?: boolean;
error?: Error | null;
onError?: () => void;
trigger?: unknown;
}
interface State {
error: Error | null;
prevTrigger: string | null;
}
function formatStack (stack = '<unknown>'): React.ReactElement | null {
return (
<>{stack.split('\n').map((line, index) =>
<div key={index}>{line}</div>
)}</>
);
}
// NOTE: This is the only way to do an error boundary, via extend
class ErrorBoundary extends React.Component<Props> {
public override state: State = { error: null, prevTrigger: null };
static getDerivedStateFromError (error: Error): Partial<State> {
return { error };
}
static getDerivedStateFromProps ({ trigger }: Props, { prevTrigger }: State): State | null {
const newTrigger = JSON.stringify({ trigger });
return (prevTrigger !== newTrigger)
? { error: null, prevTrigger: newTrigger }
: null;
}
public override componentDidCatch (error: Error): void {
const { doThrow, onError } = this.props;
onError?.();
if (doThrow) {
throw error;
}
}
public override render (): React.ReactNode {
const { children, error: errorProps, t } = this.props;
const { error } = this.state;
const displayError = errorProps || error;
return displayError
? (
<article className='error extraMargin'>
<p>{t('Uncaught error. Something went wrong with the query and rendering of this component. Please supply all the details below when logging an issue, it may help in tracing the cause.')}</p>
<p>{displayError.message}</p>
{formatStack(displayError.stack)}
</article>
)
: children;
}
}
export default translate<Props>(ErrorBoundary);