Package Exports

@build0.ai/error-propagation
@build0.ai/error-propagation/dist/index.esm.js
@build0.ai/error-propagation/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@build0.ai/error-propagation) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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
`suppressHydrationWarnings`	`boolean`	`true`	Suppress Next.js hydration warnings
`enableNetworkMonitoring`	`boolean`	`true`	Monitor fetch and XHR requests
`fallbackComponent`	`ReactNode`	`null`	Component to show when React errors occur
`targetOrigin`	`string`	`'*'`	Origin for postMessage (use specific origin for security)
`onError`	`(error: ErrorData) => void`	`undefined`	Custom error handler

Error Types

The component handles and reports these error types:

hydration - Next.js hydration mismatches
network - Failed network requests
react_error - React component errors
uncaught_error - Global JavaScript errors
unhandled_rejection - Unhandled promise rejections

Parent Window Integration

Listen for errors in your parent application:

window.addEventListener('message', (event) => {
  if (event.data.type === 'iframe-error') {
    const { source, error } = event.data;
    
    console.log('Error from iframe:', error);
    
    // Handle different error types
    switch (error.type) {
      case 'network':
        // Handle network errors
        break;
      case 'react_error':
        // Handle React errors
        break;
      // ... other cases
    }
  }
});

Advanced Usage

import ErrorPropagation, { ERROR_TYPES, ErrorData } from 'error-propagation';

const customErrorHandler = (error: ErrorData) => {
  // Send to your error reporting service
  if (error.type !== ERROR_TYPES.HYDRATION) {
    analyticsService.reportError(error);
  }
};

export default function App() {
  return (
    <ErrorPropagation
      suppressHydrationWarnings={true}
      enableNetworkMonitoring={true}
      targetOrigin="https://your-parent-domain.com"
      onError={customErrorHandler}
      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.