CoastalCommits/CoastalCommitsPastes
CoastalCommits/CoastalCommitsPastes
2
1
Fork 0
forked from CoastalCommitsArchival/github.com-MaxLeiter-drift
Code Pull requests Activity Actions

Add react-loading-boundary and error component

Browse source
This commit is contained in:
Max Leiter 2023-01-28 23:51:40 -08:00
parent 3048d842de
commit 1acbb52e27
3 changed files with 88 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -35,6 +35,7 @@
"react-datepicker": "4.8.0",
"react-dom": "18.2.0",
"react-dropzone": "14.2.3",
"react-error-boundary": "^3.1.4",
"react-feather": "^2.0.10",
"react-hot-toast": "2.4.0",
"server-only": "^0.0.1",

70
pnpm-lock.yaml
View file

@ -41,6 +41,7 @@ specifiers:
react-datepicker: 4.8.0
react-dom: 18.2.0
react-dropzone: 14.2.3
react-error-boundary: ^3.1.4
react-feather: ^2.0.10
react-hot-toast: 2.4.0
server-only: ^0.0.1
@ -75,6 +76,7 @@ dependencies:
react-datepicker: 4.8.0_biqbaboplfbrettd7655fr4n2y
react-dom: 18.2.0_react@18.2.0
react-dropzone: 14.2.3_react@18.2.0
react-error-boundary: 3.1.4_react@18.2.0
react-feather: 2.0.10_react@18.2.0
react-hot-toast: 2.4.0_owo25xnefcwdq3zjgtohz6dbju
server-only: 0.0.1
@ -424,7 +426,7 @@ packages:
resolution: {integrity: sha512-mrzLkl6U9YLF8qpqI7TB82PESyEGjm/0Ly91jG575eVxMMlb8fYfOXFZIJ8XfLrJZQbm7dlKry2bJmXBUEkdFg==}
engines: {node: '>=6.9.0'}
dependencies:
regenerator-runtime: 0.13.10
regenerator-runtime: 0.13.11
dev: false
/@babel/runtime/7.20.13:
@ -432,7 +434,6 @@ packages:
engines: {node: '>=6.9.0'}
dependencies:
regenerator-runtime: 0.13.11
dev: true
/@babel/template/7.20.7:
resolution: {integrity: sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==}
@ -1029,7 +1030,7 @@ packages:
/@radix-ui/primitive/1.0.0:
resolution: {integrity: sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==}
dependencies:
'@babel/runtime': 7.20.1
'@babel/runtime': 7.20.13
dev: false
/@radix-ui/react-arrow/1.0.1_biqbaboplfbrettd7655fr4n2y:
@ -1038,7 +1039,7 @@ packages:
react: ^16.8 || ^17.0 || ^18.0
react-dom: ^16.8 || ^17.0 || ^18.0
dependencies:
'@babel/runtime': 7.20.1
'@babel/runtime': 7.20.13
'@radix-ui/react-primitive': 1.0.1_biqbaboplfbrettd7655fr4n2y
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
@ -1050,7 +1051,7 @@ packages:
react: ^16.8 || ^17.0 || ^18.0
react-dom: ^16.8 || ^17.0 || ^18.0
dependencies:
'@babel/runtime': 7.20.1
'@babel/runtime': 7.20.13
'@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
'@radix-ui/react-context': 1.0.0_react@18.2.0
'@radix-ui/react-primitive': 1.0.1_biqbaboplfbrettd7655fr4n2y
@ -1064,7 +1065,7 @@ packages:
peerDependencies:
react: ^16.8 || ^17.0 || ^18.0
dependencies:
'@babel/runtime': 7.20.1
'@babel/runtime': 7.20.13
react: 18.2.0
dev: false
@ -1073,7 +1074,7 @@ packages:
peerDependencies:
react: ^16.8 || ^17.0 || ^18.0
dependencies:
'@babel/runtime': 7.20.1
'@babel/runtime': 7.20.13
react: 18.2.0
dev: false
@ -1109,7 +1110,7 @@ packages:
peerDependencies:
react: ^16.8 || ^17.0 || ^18.0
dependencies:
'@babel/runtime': 7.20.1
'@babel/runtime': 7.20.13
react: 18.2.0
dev: false
@ -1119,7 +1120,7 @@ packages:
react: ^16.8 || ^17.0 || ^18.0
react-dom: ^16.8 || ^17.0 || ^18.0
dependencies:
'@babel/runtime': 7.20.1
'@babel/runtime': 7.20.13
'@radix-ui/primitive': 1.0.0
'@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
'@radix-ui/react-primitive': 1.0.1_biqbaboplfbrettd7655fr4n2y
@ -1154,7 +1155,7 @@ packages:
peerDependencies:
react: ^16.8 || ^17.0 || ^18.0
dependencies:
'@babel/runtime': 7.20.1
'@babel/runtime': 7.20.13
react: 18.2.0
dev: false
@ -1164,7 +1165,7 @@ packages:
react: ^16.8 || ^17.0 || ^18.0
react-dom: ^16.8 || ^17.0 || ^18.0
dependencies:
'@babel/runtime': 7.20.1
'@babel/runtime': 7.20.13
'@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
'@radix-ui/react-primitive': 1.0.1_biqbaboplfbrettd7655fr4n2y
'@radix-ui/react-use-callback-ref': 1.0.0_react@18.2.0
@ -1177,7 +1178,7 @@ packages:
peerDependencies:
react: ^16.8 || ^17.0 || ^18.0
dependencies:
'@babel/runtime': 7.20.1
'@babel/runtime': 7.20.13
'@radix-ui/react-use-layout-effect': 1.0.0_react@18.2.0
react: 18.2.0
dev: false
@ -1188,7 +1189,7 @@ packages:
react: ^16.8 || ^17.0 || ^18.0
react-dom: ^16.8 || ^17.0 || ^18.0
dependencies:
'@babel/runtime': 7.20.1
'@babel/runtime': 7.20.13
'@radix-ui/primitive': 1.0.0
'@radix-ui/react-collection': 1.0.1_biqbaboplfbrettd7655fr4n2y
'@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
@ -1247,7 +1248,7 @@ packages:
react: ^16.8 || ^17.0 || ^18.0
react-dom: ^16.8 || ^17.0 || ^18.0
dependencies:
'@babel/runtime': 7.20.1
'@babel/runtime': 7.20.13
'@floating-ui/react-dom': 0.7.2_5ndqzdd6t4rivxsukjv3i3ak2q
'@radix-ui/react-arrow': 1.0.1_biqbaboplfbrettd7655fr4n2y
'@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
@ -1270,7 +1271,7 @@ packages:
react: ^16.8 || ^17.0 || ^18.0
react-dom: ^16.8 || ^17.0 || ^18.0
dependencies:
'@babel/runtime': 7.20.1
'@babel/runtime': 7.20.13
'@radix-ui/react-primitive': 1.0.1_biqbaboplfbrettd7655fr4n2y
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
@ -1282,7 +1283,7 @@ packages:
react: ^16.8 || ^17.0 || ^18.0
react-dom: ^16.8 || ^17.0 || ^18.0
dependencies:
'@babel/runtime': 7.20.1
'@babel/runtime': 7.20.13
'@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
'@radix-ui/react-use-layout-effect': 1.0.0_react@18.2.0
react: 18.2.0
@ -1295,7 +1296,7 @@ packages:
react: ^16.8 || ^17.0 || ^18.0
react-dom: ^16.8 || ^17.0 || ^18.0
dependencies:
'@babel/runtime': 7.20.1
'@babel/runtime': 7.20.13
'@radix-ui/react-slot': 1.0.1_react@18.2.0
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
@ -1307,7 +1308,7 @@ packages:
react: ^16.8 || ^17.0 || ^18.0
react-dom: ^16.8 || ^17.0 || ^18.0
dependencies:
'@babel/runtime': 7.20.1
'@babel/runtime': 7.20.13
'@radix-ui/primitive': 1.0.0
'@radix-ui/react-collection': 1.0.1_biqbaboplfbrettd7655fr4n2y
'@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
@ -1326,7 +1327,7 @@ packages:
peerDependencies:
react: ^16.8 || ^17.0 || ^18.0
dependencies:
'@babel/runtime': 7.20.1
'@babel/runtime': 7.20.13
'@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
react: 18.2.0
dev: false
@ -1380,7 +1381,7 @@ packages:
peerDependencies:
react: ^16.8 || ^17.0 || ^18.0
dependencies:
'@babel/runtime': 7.20.1
'@babel/runtime': 7.20.13
react: 18.2.0
dev: false
@ -1389,7 +1390,7 @@ packages:
peerDependencies:
react: ^16.8 || ^17.0 || ^18.0
dependencies:
'@babel/runtime': 7.20.1
'@babel/runtime': 7.20.13
'@radix-ui/react-use-callback-ref': 1.0.0_react@18.2.0
react: 18.2.0
dev: false
@ -1399,7 +1400,7 @@ packages:
peerDependencies:
react: ^16.8 || ^17.0 || ^18.0
dependencies:
'@babel/runtime': 7.20.1
'@babel/runtime': 7.20.13
'@radix-ui/react-use-callback-ref': 1.0.0_react@18.2.0
react: 18.2.0
dev: false
@ -1409,7 +1410,7 @@ packages:
peerDependencies:
react: ^16.8 || ^17.0 || ^18.0
dependencies:
'@babel/runtime': 7.20.1
'@babel/runtime': 7.20.13
react: 18.2.0
dev: false
@ -1418,7 +1419,7 @@ packages:
peerDependencies:
react: ^16.8 || ^17.0 || ^18.0
dependencies:
'@babel/runtime': 7.20.1
'@babel/runtime': 7.20.13
'@radix-ui/rect': 1.0.0
react: 18.2.0
dev: false
@ -1428,7 +1429,7 @@ packages:
peerDependencies:
react: ^16.8 || ^17.0 || ^18.0
dependencies:
'@babel/runtime': 7.20.1
'@babel/runtime': 7.20.13
'@radix-ui/react-use-layout-effect': 1.0.0_react@18.2.0
react: 18.2.0
dev: false
@ -1439,7 +1440,7 @@ packages:
react: ^16.8 || ^17.0 || ^18.0
react-dom: ^16.8 || ^17.0 || ^18.0
dependencies:
'@babel/runtime': 7.20.1
'@babel/runtime': 7.20.13
'@radix-ui/react-primitive': 1.0.1_biqbaboplfbrettd7655fr4n2y
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
@ -1448,7 +1449,7 @@ packages:
/@radix-ui/rect/1.0.0:
resolution: {integrity: sha512-d0O68AYy/9oeEy1DdC07bz1/ZXX+DqCskRd3i4JzLSTXwefzaepQrKjXC7aNM8lTHjFLDO0pDgaEiQ7jEk+HVg==}
dependencies:
'@babel/runtime': 7.20.1
'@babel/runtime': 7.20.13
dev: false
/@resvg/resvg-wasm/2.0.0-alpha.4:
@ -6184,6 +6185,16 @@ packages:
react: 18.2.0
dev: false
/react-error-boundary/3.1.4_react@18.2.0:
resolution: {integrity: sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==}
engines: {node: '>=10', npm: '>=6'}
peerDependencies:
react: '>=16.13.1'
dependencies:
'@babel/runtime': 7.20.13
react: 18.2.0
dev: false
/react-fast-compare/3.2.0:
resolution: {integrity: sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==}
@ -6334,13 +6345,8 @@ packages:
parse-entities: 4.0.0
dev: false
/regenerator-runtime/0.13.10:
resolution: {integrity: sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw==}
dev: false
/regenerator-runtime/0.13.11:
resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
dev: true
/regexp.prototype.flags/1.4.3:
resolution: {integrity: sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==}

49
src/app/components/error/fallback.tsx Normal file
View file

@ -0,0 +1,49 @@
"use client"
import Button from "@components/button"
import Note from "@components/note"
import { useRouter } from "next/navigation"
// an error fallback for react-error-boundary
import {
ErrorBoundary as ErrorBoundaryComponent,
FallbackProps,
ErrorBoundaryPropsWithFallback
} from "react-error-boundary"
function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
return (
<Note type="error" style={{ width: "100%" }}>
<h3>Something went wrong:</h3>
<pre>{error.message}</pre>
<Button onClick={resetErrorBoundary}>Try again</Button>
</Note>
)
}
export default function ErrorBoundary({
children,
onReset,
...props
}: {
children: React.ReactNode
onReset?: ErrorBoundaryPropsWithFallback["onReset"]
props?: ErrorBoundaryPropsWithFallback
}) {
const router = useRouter()
if (!onReset) {
onReset = () => {
router.refresh()
}
}
return (
<ErrorBoundaryComponent
onReset={onReset}
FallbackComponent={ErrorFallback}
{...props}
>
{children}
</ErrorBoundaryComponent>
)
}