TypeScript Academy · Lesson

Suspense & error boundaries types

Use React.Suspense with lazy components and type robust Error Boundaries (class-based). Handle unknown errors safely and provide reset patterns.

Lesson 2 of 28 steps

Suspense & error boundaries types is a free TypeScript Academy lesson on CoddyKit. This is lesson 2 of 2. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the TypeScript Academy learning path, and your progress syncs across the web and the CoddyKit app. The TypeScript Academy course includes 2 lessons in total.

Intro

Goal: Lazy-load components with React.lazy + Suspense, and add a typed Error Boundary that shows a friendly fallback and logs details.

Suspense = loading UI
Error Boundary = runtime error UI
Type unknown errors safely

Lazy + Suspense

React.lazy returns a component type. Wrap it in Suspense to render a fallback while its module is loading.

import React, { Suspense } from "react"

const LazyWidget = React.lazy(async () => import("./Widget"))

export default function App() {
  return (
    <div style={{ display: "grid", gap: 8 }}>
      <Suspense fallback={<span>Loading…</span>}>
        <LazyWidget />
      </Suspense>
    </div>
  )
}

Lazy props typing

Props are inferred from the imported module's default export. Calling site remains fully typed.

import React, { Suspense } from "react"

// Ensure props are preserved through lazy
interface ChartProps { title: string; values: number[] }
const Chart = React.lazy(async () => import("./Chart"))

export default function App() {
  return (
    <Suspense fallback={<span>Loading chart…</span>}>
      <Chart title="Sales" values={[10, 20, 15]} />
    </Suspense>
  )
}

ErrorBoundary typing

Type error handlers with unknown and narrow to Error if needed. Use React.ErrorInfo to access the component stack.

import React from "react"

interface Props { fallback: React.ReactNode }
interface State { hasError: boolean; message?: string }

export class ErrorBoundary extends React.Component<Props, State> {
  state: State = { hasError: false }

  static getDerivedStateFromError(err: unknown): State {
    const msg = err instanceof Error ? err.message : String(err)
    return { hasError: true, message: msg }
  }

  componentDidCatch(error: unknown, info: React.ErrorInfo) {
    // log error & component stack safely
    console.error("ErrorBoundary", error, info.componentStack)
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback || <span>Something went wrong</span>
    }
    return this.props.children
  }
}

Compose boundaries

Combine Suspense (loading) and Error Boundary (errors). They solve different concerns and can be nested per section.

import React, { Suspense } from "react"
import { ErrorBoundary } from "./ErrorBoundary"

const Page = React.lazy(async () => import("./Page"))

export default function App() {
  return (
    <div style={{ display: "grid", gap: 8 }}>
      <ErrorBoundary fallback={<span>Failed to load page</span>}>
        <Suspense fallback={<span>Loading page…</span>}>
          <Page />
        </Suspense>
      </ErrorBoundary>
    </div>
  )
}

Reset patterns

Reset tips:

Reset ErrorBoundary by changing its key.
Offer a “Try again” button to refetch or remount.
Keep fallbacks small and accessible.

Boundary typing check

Quick check: How do you catch render-time errors with a typed fallback?

Answer it in the interactive lesson

Recap

Recap: Suspense handles loading; Error Boundaries handle errors. Type unknown errors carefully and provide reset strategies.

Free to start

Learn TypeScript with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 101
Lessons: 352

Start learning free View the full course

Frequently Asked Questions

Is the “Suspense & error boundaries types” lesson free?

Yes — the full text of “Suspense & error boundaries types” is free to read here on the web. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the TypeScript Academy course, upgrade to CoddyKit PRO. The TypeScript Academy course includes 2 lessons in total.

What will I learn in “Suspense & error boundaries types”?

Use React.Suspense with lazy components and type robust Error Boundaries (class-based). Handle unknown errors safely and provide reset patterns. You practise TypeScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start TypeScript Academy?

No prior experience is required. TypeScript Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 2.

How long does the “Suspense & error boundaries types” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this TypeScript Academy lesson?

Yes. Every TypeScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

Custom hooks with generics & inference
Suspense & error boundaries types

← Back to TypeScript Academy