ErrorView() — react Function Reference

Architecture documentation for the ErrorView() function in ErrorView.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ ErrorView() — react Function Reference

Dependency Diagram

graph TD
  48e8464a_e8aa_6682_4b13_3ea0de397660["ErrorView()"]
  864e88ce_9228_f8c8_00ad_8f01ef7f49f9["ErrorView.js"]
  48e8464a_e8aa_6682_4b13_3ea0de397660 -->|defined in| 864e88ce_9228_f8c8_00ad_8f01ef7f49f9
  style 48e8464a_e8aa_6682_4b13_3ea0de397660 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js lines 23–58

export default function ErrorView({
  callStack,
  children,
  componentStack,
  dismissError = null,
  errorMessage,
}: Props): React.Node {
  return (
    <div className={styles.ErrorBoundary}>
      {children}
      <div className={styles.ErrorInfo}>
        <div className={styles.HeaderRow}>
          <div className={styles.ErrorHeader}>
            Uncaught Error: {errorMessage || ''}
          </div>
          {dismissError !== null && (
            <Button className={styles.CloseButton} onClick={dismissError}>
              Dismiss
              <ButtonIcon className={styles.CloseButtonIcon} type="close" />
            </Button>
          )}
        </div>
        {!!callStack && (
          <div className={styles.ErrorStack}>
            The error was thrown {callStack.trim()}
          </div>
        )}
        {!!componentStack && (
          <div className={styles.ErrorStack}>
            The error occurred {componentStack.trim()}
          </div>
        )}
      </div>
    </div>
  );
}