react#ErrorInfo TypeScript Examples

apiPostError = async (
	error: ErrorBoundaryError,
	info: ErrorInfo
): Promise<ErrorResponse> => {
	const url = config.endpoints.error;
	const bodyData: ErrorRequestBody = {
		request: {
			correlationId: uuidv4(),
			timestamp: new Date().toISOString()
		},
		serviceName: 'frontend',
		error,
		info
	};

	removeAllCookies();

	return fetchData({
		url: url,
		method: FETCH_METHODS.POST,
		bodyData: JSON.stringify(bodyData),
		skipAuth: true
	});
}

componentDidCatch(error: Error, { componentStack }: ErrorInfo) {
    // error and componentStack are what we need
    const { onError, MitoInstance } = this.props
    const reactError = extractErrorStack(error, Severity.Normal) as ReportDataType
    reactError.type = ErrorTypes.REACT
    onError?.(error, componentStack)
    // mito handler -> collected react render error
    const breadcrumbStack = MitoInstance?.breadcrumb.push({
      type: BaseBreadcrumbTypes.REACT,
      data: reactError,
      category: BREADCRUMBCATEGORYS.EXCEPTION,
      level: Severity.Error
    })
    MitoInstance?.transport.send(reactError, breadcrumbStack)
    this.setState({
      hasError: true
    })
  }

componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
    this.setState({
      error,
      errorInfo,
    })

    // eslint-disable-next-line react/destructuring-assignment
    this.context?.error?.(error)
  }

ErrorBoundary: ComponentClass<
  ErrorBoundaryProps,
  State
> = class ErrorBoundary extends Component<ErrorBoundaryProps, State> {
  constructor(props: ErrorBoundaryProps) {
    super(props);
    this.state = {
      error: undefined,
      errorInfo: undefined,
    };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    // eslint-disable-next-line no-console
    console.error(`ErrorBoundary, error: ${error}, info: ${errorInfo}`);
    this.setState({ error, errorInfo });
  }

  render() {
    const { slackChannel, children } = this.props;
    const { error } = this.state;

    if (!error) {
      return children;
    }

    return (
      <ErrorPanel title="Something Went Wrong" error={error}>
        <SlackLink slackChannel={slackChannel} />
      </ErrorPanel>
    );
  }
}

componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
    Sentry.withScope((scope) => {
      Object.keys(errorInfo).forEach((key) => {
        scope.setExtra(key, errorInfo[key]);
      });

      Sentry.captureException(error);
    });

    // This is needed to render errors correctly in development / production
    super.componentDidCatch(error, errorInfo);
  }

/*
    The componentDidCatch Lifecycle Method is used to record
    the error which occurred. The componentDidCatch is not
    a factor in the rendering of the fallback error UI. In fact,
    this method will run after the re-rendering of the component
    to display the fallback UI
    If a componentDidCatch method is defined but the 
    getDerivedStateFromError method is not defined then an error
    will appear in the console stating that the getDerivedStateFromError
    should be defined.
    Here is the execution order:
    ** Task 1: JavaScript **
    - Error Boundary Component: Render
    - Error Thrown in Child Component
    - Error Boundary Component: getDerivedStateFromError
    - Error Boundary Component: Render to display Fallback UI
    - Error Boundary Component: componentDidCatch
    ** Task 2: Browser UI **
    - Paint
  */
  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
    // Add side effects here.
    this.setState({
      error,
      errorInfo,
    });
  }

public componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
    console.error('Uncaught error:', error, errorInfo);
    this.setState({ hasError: true });
    const warning = `${error.name}: ${error.message}, ${errorInfo.componentStack?.split('\n')[1]}`;
    console.log(warning);
  }

public componentDidCatch(error: unknown, errorInfo: ErrorInfo) {
    console.error(error, errorInfo);
  }

componentDidCatch(error: Error, errorInfo: ErrorInfo) {
        console.error(error);
        this.processUnhandledError(error);
    }

componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error(error, errorInfo);
  }

componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
    // You can also log the error to an error reporting service
    console.error({ error, errorInfo }) // eslint-disable-line
  }

componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    // do nothing
  }

componentDidCatch(error: Error, errorInfo: ErrorInfo) {
        // logErrorToMyService(error, errorInfo);
    }

componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo)
  }

componentDidCatch(error: Error, errorInfo: ErrorInfo) {
		console.error('React Error: ', error, errorInfo);
	}

componentDidCatch = (error: Error, info: ErrorInfo): void => {
    console.error(error, info); // eslint-disable-line no-console
  };

componentDidCatch = (error: Error, info: ErrorInfo): void => {
    const { onError } = this.props;
    if (onError) onError();

    console.error(error, info); // eslint-disable-line no-console
  };

componentDidCatch(error: any, info: ErrorInfo) {
    void error;
    console.info(info);
  }

componentDidCatch(error: Error, info: ErrorInfo) {
    console.error('Catch component error: ', error, info);
  }