Same Code when pasted in editor shows error logs in console.

import { render } from "solid-js/web";
import { 
  createContext,
  useContext,
  createResource,
  ErrorBoundary,
  Suspense,
  For  
} from "solid-js";
import type { JSX } from "solid-js";

async function sleep(ms: number) {
  return new Promise(resolve => setTimeout(resolve, ms))
}

async function err(){
  console.log("I am triggered")
  if (Math.random()<2) throw Error("Bad boy!")
  return false ? null : [1,2,3]
}

const [badResource] = createResource(err);

const taking = {
  badResource:[badResource] 
};

const StoreContext = createContext<typeof taking | undefined>(undefined);

export const useStoreContext = (): typeof taking => {
  const context = useContext(StoreContext);
  if (!context) throw new Error("useStoreContext must be used within a StoreProvider");
  return context;
};

function Provider(props: { children: JSX.Element }){
  return <StoreContext.Provider value={taking}>
    {props.children}
  </StoreContext.Provider>
}

function App() {
  const {badResource:[bad]} = useStoreContext()
  return <div>
    <ErrorBoundary fallback={<div>I am error</div>}>
      <Suspense fallback={<div>Loading...</div>}>
        <For each={bad()} fallback={<div>Buggy loop</div>}>
          {
            (item)=><li>{item}</li>
          }
        </For>
      </Suspense>
    </ErrorBoundary>
  </div>
}

render(() => {
  return (<Provider><App /></Provider>)
}, document.getElementById("app")!);

import { render } from "solid-js/web";
import { 
  createContext,
  useContext,
  createResource,
  ErrorBoundary,
  Suspense,
  For  
} from "solid-js";
import type { JSX } from "solid-js";

async function sleep(ms: number) {
  return new Promise(resolve => setTimeout(resolve, ms))
}

async function err(){
  console.log("I am triggered")
  if (Math.random()<2) throw Error("Bad boy!")
  return false ? null : [1,2,3]
}

const [badResource] = createResource(err);

const taking = {
  badResource:[badResource] 
};

const StoreContext = createContext<typeof taking | undefined>(undefined);

export const useStoreContext = (): typeof taking => {
  const context = useContext(StoreContext);
  if (!context) throw new Error("useStoreContext must be used within a StoreProvider");
  return context;
};

function Provider(props: { children: JSX.Element }){
  return <StoreContext.Provider value={taking}>
    {props.children}
  </StoreContext.Provider>
}

function App() {
  const {badResource:[bad]} = useStoreContext()
  return <div>
    <ErrorBoundary fallback={<div>I am error</div>}>
      <Suspense fallback={<div>Loading...</div>}>
        <For each={bad()} fallback={<div>Buggy loop</div>}>
          {
            (item)=><li>{item}</li>
          }
        </For>
      </Suspense>
    </ErrorBoundary>
  </div>
}

render(() => {
  return (<Provider><App /></Provider>)
}, document.getElementById("app")!);