S
SolidJS•2mo ago
AsyncBanana

Error in server side preloaded query crashing dev server

Whenever an error is thrown in a preloaded server side query in one of my routes, it crashes the dev server. It also is not caught by any error boundary. I found #399, which appears to be a similar issue. I am not sure whether that issue has simply reappeared, or it is erroring because I have misconfigured something (I am on the latest solid/solid router/solidstart versions).
GitHub
solidjs/solid-router
A universal router for Solid inspired by Ember and React Router - solidjs/solid-router
6 Replies
Madaxen86
Madaxen86•2mo ago
preloading is handled outside the rendering context so it can't be handled by the ErrorBoundary. If the called function in preload is a query throwing should work. If its not a query adding .catch(() => void 0) help, although there's actuall no point calling a non query. So this works - ErrorBoundary is in app.tsx: 
import { createAsync, query, type RouteDefinition } from "@solidjs/router";

async function getData() {
  "use server";
  throw Error("oopsie");
}
const queryData = query(getData, "queryData");

export const route = {
  preload: ({ params }) => {
    queryData();

    getData().catch(() => void 0);
  },
} satisfies RouteDefinition;

const Page = () => {
  const d1 = createAsync(() => queryData());
  const d2 = createAsync(() => getData());
  return (
    <div>
      <h1>Page</h1>
      {/* <pre>{JSON.stringify(d1(), undefined, 2)}</pre> */}
      <pre>{JSON.stringify(d2(), undefined, 2)}</pre>
    </div>
  );
};
export default Page;
import { createAsync, query, type RouteDefinition } from "@solidjs/router";

async function getData() {
  "use server";
  throw Error("oopsie");
}
const queryData = query(getData, "queryData");

export const route = {
  preload: ({ params }) => {
    queryData();

    getData().catch(() => void 0);
  },
} satisfies RouteDefinition;

const Page = () => {
  const d1 = createAsync(() => queryData());
  const d2 = createAsync(() => getData());
  return (
    <div>
      <h1>Page</h1>
      {/* <pre>{JSON.stringify(d1(), undefined, 2)}</pre> */}
      <pre>{JSON.stringify(d2(), undefined, 2)}</pre>
    </div>
  );
};
export default Page;
AsyncBanana
AsyncBananaOP•2mo ago
Thanks. It turns out I misread the issue as being for preload rather than load
Madaxen86
Madaxen86•2mo ago
Load is the predecessor of preload
AsyncBanana
AsyncBananaOP•2mo ago
For some reason this query still doesn't catch errors: 
const getQuestion = query(async (hexId: string, setHexId: string | null) => {
  "use server";
  const req = getRequestEvent();
  const user = await getUser();
  const id = parseInt(hexId, 16);
  if (!req) throw new Error("No request");
  if (!id) throw new Error("404"); // errors like this
  const db = req.locals.db;
  let secondQuery;
  const set = parseInt(setHexId || "", 16);
...
const getQuestion = query(async (hexId: string, setHexId: string | null) => {
  "use server";
  const req = getRequestEvent();
  const user = await getUser();
  const id = parseInt(hexId, 16);
  if (!req) throw new Error("No request");
  if (!id) throw new Error("404"); // errors like this
  const db = req.locals.db;
  let secondQuery;
  const set = parseInt(setHexId || "", 16);
...
being accessed by 
export const route = {
  preload: (req) => getQuestion(
      req.params.question,
      new URLSearchParams(useLocation().search).get("set")
    ),
} satisfies RouteDefinition;
export const route = {
  preload: (req) => getQuestion(
      req.params.question,
      new URLSearchParams(useLocation().search).get("set")
    ),
} satisfies RouteDefinition;
and 
const params = useParams()
const question = createAsync(() =>
    getQuestion(
      params.question,
      new URLSearchParams(useLocation().search).get("set")
    )
  );
const params = useParams()
const question = createAsync(() =>
    getQuestion(
      params.question,
      new URLSearchParams(useLocation().search).get("set")
    )
  );
any idea why? other queries appear to catch errors properly, but these crash the dev server
Madaxen86
Madaxen86•2mo ago
Not really . Looks fine to me. What’s error message?
AsyncBanana
AsyncBananaOP•5w ago
It is just the original error uncaught e.g. 
ode:internal/process/promises:394
    triggerUncaughtException(err, true /* fromPromise */);
    ^

Error: 404
    at eval (route_file_path)
ode:internal/process/promises:394
    triggerUncaughtException(err, true /* fromPromise */);
    ^

Error: 404
    at eval (route_file_path)
then the process exits I have messed around with it a bit and it seems to be caused by something in the query rather than how it is being called externally, but I am having trouble figuring out what that could be

Did you find this page helpful?