S
SolidJS•15mo ago
febri

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:
No description
8 Replies
febri
febriOP•15mo ago
here are the code:

carbon_3.svg

febri
febriOP•15mo ago
the fetch function

carbon_2.svg

febri
febriOP•15mo ago
the gqcall function

carbon_4.svg

febri
febriOP•15mo 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
lxsmnsyc•15mo 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?
febri
febriOP•15mo 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
lxsmnsyc•15mo 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
febri
febriOP•15mo 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

Did you find this page helpful?