feat: add error boundaries and suspense usage with TRPC

[austinwoon]

Problem

Problem 1

Our current method of fetching data for pages with query params utilize getServerSideProps. We noticed a trend of slow initial load times for these pages as long as ~7s. This is likely (but not confirmed) attributed to Chakra's huge bundle size which slows down the time needed to build the server rendered page.

Solutions considered to root problem

We had two options

• Attempt to fix getServerSideProps's bundle issues with Chakra - possibly looking into how we can treeshake chakra for server rendered pages to reduce build times
• Introduce CSR patterns in our application

We went with option 2 as that was already in the existing roadmap.

Problem 2

Existing CSR patterns with page based routing was cumbersome as we could not use React 18's Suspense and the default ErrorBoundary from react-error-boundary.

This led to 2 dx issues:

• In every component where we use query, we had to track isLoading and isError states and render the fallback components accordingly
• There was a lack of a top level ErrorBoundary which would catch any errors thrown within child components which useSuspenseQuery

Solution

• The inability to use React's Suspense component was due to the fact that any child component which calls the useRouter hook erroring out during server side rendering as the router had not mounted. T
  • To mitigate this, we created our own Suspense wrapper that keeps track of a isMounted state.
    • If the router is ready, we will render React's Suspense with the children
    • If router is not ready, fallbackComponent will render.
• Created our own ErrorBoundary wrapper which catches error boundary states to render the correct fallback components

Improvements:

• Refactored all queries to utilise useSuspenseQuery
• Updated logic to handle redirects between sign-in and dashboard
• Updated centralised logic for unauthorised errors redirecting to sign-in. This logic for this is now located in the ErrorBoundary component whenever a TRPCError has a code of UNAUTHORIZED

Tests

• Navigating to dashboard without logging in succesfully redirects me to sign-in
• Navigating to sign-in whilst authed redirects me to either callbackUrl or dashboard
• ErrorBoundary fallback component renders on different TRPCError codes
• Suspense fallback renders when data is suspending

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
starter-kit	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 22, 2023 5:56am

[austinwoon]

@karrui @dvrylc check out this statement for the root level ErrorBoundary and lmk what you think. We can walk through tomorrow if docs arent clear.

[karrui]

e2e tests failing, but fixed in #94. Can rebase/merge develop in first?

[austinwoon]

e2e tests failing, but fixed in #94. Can rebase/merge develop in first?

done

[karrui]

lgtm