From ad4647bc8b659a760e89943989a22895235fe1c2 Mon Sep 17 00:00:00 2001
From: asmyshlyaev177 <asmyshlyaev177+github@gmail.com>
Date: Thu, 14 Nov 2024 00:59:50 +0400
Subject: [PATCH] style: error boundary for demo page

---
 package-lock.json                             | 34 ++++++++-----------
 packages/example-nextjs14/package.json        |  1 +
 .../example-nextjs14/src/app/DemoPart.tsx     | 21 ++++++++++--
 3 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2ca8b036..642d8347 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "state-in-url",
-  "version": "4.0.5",
+  "version": "4.0.8",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "state-in-url",
-      "version": "4.0.5",
+      "version": "4.0.8",
       "license": "MIT",
       "workspaces": [
         "packages/urlstate",
@@ -1920,7 +1920,6 @@
       "version": "7.26.0",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
       "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
@@ -26964,7 +26963,6 @@
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
       "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/regenerator-transform": {
@@ -33015,6 +33013,7 @@
         "next": "^14.2.16",
         "react": "^18",
         "react-dom": "^18",
+        "react-error-boundary": "^4.1.2",
         "react-share": "^5.1.0",
         "schema-dts": "^1.1.2",
         "shiki": "^1.12.1"
@@ -33158,6 +33157,18 @@
         "postcss": "^8.0.0"
       }
     },
+    "packages/example-nextjs14/node_modules/react-error-boundary": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.1.2.tgz",
+      "integrity": "sha512-GQDxZ5Jd+Aq/qUxbCm1UtzmL/s++V7zKgE8yMktJiCQXCCFZnMZh9ng+6/Ne6PjNSXH0L9CjeOEREfRnq6Duag==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
     "packages/example-nextjs15": {
       "version": "0.1.0",
       "dependencies": {
@@ -33995,21 +34006,6 @@
       "name": "state-in-url",
       "version": "1.0.0",
       "license": "ISC"
-    },
-    "packages/example-nextjs15/node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.2.16",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.16.tgz",
-      "integrity": "sha512-jhPl3nN0oKEshJBNDAo0etGMzv0j3q3VYorTSFqH1o3rwv1MQRdor27u1zhkgsHPNeY1jxcgyx1ZsCkDD1IHgg==",
-      "cpu": [
-        "ia32"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
     }
   }
 }
diff --git a/packages/example-nextjs14/package.json b/packages/example-nextjs14/package.json
index 493a007f..b9276dc2 100644
--- a/packages/example-nextjs14/package.json
+++ b/packages/example-nextjs14/package.json
@@ -18,6 +18,7 @@
     "next": "^14.2.16",
     "react": "^18",
     "react-dom": "^18",
+    "react-error-boundary": "^4.1.2",
     "react-share": "^5.1.0",
     "schema-dts": "^1.1.2",
     "shiki": "^1.12.1"
diff --git a/packages/example-nextjs14/src/app/DemoPart.tsx b/packages/example-nextjs14/src/app/DemoPart.tsx
index 7c9ab2f6..562ff574 100644
--- a/packages/example-nextjs14/src/app/DemoPart.tsx
+++ b/packages/example-nextjs14/src/app/DemoPart.tsx
@@ -1,6 +1,7 @@
 'use client'
 import React from 'react';
 import { usePathname } from 'next/navigation';
+import { ErrorBoundary, type FallbackProps } from "react-error-boundary";
 
 import { GithubLink } from './components/GithubLink';
 import { UrlBox } from './components/UrlBox';
@@ -39,8 +40,14 @@ export function DemoPart({ searchParams }: { searchParams: object }) {
 
         <section className="form-components">
           <React.Suspense>
-            <Form className="form" searchParams={searchParams} ghLink={urls.form} />
-            <Status className="status" sp={searchParams} ghLink={urls.status} />
+            <ErrorBoundary fallbackRender={fallbackRender}>
+              <Form className="form" searchParams={searchParams} ghLink={urls.form} />
+            </ErrorBoundary>
+            <ErrorBoundary
+              fallbackRender={fallbackRender}>
+              <Status className="status" sp={searchParams} ghLink={urls.status} />
+            </ErrorBoundary>
+
           </React.Suspense>
         </section>
       </section>
@@ -48,6 +55,16 @@ export function DemoPart({ searchParams }: { searchParams: object }) {
   );
 }
 
+function fallbackRender({ error, resetErrorBoundary }: FallbackProps) {
+  return (
+    <div role="alert" className='max-w-[30%] flex flex-col items-center gap-4'>
+      <p>Something went wrong:</p>
+      <pre className='whitespace-break-spaces text-red-500 max-h-[350px]'>{error.message || error}</pre>
+      <button onClick={resetErrorBoundary} className='p-4 bg-gray-300 rounded-md'>Try again</button>
+    </div>
+  );
+}
+
 const sourceUrls = {
   next: {
     form: 'https://github.com/asmyshlyaev177/state-in-url/blob/master/packages/example-nextjs14/src/app/Form.tsx',