SolidJS•13mo ago

Error boundary wont catch error

i have /services/[service_id] that fetch service information from graphql server which will throw error when theres no service information on that id. i wrap the component with error boundary and suspense but when i go to /services/blablabla (which doesnt exist) it doesnt show error boundary fallback but an renderString timeout, here are the error:

8 Replies

febriOP•13mo ago

here are the code:

carbon_3.svg

febriOP•13mo ago

the fetch function

carbon_2.svg

febriOP•13mo ago

the gqcall function

carbon_4.svg

febriOP•13mo ago

am i missing something? in the terminal the error is being logged but error boundary wont show the fallback component Help plss its the last error that i need to solve im this is just a personal project ill upload it in github if more detail is needed Im stuck

lxsmnsyc•13mo ago

honestly uploading the svg file of the "highlighted code" is just tedious to check into. Could you please upload the PNG format or to simplify things, just paste the code directly here?

febriOP•13mo ago

No png would ruin the code the code is too long aight i simplify it

import { For, createEffect } from "solid-js";
import { createRouteData, useParams, useRouteData } from "solid-start";

import { fetchServiceInfoDetailed } from "~/lib/actions/service";

export function routeData() {
  const params = useParams<{ id: string }>();

  return createRouteData(() => fetchServiceInfoDetailed(decodeURI(params.id)));
}

export default function ServiceDetail() {
  const serviceInfo = useRouteData<typeof routeData>();
  createEffect(() => {
    console.log(serviceInfo());
  });
  return (
    <>
      <div>
        {serviceInfo()
          ?.description.split("\n")
          .map((str) => (
            <>
              <p>{str}</p>
              <br />
            </>
          ))}
        <ul class="mt-10 list-disc list-inside">
          <For each={serviceInfo()?.benefit}>
            {(featureish) => (
              <li class="mt-2">
                <span>{featureish}</span>
              </li>
            )}
          </For>
        </ul>
      </div>
    </>
  );
}

import { For, createEffect } from "solid-js";
import { createRouteData, useParams, useRouteData } from "solid-start";

import { fetchServiceInfoDetailed } from "~/lib/actions/service";

export function routeData() {
  const params = useParams<{ id: string }>();

  return createRouteData(() => fetchServiceInfoDetailed(decodeURI(params.id)));
}

export default function ServiceDetail() {
  const serviceInfo = useRouteData<typeof routeData>();
  createEffect(() => {
    console.log(serviceInfo());
  });
  return (
    <>
      <div>
        {serviceInfo()
          ?.description.split("\n")
          .map((str) => (
            <>
              <p>{str}</p>
              <br />
            </>
          ))}
        <ul class="mt-10 list-disc list-inside">
          <For each={serviceInfo()?.benefit}>
            {(featureish) => (
              <li class="mt-2">
                <span>{featureish}</span>
              </li>
            )}
          </For>
        </ul>
      </div>
    </>
  );
}

export async function fetchServiceInfoDetailed(
  service_name: string
): Promise<IActionServiceInfoDetailed> {
  const result = await gqlCall(
    `....`
  );

  if (result?.service) return result?.service;

  throw new Error("Failed to fetch service information.");
}

export async function fetchServiceInfoDetailed(
  service_name: string
): Promise<IActionServiceInfoDetailed> {
  const result = await gqlCall(
    `....`
  );

  if (result?.service) return result?.service;

  throw new Error("Failed to fetch service information.");
}

export async function gqlCall(query: string) {
  const queryFinale = JSON.stringify({ query });

  const response = await fetch("http://localhost:3000/graphql", {
    method: "POST",
    body: queryFinale,
  });

  if (!response.ok) return;
  const gqlResponse = await response.json();
  if (gqlResponse.errors) return;
  return gqlResponse.data;
}

export async function gqlCall(query: string) {
  const queryFinale = JSON.stringify({ query });

  const response = await fetch("http://localhost:3000/graphql", {
    method: "POST",
    body: queryFinale,
  });

  if (!response.ok) return;
  const gqlResponse = await response.json();
  if (gqlResponse.errors) return;
  return gqlResponse.data;
}

lxsmnsyc•13mo ago

it seems that you're using renderToString while expecting an error from a Promise This is expected behavior. You might want to try renderToStream or renderToStringAsync instead

febriOP•13mo ago

In what In the entry-server? I changed it to renderStream, it does fix the timeout but the error boundary still wont catch the error

Gaming

Programming

Error boundary wont catch error