@build0.ai/error-propagation

v1.3.0

Published

6 months ago

Comprehensive error handling and propagation for Build0 React apps

0High
0Medium
0Low

phil_build0

react error-boundary iframe nextjs hydration error-handling typescript monitoring network-errors uncaught-errors

error-propagation

A comprehensive React component for error handling and propagation in iframe environments, with Next.js hydration warning suppression and network monitoring.

Features

🚫 Suppress hydration warnings - Cleanly suppress Next.js hydration mismatches
🌐 Network monitoring - Catch fetch and XMLHttpRequest failures
⚛️ React error boundaries - Handle component rendering errors
🎯 Global error catching - Capture uncaught errors and unhandled rejections
📡 Parent communication - Bubble all errors to iframe parent via postMessage
📘 Full TypeScript support - Complete type definitions included
⚡ Zero configuration - Works out of the box with sensible defaults

Installation

npm install error-propagation
# or
yarn add error-propagation
# or
pnpm add error-propagation

Quick Start

Next.js App Router (app/layout.tsx)

import ErrorPropagation from 'error-propagation';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <ErrorPropagation>
          {children}
        </ErrorPropagation>
      </body>
    </html>
  );
}

Next.js Pages Router (pages/_app.tsx)

import type { AppProps } from 'next/app';
import ErrorPropagation from 'error-propagation';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <ErrorPropagation>
      <Component {...pageProps} />
    </ErrorPropagation>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | forwardConsole | boolean \| string[] | ["error", "warn"] | Forward console messages (specify levels or true for all) | | forwardNavigation | boolean | true | Monitor navigation events | | forwardFocus | boolean | true | Monitor focus and visibility changes | | forwardConnectivity | boolean | true | Monitor online/offline status | | forwardResourceErrors | boolean | true | Monitor resource loading errors | | forwardNetworkErrors | boolean | true | Monitor fetch and XMLHttpRequest errors | | suppressHydrationWarnings | boolean | true | Suppress Next.js hydration warnings | | fallbackComponent | ReactNode | null | Component to show when React errors occur | | targetOrigin | string | '*' | Origin for postMessage (use specific origin for security) | | onEvent | (event: ForwardedEventData) => void | undefined | Custom event handler |

Error Types

The component handles and reports these event types:

hydration - Next.js hydration mismatches
console - Console messages (log, warn, error, info, debug)
network_error - Failed network requests (fetch and XMLHttpRequest)
react_error - React component errors
uncaught_error - Global JavaScript errors
unhandled_rejection - Unhandled promise rejections
resource_error - Failed resource loads (images, scripts, etc.)
navigation - Page navigation events
focus - Focus and visibility changes
connectivity - Online/offline status changes
custom - Custom events

Parent Window Integration

Listen for errors in your parent application:

window.addEventListener('message', (event) => {
  if (event.data.type === 'iframe-event') {
    const { source, event: eventData } = event.data;
    
    console.log('Event from iframe:', eventData);
    
    // Handle different event types
    switch (eventData.type) {
      case 'network_error':
        console.log('Network error:', eventData.url, eventData.status);
        break;
      case 'react_error':
        console.log('React error:', eventData.message);
        break;
      case 'console':
        console.log('Console message:', eventData.level, eventData.message);
        break;
      // ... other cases
    }
  }
});

Advanced Usage

import ErrorPropagation, { EVENT_TYPES, ForwardedEventData } from 'error-propagation';

const customEventHandler = (event: ForwardedEventData) => {
  // Send to your error reporting service
  if (event.type !== EVENT_TYPES.HYDRATION) {
    analyticsService.reportEvent(event);
  }
  
  // Handle network errors specifically
  if (event.type === EVENT_TYPES.NETWORK_ERROR) {
    console.log('Network error detected:', event.url, event.status);
  }
};

export default function App() {
  return (
    <ErrorPropagation
      forwardConsole={["error", "warn"]}
      forwardNetworkErrors={true}
      forwardNavigation={false}
      suppressHydrationWarnings={true}
      targetOrigin="https://your-parent-domain.com"
      onEvent={customEventHandler}
      fallbackComponent={
        <div>Something went wrong. Please refresh the page.</div>
      }
    >
      <YourApp />
    </ErrorPropagation>
  );
}

License

MIT

LICENSE file

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.