-
Notifications
You must be signed in to change notification settings - Fork 15
Description
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
- Attempt to wrap multiple elements or a fragment in the AppInsightsErrorBoundary
- 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
}