Skip to content

[Bug?]: ErrorBoundary not functioning as described in the docs #374

@JacobSNGoodwin

Description

@JacobSNGoodwin

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Current behavior 😯

I have created a basic reproducible version of using an ErrorBoundary to handle errors thrown inside of a FileRouter load function. An example of this is provided in the HttpStatusCode Page, where an Error boundary is used for handling an error thrown in a cached function.

I have produced a similar example below with a newly scaffolded version 0.5.1 solid-start app. Navigating to this page produces an uncaught error and crashes the development server.

// @refresh reload
import {
  createAsync,
  RouteDefinition,
  cache,
} from '@solidjs/router';
import { ErrorBoundary } from 'solid-js/web';

const getData = cache(async () => {
  const shouldThrow = true;

  const data = 'Bill';

  if (shouldThrow) {
    throw new Error('ya failed');
  }
  return data;
}, 'some-data');

export const route = {
  load: async () => {
    getData();
  },
} satisfies RouteDefinition;

const Home = () => {
  const data = createAsync(getData);

  return (
    <ErrorBoundary fallback={<div>Ya failed</div>}>
      <h1>Ya name: {data()}</h1>
    </ErrorBoundary>
  );
};

export default Home;

Expected behavior 🤔

The ErrorBoundary fallback property should be displayed.

Steps to reproduce 🕹

Steps:

  1. Clone the repository: https://github.com/JacobSNGoodwin/solid-error-boundary.git
  2. Install dependencies (I used both pnpm and bun
  3. Run bun dev or equivalent
  4. Open localhost:3000
  5. Observe the dev server's unhandled exception, and nothing displayed in the browser.

Context 🔦

I am trying to handle errors in general. I was recently working on an authorization callback and handler and was facing issues with the dev server crashing when cached functions (or functions which they called) threw errors.

https://github.com/JacobSNGoodwin/scavenge-solid/blob/lucia-auth/src/routes/authorize/%5Bprovider%5D.tsx

Your environment 🌎

System:
    OS:  macOS 14.2.1
    Arch: Apple M1 Pro
Binaries:
    Node: v18.16.1
    pnpm: 8.6.6
    bun: 1.0.26
npmPackages:
    "@solidjs/router": "^0.11.3",
    "@solidjs/start": "^0.5.1",
    "solid-js": "^1.8.14",
    "vinxi": "^0.2.1"

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions