Files
pezkuwi-sdk-ui/packages/react-components/src/ErrorBoundary.tsx
T
pezkuwichain d949863789 Initial commit: Pezkuwi SDK UI
Comprehensive web interface for interacting with Pezkuwi blockchain.

Features:
- Blockchain explorer
- Wallet management
- Staking interface
- Governance participation
- Developer tools

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-19 13:55:36 +03: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 && 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);