Skip to content

Many errors in console even using Error Boundary #22671

@BiancaArtola

Description

@BiancaArtola

React version: 17.0.2
Relay version: 12.0.0

Steps To Reproduce

  1. Wrap a component with an ErrorBoundary class to manage errors. Something like this:
  <ErrorBoundary FallbackComponent={ErrorFallback}>
          <Suspense
            fallback={
              <LoaderContainer>
                <LoaderIcon iconSize="xl" />
              </LoaderContainer>
            }
          >
            <DetailedStatusContainer />
          </Suspense>
        </ErrorBoundary>

On Detailed Status Container I have this:

 const data =
    useLazyLoadQuery(
      RobotProductOverviewBySerialNumberQuery,
      serialNumber
    );

  1. If I sent an invalid value to the query, the ErrorBoundary will be executed because the query returns 500. That's expected, but check that the console has the following errors:
    image

Is there a way to avoid the last two errors on the console?

The current behavior

Console messages:
image

The expected behavior

Only shows 500 error message:
image

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions