ErrorBoundary explanation

import { createQuery } from "@tanstack/solid-query";
import { Suspense } from "solid-js";
import { ErrorBoundary } from "solid-start";

const Comp = () => {
  const state = createQuery(() => ({
    queryKey: ["key"],
    queryFn: async () => {
      if (true) {
        throw new Error("Suspense Error Bingo");
      } else {
        return "data";
      }
    },
    retry: false,
  }));

  return <p>{state.data}</p>;
};

function Test() {
  return (
    <ErrorBoundary
      fallback={() => (
        <div>
          <div>error boundary</div>
        </div>
      )}
    >
      <Suspense fallback="Loading...">
        <Comp />
      </Suspense>
    </ErrorBoundary>
  );
}

export default Test;

import { createQuery } from "@tanstack/solid-query";
import { Suspense } from "solid-js";
import { ErrorBoundary } from "solid-start";

const Comp = () => {
  const state = createQuery(() => ({
    queryKey: ["key"],
    queryFn: async () => {
      if (true) {
        throw new Error("Suspense Error Bingo");
      } else {
        return "data";
      }
    },
    retry: false,
  }));

  return <p>{state.data}</p>;
};

function Test() {
  return (
    <ErrorBoundary
      fallback={() => (
        <div>
          <div>error boundary</div>
        </div>
      )}
    >
      <Suspense fallback="Loading...">
        <Comp />
      </Suspense>
    </ErrorBoundary>
  );
}

export default Test;

import { createQuery } from "@tanstack/solid-query";
import { Suspense } from "solid-js";
import { ErrorBoundary } from "solid-start";




function Test() {
  const state = createQuery(() => ({
    queryKey: ["key"],
    queryFn: async () => {
      if (true) {
        throw new Error("Suspense Error Bingo");
      } else {
        return "data";
      }
    },
    retry: false,
  }));

  return (
    <ErrorBoundary
      fallback={() => (
        <div>
          <div>error boundary</div>
        </div>
      )}
    >
      <Suspense fallback="Loading..."><p>{state.data}</p></Suspense>
    </ErrorBoundary>
  );
}

export default Test;

import { createQuery } from "@tanstack/solid-query";
import { Suspense } from "solid-js";
import { ErrorBoundary } from "solid-start";




function Test() {
  const state = createQuery(() => ({
    queryKey: ["key"],
    queryFn: async () => {
      if (true) {
        throw new Error("Suspense Error Bingo");
      } else {
        return "data";
      }
    },
    retry: false,
  }));

  return (
    <ErrorBoundary
      fallback={() => (
        <div>
          <div>error boundary</div>
        </div>
      )}
    >
      <Suspense fallback="Loading..."><p>{state.data}</p></Suspense>
    </ErrorBoundary>
  );
}

export default Test;