loading.tsx, error.tsx и not-found.tsx

// сети в песочнице нет, поэтому «запрос за постами» изображает таймер
const postsPromise = new Promise<string[]>((resolve) => {
  setTimeout(() => resolve(["Первый пост", "Второй пост"]), 200);
});

const root = document.getElementById("root")!;
// считаем отрисовки раскладки: сколько раз она мигнёт, пока идёт ожидание
let layoutRenders = 0;

// app/blog/layout.tsx
function BlogLayout({ children }: { children: React.ReactNode }) {
  layoutRenders += 1;
  return (
    <div>
      <nav>Блог</nav>
      {children}
    </div>
  );
}

// app/blog/loading.tsx
function BlogLoading() {
  console.log("показали loading.tsx");
  return <p>Загружаем посты…</p>;
}

// app/blog/page.tsx
function BlogPage() {
  const posts = React.use(postsPromise);
  // в документ заглядываем из эффекта: он срабатывает уже после отрисовки
  React.useEffect(() => {
    console.log("в кадре:", root.textContent);
    console.log("раскладка отрисовалась раз:", layoutRenders);
  }, []);
  return (
    <ul>
      {posts.map((title) => (
        <li key={title}>{title}</li>
      ))}
    </ul>
  );
}

// вот эти две строки Next пишет за вас, увидев loading.tsx рядом со страницей
ReactDOM.createRoot(root).render(
  <BlogLayout>
    <React.Suspense fallback={<BlogLoading />}>
      <BlogPage />
    </React.Suspense>
  </BlogLayout>
);

// app/blog/error.tsx
"use client";

interface ErrorProps {
  error: Error & { digest?: string };
  reset: () => void;
}

function BlogError({ error, reset }: ErrorProps) {
  return (
    <div>
      <h2>Блог не открылся</h2>
      <p>{error.message}</p>
      <button onClick={reset}>Попробовать снова</button>
    </div>
  );
}

// а так его вызовет Next, поймав ошибку в сегменте
ReactDOM.createRoot(document.getElementById("root")!).render(
  <BlogError
    error={new Error("в ответе нет поля posts")}
    reset={() => console.log("сегмент перерисовывается заново")}
  />
);

// нажмём кнопку за читателя: reset — обычная функция, приехавшая пропсом
setTimeout(() => document.querySelector("button")!.click(), 50);

interface ErrorProps {
  error: Error & { digest?: string };
  reset: () => void;
}

function BlogError({ error, reset }: ErrorProps) {
  return <button onClick={reset}>{error.message}</button>;
}

const element = <BlogError error={new Error("в ответе нет поля posts")} />;

function ShortDigest({ error }: ErrorProps) {
  return <p>Код: {error.digest.slice(0, 8)}</p>;
}

interface ErrorProps {
  error: Error;
  reset: () => void;
}

// app/blog/error.tsx — это ваш файл
function BlogError({ error, reset }: ErrorProps) {
  return (
    <div>
      <p>Не открылось: {error.message}</p>
      <button id="retry" onClick={reset}>
        Попробовать снова
      </button>
    </div>
  );
}

interface BoundaryProps {
  children?: React.ReactNode;
}

interface BoundaryState {
  error: Error | null;
}

// а этот класс Next заводит сам, увидев error.tsx в папке сегмента
class SegmentBoundary extends React.Component<BoundaryProps, BoundaryState> {
  state: BoundaryState = { error: null };

  static getDerivedStateFromError(error: Error): BoundaryState {
    return { error };
  }

  render() {
    if (this.state.error) {
      // reset — это просто «забудь ошибку и нарисуй детей заново»
      return <BlogError error={this.state.error} reset={() => this.setState({ error: null })} />;
    }
    return this.props.children;
  }
}

// причина падения лежит снаружи компонента — как испорченный ответ сервера
let dataIsBroken = true;

function BlogPage() {
  if (dataIsBroken) throw new Error("в ответе нет поля posts");
  return <p>Посты на месте</p>;
}

const root = document.getElementById("root")!;
ReactDOM.createRoot(root).render(
  <SegmentBoundary>
    <BlogPage />
  </SegmentBoundary>
);

setTimeout(() => console.log("сразу:", root.textContent), 30);
// чиним причину и только потом жмём кнопку
setTimeout(() => {
  dataIsBroken = false;
  document.getElementById("retry")!.click();
}, 60);
setTimeout(() => console.log("после reset:", root.textContent), 150);

interface ErrorProps {
  error: Error;
  reset: () => void;
}

function BlogError({ error, reset }: ErrorProps) {
  return (
    <div>
      <p>Не открылось: {error.message}</p>
      <button id="retry" onClick={reset}>
        Попробовать снова
      </button>
    </div>
  );
}

interface BoundaryProps {
  children?: React.ReactNode;
}

interface BoundaryState {
  error: Error | null;
}

class SegmentBoundary extends React.Component<BoundaryProps, BoundaryState> {
  state: BoundaryState = { error: null };

  static getDerivedStateFromError(error: Error): BoundaryState {
    return { error };
  }

  render() {
    if (this.state.error) {
      return <BlogError error={this.state.error} reset={() => this.setState({ error: null })} />;
    }
    return this.props.children;
  }
}

// на этот раз причину никто не устраняет
function BlogPage(): React.ReactNode {
  throw new Error("в ответе нет поля posts");
}

const root = document.getElementById("root")!;
ReactDOM.createRoot(root).render(
  <SegmentBoundary>
    <BlogPage />
  </SegmentBoundary>
);

// жмём «Попробовать снова» дважды подряд, причину так и не устранив
setTimeout(() => console.log("сразу:", root.textContent), 30);
setTimeout(() => document.getElementById("retry")!.click(), 60);
setTimeout(() => console.log("после первого reset:", root.textContent), 110);
setTimeout(() => document.getElementById("retry")!.click(), 140);
setTimeout(() => console.log("после второго reset:", root.textContent), 220);

interface Kids {
  children?: React.ReactNode;
}

interface BoundaryProps extends Kids {
  name: string;
}

interface BoundaryState {
  error: Error | null;
}

class SegmentBoundary extends React.Component<BoundaryProps, BoundaryState> {
  state: BoundaryState = { error: null };

  static getDerivedStateFromError(error: Error): BoundaryState {
    return { error };
  }

  render() {
    if (this.state.error) {
      return (
        <p>
          поймала {this.props.name}: {this.state.error.message}
        </p>
      );
    }
    return this.props.children;
  }
}

// app/layout.tsx
function RootLayout({ children }: Kids) {
  return (
    <div>
      <header>java-script.pro</header>
      {children}
    </div>
  );
}

// настройки блога приехали пустыми
const blogSettings: { title?: string } = {};

// app/blog/layout.tsx
function BlogLayout({ children }: Kids) {
  if (!blogSettings.title) throw new Error("в настройках блога нет поля title");
  return (
    <section>
      <nav>{blogSettings.title}</nav>
      {children}
    </section>
  );
}

// app/blog/page.tsx
function BlogPage() {
  return <p>Посты</p>;
}

// матрёшка из таблицы: граница сегмента — внутри его раскладки
ReactDOM.createRoot(document.getElementById("root")!).render(
  <RootLayout>
    <SegmentBoundary name="app/error.tsx">
      <BlogLayout>
        <SegmentBoundary name="app/blog/error.tsx">
          <BlogPage />
        </SegmentBoundary>
      </BlogLayout>
    </SegmentBoundary>
  </RootLayout>
);

interface Post {
  id: string;
  title: string;
}

const posts: Post[] = [{ id: "first", title: "Первый пост" }];

// в проекте её импортируют из next/navigation; здесь та же по сути своя
function notFound(): never {
  throw new Error("NEXT_HTTP_ERROR_FALLBACK;404");
}

function renderPost(id: string): string {
  const post = posts.find((item) => item.id === id);
  // тип never говорит компилятору, что после этой строки жизни нет
  if (!post) notFound();
  return post.title;
}

console.log(renderPost("first"));

try {
  renderPost("no-such-post");
} catch (err) {
  console.log("бросили:", (err as Error).message);
}

const NOT_FOUND = "NEXT_HTTP_ERROR_FALLBACK;404";

function notFound(): never {
  throw new Error(NOT_FOUND);
}

interface Kids {
  children?: React.ReactNode;
}

interface BoundaryState {
  error: Error | null;
}

// app/blog/[slug]/not-found.tsx
function PostNotFound() {
  return <p>Такого поста нет</p>;
}

class NotFoundBoundary extends React.Component<Kids, BoundaryState> {
  state: BoundaryState = { error: null };

  static getDerivedStateFromError(error: Error): BoundaryState {
    return { error };
  }

  render() {
    const error = this.state.error;
    if (error === null) return this.props.children;
    // чужие ошибки эта граница не присваивает — бросает выше, в error.tsx
    if (error.message !== NOT_FOUND) throw error;
    return <PostNotFound />;
  }
}

class ErrorBoundary extends React.Component<Kids, BoundaryState> {
  state: BoundaryState = { error: null };

  static getDerivedStateFromError(error: Error): BoundaryState {
    return { error };
  }

  render() {
    if (this.state.error) return <p>error.tsx: {this.state.error.message}</p>;
    return this.props.children;
  }
}

function MissingPost(): React.ReactNode {
  notFound();
}

function BrokenPost(): React.ReactNode {
  throw new Error("в ответе нет поля title");
}

// два сегмента рядом: в одном нет поста, в другом сломался ответ
ReactDOM.createRoot(document.getElementById("root")!).render(
  <div>
    <ErrorBoundary>
      <NotFoundBoundary>
        <MissingPost />
      </NotFoundBoundary>
    </ErrorBoundary>
    <ErrorBoundary>
      <NotFoundBoundary>
        <BrokenPost />
      </NotFoundBoundary>
    </ErrorBoundary>
  </div>
);

function notFound(): never {
  throw new Error("NEXT_HTTP_ERROR_FALLBACK;404");
}

const titles: Record<string, string> = { first: "Первый пост" };

function loadPost(id: string): string {
  try {
    const title = titles[id];
    if (title === undefined) notFound();
    return title;
  } catch (err) {
    console.log("поймали:", (err as Error).message);
    return "Не удалось загрузить пост";
  }
}

console.log(loadPost("first"));
console.log(loadPost("no-such-post"));