SolidJS•2y ago

ErrorBoundry component not works

hi now i am doing official-tutorial : https://www.solidjs.com/tutorial/flow_error_boundary I copy-and-paste this code in my vite project. the full-code is below this

import { Component, ErrorBoundary, createEffect, createSignal, useContext, useTransition } from 'solid-js';
import {render} from 'solid-js/web'

const Broken = (props) => {
  throw new Error("Oh No");
  return <>Never Getting Here</>
}

export const ErrorBoundryTest = () => {

  return (
    <div class="">      
        <div class="">before error</div>
        <ErrorBoundary fallback={err => err}>
          <Broken />
        </ErrorBoundary>
        <div class="">after error</div>
    </div>
  );
};

import { Component, ErrorBoundary, createEffect, createSignal, useContext, useTransition } from 'solid-js';
import {render} from 'solid-js/web'

const Broken = (props) => {
  throw new Error("Oh No");
  return <>Never Getting Here</>
}

export const ErrorBoundryTest = () => {

  return (
    <div class="">      
        <div class="">before error</div>
        <ErrorBoundary fallback={err => err}>
          <Broken />
        </ErrorBoundary>
        <div class="">after error</div>
    </div>
  );
};

and it doesn't show anything about error. but It works on solid-playground I never found what is difference between my project and solid-playground. and feedbacks are helpful to me thank you

SolidJS

Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.

3 Replies

leekb_OP•2y ago

I found strange thing

export const ErrorBoundryTest = () => {

  return (
    <>
      <div class="">      
          <div class="">before error</div>
          <ErrorBoundary fallback={err => err}>
            <Broken />
          </ErrorBoundary>
          <div class="">after error</div>
      </div>
    </>
  );
};

export const ErrorBoundryTest = () => {

  return (
    <>
      <div class="">      
          <div class="">before error</div>
          <ErrorBoundary fallback={err => err}>
            <Broken />
          </ErrorBoundary>
          <div class="">after error</div>
      </div>
    </>
  );
};

this not works, but

export const ErrorBoundryTest = () => {

  return (
    <>
        <div class="">before error</div>
        <ErrorBoundary fallback={err => err}>
          <Broken />
        </ErrorBoundary>
        <div class="">after error</div>
    </>
  );
};

export const ErrorBoundryTest = () => {

  return (
    <>
        <div class="">before error</div>
        <ErrorBoundary fallback={err => err}>
          <Broken />
        </ErrorBoundary>
        <div class="">after error</div>
    </>
  );
};

this works. why?

lxsmnsyc•2y ago

Your code works for me, but of course it doesn't work as you mentioned because your fallback doesn't return any JSX element try fallback={err => <h1>{err.message}</h1>}

leekb_OP•2y ago

I understand what you are said

export const ErrorBoundryTest = () => {

  return (
     <>
     <div class="">
         <div class="">before error</div>
         <ErrorBoundary fallback={err => <h1>{err.message}</h1>}>
           <Broken />
         </ErrorBoundary>
         <div class="">after error</div>
     </div>
     </>
  );
};

export const ErrorBoundryTest = () => {

  return (
     <>
     <div class="">
         <div class="">before error</div>
         <ErrorBoundary fallback={err => <h1>{err.message}</h1>}>
           <Broken />
         </ErrorBoundary>
         <div class="">after error</div>
     </div>
     </>
  );
};

this works because fallback returns html element. but

export const ErrorBoundryTest = () => {

  return (
    <>
        <div class="">before error</div>
        <ErrorBoundary fallback={err => err}>
          <Broken />
        </ErrorBoundary>
        <div class="">after error</div>
    </>
  );
};

export const ErrorBoundryTest = () => {

  return (
    <>
        <div class="">before error</div>
        <ErrorBoundary fallback={err => err}>
          <Broken />
        </ErrorBoundary>
        <div class="">after error</div>
    </>
  );
};

this also works although fallback returns javascript object that is not htmlelement I don't understand why fallback={err => err} syntax works and sometimes not works

Gaming

Programming

ErrorBoundry component not works