From 450b82504ec4369c3321a00f9dcc54dba63fa940 Mon Sep 17 00:00:00 2001 From: Daniel Saewitz Date: Thu, 7 Sep 2023 14:26:22 -0400 Subject: [PATCH] Better 404 support --- package.json | 6 +++--- src/app/(main)/(home)/[artistSlug]/page.tsx | 12 ++++++++--- src/app/(main)/(home)/page.tsx | 5 +++-- src/app/(main)/error.tsx | 3 ++- src/app/(main)/not-found.tsx | 5 +++++ src/components/YearsColumn.tsx | 13 ++++++++--- yarn.lock | 24 ++++++++++----------- 7 files changed, 44 insertions(+), 24 deletions(-) create mode 100644 src/app/(main)/not-found.tsx diff --git a/package.json b/package.json index 620a28b..612c3f3 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "author": "Daniel Saewitz", "license": "MIT", "dependencies": { - "@floating-ui/react": "^0.25.3", + "@floating-ui/react": "^0.25.4", "@fortawesome/fontawesome-free": "^5.8.1", "@reduxjs/toolkit": "^1.9.5", "@tanstack/react-query": "^5.0.0-alpha.91", @@ -22,7 +22,7 @@ "@tanstack/react-query-next-experimental": "^5.0.0-alpha.91", "@types/react-redux": "^7.1.26", "clsx": "^2.0.0", - "core-js": "^3.32.1", + "core-js": "^3.32.2", "immutable": "4.3.2", "isomorphic-fetch": "3.0.0", "ky": "^1.0.1", @@ -34,7 +34,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-redux": "^8.1.2", - "react-timeago": "^7.1.0", + "react-timeago": "^7.2.0", "react-transition-group": "4.4.5", "redux": "^4.2.1", "tailwind-merge": "^1.14.0", diff --git a/src/app/(main)/(home)/[artistSlug]/page.tsx b/src/app/(main)/(home)/[artistSlug]/page.tsx index 64a22b1..7d83341 100644 --- a/src/app/(main)/(home)/[artistSlug]/page.tsx +++ b/src/app/(main)/(home)/[artistSlug]/page.tsx @@ -24,14 +24,20 @@ export default async function Page({ params }) { if (useIsMobile()) return null; - const randomShow = await fetchRandomShow(artistSlug); + const randomShow = await fetchRandomShow(artistSlug).catch((err) => { + const statusCode = err?.response?.status; - if (!randomShow) return null; + console.log('failed random show', artistSlug, statusCode); + + return null; + }); + + if (!randomShow) return notFound(); const { display_date } = randomShow ?? {}; const [year, month, day] = display_date?.split('-') ?? []; - if (!year || !month || !day) return null; + if (!year || !month || !day) return notFound(); return ( diff --git a/src/app/(main)/(home)/page.tsx b/src/app/(main)/(home)/page.tsx index 2227a7d..07f509a 100644 --- a/src/app/(main)/(home)/page.tsx +++ b/src/app/(main)/(home)/page.tsx @@ -6,6 +6,7 @@ import SongsColumn from '@/components/SongsColumn'; import TapesColumn from '@/components/TapesColumn'; import YearsColumn from '@/components/YearsColumn'; import { fetchRandomShow } from './[artistSlug]/page'; +import React from 'react'; export const useIsMobile = () => { const headersList = headers(); @@ -31,11 +32,11 @@ export default async function Page() { if (!year || !month || !day) return null; return ( - <> + - + ); } diff --git a/src/app/(main)/error.tsx b/src/app/(main)/error.tsx index c7a5a72..3c9844c 100644 --- a/src/app/(main)/error.tsx +++ b/src/app/(main)/error.tsx @@ -1,5 +1,6 @@ 'use client'; -export default function Error() { +export default function Error(err) { + console.log(err); return 'error...'; } diff --git a/src/app/(main)/not-found.tsx b/src/app/(main)/not-found.tsx new file mode 100644 index 0000000..fb6b19b --- /dev/null +++ b/src/app/(main)/not-found.tsx @@ -0,0 +1,5 @@ +'use client'; + +export default function NotFound() { + return '404 - Page Not Found'; +} diff --git a/src/components/YearsColumn.tsx b/src/components/YearsColumn.tsx index 237822f..7cd3ae9 100644 --- a/src/components/YearsColumn.tsx +++ b/src/components/YearsColumn.tsx @@ -8,15 +8,22 @@ import { API_DOMAIN } from '../lib/constants'; import { Year } from '../types'; import Column from './Column'; import Row from './Row'; +import { notFound } from 'next/navigation'; const fetchYears = async (slug?: string): Promise => { if (!slug) return []; - const parsed: Year[] = await ky(`${API_DOMAIN}/api/v2/artists/${slug}/years`, { + const parsed = await ky(`${API_DOMAIN}/api/v2/artists/${slug}/years`, { next: { revalidate: 60 * 5 }, - }).json(); + }) + .json() + .catch(() => { + notFound(); - return parsed; + return [] as Year[]; + }); + + return parsed ?? []; }; const YearsColumn = async ({ artistSlug }: Pick) => { diff --git a/yarn.lock b/yarn.lock index ef5156e..b22db9d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -123,10 +123,10 @@ dependencies: "@floating-ui/dom" "^1.5.1" -"@floating-ui/react@^0.25.3": - version "0.25.3" - resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.25.3.tgz#241b3a18d0e99e8fc25d581002646a6fd75d4c40" - integrity sha512-Ti3ClVZIUqZq1OCkfbhsBA8u3m8jJ0h9gAInFwdrLaa+yTAZx3bFH8YR+/wQwPmRrpgJJ3cRhCfx4puz0PqVIA== +"@floating-ui/react@^0.25.4": + version "0.25.4" + resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.25.4.tgz#82507e14460aee70f435ad2fd717ea182b6d5c61" + integrity sha512-lWRQ/UiTvSIBxohn0/2HFHEmnmOVRjl7j6XcRJuLH0ls6f/9AyHMWVzkAJFuwx0n9gaEeCmg9VccCSCJzbEJig== dependencies: "@floating-ui/react-dom" "^2.0.2" "@floating-ui/utils" "^0.1.1" @@ -1050,10 +1050,10 @@ concat-stream@^2.0.0: readable-stream "^3.0.2" typedarray "^0.0.6" -core-js@^3.32.1: - version "3.32.1" - resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.32.1.tgz#a7d8736a3ed9dd05940c3c4ff32c591bb735be77" - integrity sha512-lqufgNn9NLnESg5mQeYsxQP5w7wrViSj0jr/kv6ECQiByzQkrn1MKvV0L3acttpDqfQrHLwr2KCMgX5b8X+lyQ== +core-js@^3.32.2: + version "3.32.2" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.32.2.tgz#172fb5949ef468f93b4be7841af6ab1f21992db7" + integrity sha512-pxXSw1mYZPDGvTQqEc5vgIb83jGQKFGYWY76z4a7weZXUolw3G+OvpZqSRcfYOoOVUQJYEPsWeQK8pKEnUtWxQ== core_d@^5.0.1: version "5.0.1" @@ -3604,10 +3604,10 @@ react-redux@^8.1.2: react-is "^18.0.0" use-sync-external-store "^1.0.0" -react-timeago@^7.1.0: - version "7.1.0" - resolved "https://registry.yarnpkg.com/react-timeago/-/react-timeago-7.1.0.tgz#248bc6aa40a561249e756b2df402c94f1a296a85" - integrity sha512-rouF7MiEm55fH791Y8cg+VobIJgx8gtNJ+gjr86R4ZqO1WKPkXiXjdT/lRzrvEkUzsxT1exHqV2V+Zdi114H3A== +react-timeago@^7.2.0: + version "7.2.0" + resolved "https://registry.yarnpkg.com/react-timeago/-/react-timeago-7.2.0.tgz#ae929d7423a63cbc3dc228e49d22fbf586d459ca" + integrity sha512-2KsBEEs+qRhKx/kekUVNSTIpop3Jwd7SRBm0R4Eiq3mPeswRGSsftY9FpKsE/lXLdURyQFiHeHFrIUxLYskG5g== react-transition-group@4.4.5: version "4.4.5"