Skip to main content

StyleErrorBoundary

Location: src/components/StyleErrorBoundary.jsx

Overview​

A React error boundary that catches rendering errors caused by token-based styling (corrupt tokens, bad computed values, etc.) and silently falls back to default/unstyled rendering. Unlike the global ErrorBoundary, this does NOT show an error page — the feed and HomeRoom continue working with the affected item rendered without custom tokens.

Props​

PropTypeRequiredDefaultDescription
childrenReactNodeYes--The token-styled rendering to protect
fallbackReactNodeNochildrenWhat to render when an error occurs. Typically the same content without token styling.

Usage​

import StyleErrorBoundary from './StyleErrorBoundary';

// In Post.jsx — wraps the token-styled wrapper
if (hasTokenStyle) {
  return (
    <StyleErrorBoundary fallback={articleEl}>
      <div style={tokenOuterStyle} className="post-token-wrapper">
        {articleEl}
      </div>
    </StyleErrorBoundary>
  );
}

// In HomeRoom.jsx — wraps token-styled module cards
<StyleErrorBoundary fallback={defaultRendering}>
  <section className={`module-${module.module_type}`}>
    {/* token-styled card */}
  </section>
</StyleErrorBoundary>

How It Works​

  1. Wraps token-styled rendering in an error boundary
  2. If any child throws during render (e.g. colors.pri is undefined, clipPaths computation fails):
    • Logs the error to console via componentDidCatch
    • Returns fallback prop (the unstyled version) or children if no fallback provided
  3. The parent feed/room continues rendering normally — only the affected post/module loses its custom style

Where It's Used​

  • Post.jsx — Wraps post-token-wrapper div (the clip-path border wrapper for styled posts)
  • HomeRoom.jsx — Wraps token-styled module cards in HomeRoomModule
  • ErrorBoundary (src/components/ErrorBoundary.jsx) — Global error boundary that shows a reload page
  • validateTokens (src/contexts/StyleContext.jsx) — Pre-rendering validation that prevents most errors
  • computeStyle (src/contexts/StyleContext.jsx) — Try/catch wrapper that returns defaults on computation failure

Last updated: 2026-02-08