Skip to content
Twilight React Playground
ثيم رائدaren

ComponentErrorBoundary

classAdvancedserverbrowserlive demo

Catches an error thrown while a home block renders, logs it, and shows nothing in production so the rest of the page survives.

import { ComponentErrorBoundary } from '@salla.sa/twilight-theme-engine/components/home';

In plain words

Normally, when one component crashes while drawing, React removes the whole page. An error boundary is a component that stops that at its edge: whatever is inside it can crash, and only that part disappears.

HomeComponentRenderer already puts every home block inside this one. Use it yourself only where you render blocks without the renderer.

Signature

class ComponentErrorBoundary extends React.Component<{
  children: ReactNode;
  data: HomeComponentData;   // used for the log and the development card
  position: number;
}> {}

Try it live

Two home blocks, each in its own ComponentErrorBoundary. Break the first one and the second keeps rendering.Try this: tick broken. A development build shows a red card with the message; a production build shows nothing. Both log a collapsed group to the console.
Storefront canvas · en · LTR

Banner block

Features block

Controls
brokenThe banner block throws while rendering.
What a theme writes
import { ComponentErrorBoundary } from '@salla.sa/twilight-theme-engine/components/home';
import type { HomeComponentData } from '@salla.sa/twilight-theme-engine/types';
import { Banner } from './Banner';

// Only needed where you render blocks yourself: HomeComponentRenderer already wraps each one.
export function SafeBanner({ block, position }: { block: HomeComponentData; position: number }) {
  return (
    <ComponentErrorBoundary data={block} position={position}>
      <Banner data={block} />
    </ComponentErrorBoundary>
  );
}

Example

app/components/home/SafeBlock.tsx
import { ComponentErrorBoundary } from '@salla.sa/twilight-theme-engine/components/home';
import type { HomeComponentData } from '@salla.sa/twilight-theme-engine/types';
import { Brands } from './Brands';

export function SafeBrands({ block }: { block: HomeComponentData }) {
  return (
    <ComponentErrorBoundary data={block} position={1}>
      <Brands data={block} />
    </ComponentErrorBoundary>
  );
}

How it behaves

  • In a development build (NODE_ENV not production) it shows a red card with the path, the message, the stack and the block data. In production it renders null.

  • It logs a collapsed group through useTwilight().log (component, position, URL, time, both stacks, data). It reads the Twilight context with static contextType; outside TwilightProvider it only logs that it must be used inside it.

Gotchas

  • Like every React error boundary, it catches errors thrown while rendering, not in event handlers or in promises your effects start.

  • Error boundaries do not catch during the server render: there it only passes its children through. A block that throws there makes React fall back to the nearest <Suspense> (the renderer gives each visible block one) and render it again in the browser, where this boundary catches.

  • Once it has caught an error it keeps showing its fallback until it remounts. Give it a new key to try again.

Related

HomeComponentRenderer

Draws one home page block from its API data: finds its registered component, wraps it in an error boundary, and defers it until visible.

Source and docs