CaughtErrorView() — react Function Reference

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

Function javascript CompilerCore Gating

Entity Profile

CompilerCore→ Gating→ CaughtErrorView() — react Function Reference

Dependency Diagram

graph TD
  5c505121_9d4f_133b_1600_756a0832b42d["CaughtErrorView()"]
  60df94aa_3aa5_942e_c88c_b9109adc4cf2["CaughtErrorView.js"]
  5c505121_9d4f_133b_1600_756a0832b42d -->|defined in| 60df94aa_3aa5_942e_c88c_b9109adc4cf2
  style 5c505121_9d4f_133b_1600_756a0832b42d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/ErrorBoundary/CaughtErrorView.js lines 21–44

export default function CaughtErrorView({
  callStack,
  children,
  info,
  componentStack,
  errorMessage,
}: Props): React.Node {
  return (
    <div className={styles.ErrorBoundary}>
      {children}
      <div className={styles.ErrorInfo}>
        <div className={styles.HeaderRow}>
          <div className={styles.ErrorHeader}>{errorMessage}</div>
        </div>
        {!!info && <div className={styles.InfoBox}>{info}</div>}
        {!!callStack && (
          <div className={styles.ErrorStack}>
            The error was thrown {callStack.trim()}
          </div>
        )}
      </div>
    </div>
  );
}