Error Boundary UI

"use client";

import { ErrorBoundaryUi } from "@/components/ui/error-boundary-ui";

function makeSampleError() {
  const error = new Error("Cannot read properties of undefined (reading 'map')");
  error.name = "TypeError";
  error.stack = `TypeError: Cannot read properties of undefined (reading 'map')
    at ProductList (webpack-internal:///./src/components/ProductList.tsx:24:18)
    at renderWithHooks (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:16305:18)
    at mountIndeterminateComponent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20074:13)`;
  return error;
}

export default function Default() {
  const error = makeSampleError();
  const componentStack = `
    at ProductList (src/components/ProductList.tsx:24:18)
    at Page (src/app/products/page.tsx:12:9)`;

  return (
    <div className="w-full max-w-xl mx-auto p-6">
      <ErrorBoundaryUi
        error={error}
        isDev
        componentStack={componentStack}
        resetError={() => window.location.reload()}
      />
    </div>
  );
}