[BUG] Error type in AppInsightsErrorBoundary after upgrading to react 18 about applicationinsights-react-js HOT 15 CLOSED

I am also having this issue on React 17 (React 17.0.2, @types/react 17.0.43, @types/react-dom 17.0.14) since I upgraded @microsoft/applicationinsights-react-js to 3.3.3 from 3.3.1.

from applicationinsights-react-js.

@Karlie-777 can you please investigate @pthalamy issue with v3.3.3

from applicationinsights-react-js.

Hi @Karlie-777

My bad, I was referring to this issue: #7.

to reproduce the issue:

1. install latest react version
2. install latest @microsoft/applicationinsights-react-j (3.3.4)

from applicationinsights-react-js.

FYI - New React repo is now live and we are planning an initial unpinning from v2.8.5 of ApplicationInsights release tomorrow (no other changes are included for this initial repo release)

from applicationinsights-react-js.

Also affected by this. Please prioritize as this prevents upgrading to React 18, or at least using AppInsights in React 18 apps.

from applicationinsights-react-js.

Yep, we also cannot perform upgrade to React 18 due to this peer dependency.

from applicationinsights-react-js.

microsoft/ApplicationInsights-JS#1820

from applicationinsights-react-js.

Reopening for tracking

from applicationinsights-react-js.

Any update / solution for this issue? I currently facing same issue after upgrade to React 18.1.0

from applicationinsights-react-js.

@cloudstr21 do you mind sharing more details? We added children component in 2.8.3 release and the following code seems working for me with latest plugin version

<AppInsightsErrorBoundary  appInsights={reactPlugin} onError= {()=> {return <h1>Error Element</h1>}}>
    <></>
</AppInsightsErrorBoundary>

from applicationinsights-react-js.

@Karlie-777 Here is my code and the associated error:

import { AppInsightsErrorBoundary } from "@microsoft/applicationinsights-react-js";
import * as React from "react";

import { fooInsightsReactPlugin } from "@shared/Telemetry/fooInsights";

import { ErrorPage } from "./ErrorPage";
import { ErrorPageAction } from "./errorPageActionTypes";

export const FooErrorBoundary: React.FC = (props) => {
    return (
        <AppInsightsErrorBoundary
            onError={() => <ErrorPage action={ErrorPageAction.ReloadPage} />}
            appInsights={fooInsightsReactPlugin}
        >
            {props.children}
        </AppInsightsErrorBoundary>
    );
};

And the error on {props.children}, which I have to ts-ignore since the @microsoft/applicationinsights-react-js 3.3.3 update:

No overload matches this call.
  Overload 1 of 2, '(props: IAppInsightsErrorBoundaryProps | Readonly<IAppInsightsErrorBoundaryProps>): AppInsightsErrorBoundary', gave the following error.
    Type 'ReactNode' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>> & ReactNode'.
      Type 'undefined' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>> & ReactNode'.
  Overload 2 of 2, '(props: IAppInsightsErrorBoundaryProps, context: any): AppInsightsErrorBoundary', gave the following error.
    Type 'ReactNode' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>> & ReactNode'.

from applicationinsights-react-js.

For errors in React.FC, please refer facebook/create-react-app#8177
And to solve this issue, adding fragment should help:

export const FooErrorBoundary: React.FC = (props) => {
    return (
        <AppInsightsErrorBoundary
            onError={() => <ErrorPage action={ErrorPageAction.ReloadPage} />}
            appInsights={fooInsightsReactPlugin}
        >
             <>
            {props.children}
            </>
        </AppInsightsErrorBoundary>
    );
};

from applicationinsights-react-js.

@Karlie-777 Indeed this is what's changed, adding the React fragment solved the issue. Didn't think of trying this.

from applicationinsights-react-js.

#15

from applicationinsights-react-js.

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

from applicationinsights-react-js.