wrap hit counter with an error boundary in case the API falls on its face again

.node-version

@@ -1 +1 @@
-20.10.0
+20.11.0

components/HitCounter/HitCounter.tsx

@@ -1,4 +1,5 @@
 import useSWRImmutable from "swr/immutable";
+import { useErrorBoundary } from "react-error-boundary";
 import commaNumber from "comma-number";
 import Loading from "../Loading";
 import fetcher from "../../lib/helpers/fetcher";
@@ -9,6 +10,8 @@ export type HitCounterProps = {
 };
 
 const HitCounter = ({ slug }: HitCounterProps) => {
+  const { showBoundary } = useErrorBoundary();
+
   // use immutable SWR to avoid double (or more) counting views:
   // https://swr.vercel.app/docs/revalidation#disable-automatic-revalidations
   const { data, error } = useSWRImmutable<PageStats>(
@@ -18,8 +21,9 @@ const HitCounter = ({ slug }: HitCounterProps) => {
     fetcher
   );
 
-  // fail secretly
+  // fail somewhat silently, see error boundary in NoteMeta component
   if (error) {
+    showBoundary(`${error}`);
     return null;
   }
 

components/NoteMeta/NoteMeta.tsx

@@ -1,3 +1,4 @@
+import { ErrorBoundary } from "react-error-boundary";
 import Link from "../Link";
 import Time from "../Time";
 import HitCounter from "../HitCounter";
@@ -106,8 +107,11 @@ const NoteMeta = ({ slug, date, title, htmlTitle, tags }: NoteMetaProps) => {
               marginRight: 0,
             }}
           >
-            <Icon as={FiEye} />
-            <HitCounter slug={`notes/${slug}`} />
+            {/* completely hide this block if anything goes wrong on the backend */}
+            <ErrorBoundary fallback={null}>
+              <Icon as={FiEye} />
+              <HitCounter slug={`notes/${slug}`} />
+            </ErrorBoundary>
           </MetaItem>
         )}
       </Wrapper>

package.json

@@ -23,9 +23,9 @@
     "@neondatabase/serverless": "^0.6.1",
     "@novnc/novnc": "1.4.0",
     "@octokit/graphql": "^7.0.2",
-    "@octokit/graphql-schema": "^14.47.0",
-    "@prisma/adapter-neon": "^5.8.0",
-    "@prisma/client": "^5.8.0",
+    "@octokit/graphql-schema": "^14.47.1",
+    "@prisma/adapter-neon": "^5.8.1",
+    "@prisma/client": "^5.8.1",
     "@react-spring/web": "^9.7.3",
     "@stitches/react": "1.3.1-1",
     "@vercel/edge": "^1.1.1",
@@ -38,7 +38,7 @@
     "formik": "^2.4.5",
     "geist": "^1.2.1",
     "gray-matter": "^4.0.3",
-    "next": "14.0.4",
+    "next": "14.1.0",
     "next-mdx-remote": "^4.4.1",
     "next-seo": "^6.4.0",
     "obj-str": "^1.1.0",
@@ -76,31 +76,31 @@
   "devDependencies": {
     "@jakejarvis/eslint-config": "^3.1.0",
     "@types/comma-number": "^2.1.2",
-    "@types/node": "^20.11.0",
+    "@types/node": "^20.11.5",
     "@types/novnc__novnc": "^1.3.4",
     "@types/prop-types": "^15.7.11",
-    "@types/react": "^18.2.47",
+    "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "@types/react-is": "^18.2.4",
     "@types/uglify-js": "^3.17.4",
     "@types/ws": "^8.5.10",
-    "@typescript-eslint/eslint-plugin": "^6.18.1",
-    "@typescript-eslint/parser": "^6.18.1",
+    "@typescript-eslint/eslint-plugin": "^6.19.0",
+    "@typescript-eslint/parser": "^6.19.0",
     "cross-env": "^7.0.3",
     "eslint": "~8.56.0",
-    "eslint-config-next": "14.0.4",
+    "eslint-config-next": "14.1.0",
     "eslint-config-prettier": "~9.1.0",
-    "eslint-plugin-mdx": "~3.1.4",
+    "eslint-plugin-mdx": "~3.1.5",
     "eslint-plugin-prettier": "~5.1.3",
     "lint-staged": "^15.2.0",
-    "prettier": "^3.1.1",
-    "prisma": "^5.8.0",
+    "prettier": "^3.2.4",
+    "prisma": "^5.8.1",
     "simple-git-hooks": "^2.9.0",
     "typescript": "^5.3.3",
     "uglify-js": "^3.17.4"
   },
   "optionalDependencies": {
-    "sharp": "^0.33.1"
+    "sharp": "^0.33.2"
   },
   "engines": {
     "node": ">=20.x"
@@ -117,9 +117,9 @@
       "eslint"
     ]
   },
-  "packageManager": "pnpm@8.14.0",
+  "packageManager": "pnpm@8.14.1",
   "volta": {
-    "node": "20.10.0",
-    "pnpm": "8.14.0"
+    "node": "20.11.0",
+    "pnpm": "8.14.1"
   }
 }