Error boundary wont catch error

[upper topaz]

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:

here are the code:

the fetch function

the gqcall function

am i missing something? in the terminal the error is being logged but error boundary wont show the fallback component

[upper topaz]

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

[floral dune]

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?

[upper topaz]

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>
    </>
  );
}

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;
}

[floral dune]

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

[upper topaz]

In what

[upper topaz]

In the entry-server?