leekb_ Comments - Answer Overflow

leekb_

•Created by leekb_ on 5/7/2023 in #support

ErrorBoundry component not works

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

5 replies

SSolidJS

•Created by leekb_ on 5/7/2023 in #support

ErrorBoundry component not works

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?

5 replies

Gaming

Programming