Some error messages not bubbling through

[MaxRobertsDear]

Summary

Problem

Errors not logging to the console, making debugging and developing difficult.

Context

Added react-relay to my project.

Invoked useLazyLoadQuery() in landing screen.

Could see data was coming through by logging to the console, however nothing rendered to the screen.

It wasn't until I rendered the HomeScreen component directly in the project's entry file (bypassing expo-router) that the error was logged to my console:

Error: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.

Which is easily addressed by wrapping the HomeScreen in <React.Suspense />.

Concern

Concerned about scaling the project with expo-router if certain errors are not bubbling through. Completely open to the thought that this could be a user error and that there's an obvious config I've messed up.

Minimal reproducible example

app/(app)/index.tsx

export default function Home() {
  return <HomeScreen />;
}

HomeScreen component (declared separately, outside of app directoryso thatappdirectory not populated with relay-compiler'sgenerated` files and subsequently creating routes)

const HomeQuery = graphql`
  query HomeQuery {
    transactions {
      id
      ...TransactionFragment
    }
  }
`;

export default function HomeScreen() {
  const data = useLazyLoadQuery(HomeQuery, {});
  const transactions = data.transactions;
  return (
    <ScrollView
      contentContainerStyle={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      {transactions.map((transaction) => (
        <Transaction key={transaction.id} transaction={transaction} />
      ))}
    </ScrollView>
  );
}

index.tsx Copied and pasted all the contents of "expo-router/entry" to wrap <ExpoRoot /> with <RelayEnvironment>