how to return a 404 error in `cache`?

how to do something like https://kit.svelte.dev/docs/errors#expected-errors ?

Errors • SvelteKit documentation

3 Replies

I saw your question the first time and refrained from responding given that I don't have the answer. Though it did make me wonder whether you won't find this in SolidStart (core) because it's more a “mechanism” than a “primitive”. You probably have a better idea of how this works in SvelteKit. My thoughts on emulating something similar: - cache points still produce promises that can either be fulfilled or rejected. - I would still expect that createAsync would trigger the closest ErrorBoundary when it gets a rejected promise from cache (though I would test this assumption in a quick skeleton project first), - The ErrorBoundary can then force a navigation in its fallback with Navigate. Creating a 404 error (page) right at the cache point makes little sense as that could serve as a source to many components and pages, each of which can have their own mitigation approaches; furthermore many pages will consume multiple cache points. cache is also on the client side, so it's too late for a response code. If you decide that in your project an error page is always "the right thing to do" it shouldn't be too difficult to formulate an abstraction that fits your needs exactly. It's easy enough to make the client respond to navigation events that originate from outside of the component tree. https://stackblitz.com/edit/stackblitz-starters-n8eugp?file=src%2Fexternal.ts Using that, a catch block inside the cache async op function could trigger a navigation.

peerreynders

StackBlitz

solid-router external navigation - StackBlitz

external.ts holds a link object that flipper.ts sends NavigationEvents to which are forwarded to the root component in app.tsx

Hussein•2mo ago

I would still expect that createAsync would trigger the closest ErrorBoundary when it gets a rejected promise from cache (though I would test this assumption in a quick skeleton project first)

solid already catches errors in cache to handle redirects. so i think that's not true. i haven't tested tho

peerreynders•2mo ago

This works

// file: src/routes/about.tsx
import { ErrorBoundary } from 'solid-js';
import { Title } from '@solidjs/meta';
import { cache, createAsync, Navigate } from '@solidjs/router';

const getUser = cache(() => {
  return new Promise<string>((_, r) => {
    setTimeout(r, 1000, new Error('Boom!'));
  });
}, 'session-user');

export default function About() {
  const user = createAsync(() => getUser());
  return (
    <main>
      <Title>About</Title>
      <h1>About</h1>
      <ErrorBoundary
        fallback={(err) => (
          console.log(err.toString(), Date.now()), (<Navigate href="/" />)
        )}
      >
        <div>{user()}</div>
      </ErrorBoundary>
    </main>
  );
}

// file: src/routes/about.tsx
import { ErrorBoundary } from 'solid-js';
import { Title } from '@solidjs/meta';
import { cache, createAsync, Navigate } from '@solidjs/router';

const getUser = cache(() => {
  return new Promise<string>((_, r) => {
    setTimeout(r, 1000, new Error('Boom!'));
  });
}, 'session-user');

export default function About() {
  const user = createAsync(() => getUser());
  return (
    <main>
      <Title>About</Title>
      <h1>About</h1>
      <ErrorBoundary
        fallback={(err) => (
          console.log(err.toString(), Date.now()), (<Navigate href="/" />)
        )}
      >
        <div>{user()}</div>
      </ErrorBoundary>
    </main>
  );
}

Gaming

Programming

how to return a 404 error in `cache`?