Skip to content

[BUG] Error Boundary Component Restricts Children to ReactElement When It Should Accept ReactNode #155

@timagixe

Description

@timagixe

Description/Screenshot
The IAppInsightsErrorBoundaryProps interface in the AppInsightsErrorBoundary component defines children as React.ReactElement, which is too restrictive. This prevents using the component with fragments, arrays, or primitive values. The component should follow React's pattern for container components and use React.ReactNode instead.

Steps to Reproduce

  1. Attempt to wrap multiple elements or a fragment in the AppInsightsErrorBoundary
  2. Observe TypeScript errors when not providing a single ReactElement
// This will cause TypeScript errors
<AppInsightsErrorBoundary
  onError={() => <h1>Something went wrong</h1>}
  appInsights={reactPlugin}
>
  <h1>Title</h1>
  <p>Content</p>
</AppInsightsErrorBoundary>

// Or this
export function ErrorBoundary({ children }: React.PropsWithChildren) {
  return (
    <AppInsightsErrorBoundary
      onError={() => <h1>I believe something went wrong</h1>}
      appInsights={reactPlugin}
    >
      {children}
    </AppInsightsErrorBoundary>
  );
}

OS/Browser:
All environments (TypeScript type issue)

React Version:
React 16.8+ (Hooks support)

SDK Version:

    "@microsoft/applicationinsights-react-js": "^18.3.6",
    "@microsoft/applicationinsights-web": "^3.3.6",

How you initialized the SDK:
Standard initialization with the ReactPlugin from Application Insights

Repository: https://github.com/timagixe/app-insights-reproduction
Initialization: https://github.com/timagixe/app-insights-reproduction/blob/main/src/application-insights/index.tsx

Expected behavior
The AppInsightsErrorBoundary should accept any valid React children, including fragments, arrays of elements, strings, etc. – anything that's a valid React.ReactNode.

Additional context
This appears to be a simple type definition issue.

The proper interface should be:

export interface IAppInsightsErrorBoundaryProps {
    appInsights: ReactPlugin;
    onError: React.ComponentType<any>;
    children: React.ReactNode;  // Changed from ReactElement to ReactNode
}

Metadata

Metadata

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions