errors #96

app/README.md

@@ -34,4 +34,4 @@
 - [ ] migrate providers to zustand
 - [ ] sitemap
 - [ ] replace icons with lucide.dev icons
-- [ ] remove axios
+- [x] remove axios

app/app/[locale]/(rankings)/clans/[[...clansRankingsOptions]]/error.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import { ErrorDisplay } from "@/app/[locale]/_layout/ErrorDisplay"
+import { msg } from "@lingui/macro"
+import { useLingui } from "@lingui/react"
+
+export default function Error({
+    error,
+    reset,
+}: {
+    error: Error & { digest?: string }
+    reset: () => void
+}) {
+    const { _ } = useLingui()
+
+    return (
+        <ErrorDisplay
+            reset={reset}
+            title={_(msg`Failed to load the clan rankings :(`)}
+            error={error}
+        />
+    )
+}

app/app/[locale]/(rankings)/error.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import { ErrorDisplay } from "../_layout/ErrorDisplay"
+import { msg } from "@lingui/macro"
+import { useLingui } from "@lingui/react"
+
+export default function Error({
+    error,
+    reset,
+}: {
+    error: Error & { digest?: string }
+    reset: () => void
+}) {
+    const { _ } = useLingui()
+
+    return (
+        <ErrorDisplay
+            reset={reset}
+            title={_(msg`An unknown error occured :(`)}
+            error={error}
+        />
+    )
+}

app/app/[locale]/(rankings)/power-rankings/[[...rankingsOptions]]/error.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import { ErrorDisplay } from "@/app/[locale]/_layout/ErrorDisplay"
+import { msg } from "@lingui/macro"
+import { useLingui } from "@lingui/react"
+
+export default function Error({
+    error,
+    reset,
+}: {
+    error: Error & { digest?: string }
+    reset: () => void
+}) {
+    const { _ } = useLingui()
+
+    return (
+        <ErrorDisplay
+            reset={reset}
+            title={_(msg`Failed to load the power rankings :(`)}
+            error={error}
+        />
+    )
+}

app/app/[locale]/(rankings)/power-rankings/[[...rankingsOptions]]/page.tsx

@@ -1,3 +1,5 @@
 export default function RankingsRotatingPage() {
+    throw new Error("Not implemented")
+
     return <>Power rankings Coming soon™</>
 }

app/app/[locale]/(rankings)/ranked/[[...rankingsOptions]]/error.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import { ErrorDisplay } from "@/app/[locale]/_layout/ErrorDisplay"
+import { msg } from "@lingui/macro"
+import { useLingui } from "@lingui/react"
+
+export default function Error({
+    error,
+    reset,
+}: {
+    error: Error & { digest?: string }
+    reset: () => void
+}) {
+    const { _ } = useLingui()
+
+    return (
+        <ErrorDisplay
+            reset={reset}
+            title={_(msg`Failed to load the rankings :(`)}
+            error={error}
+        />
+    )
+}

app/app/[locale]/(rankings)/ranked/queue/error.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import { ErrorDisplay } from "@/app/[locale]/_layout/ErrorDisplay"
+import { msg } from "@lingui/macro"
+import { useLingui } from "@lingui/react"
+
+export default function Error({
+    error,
+    reset,
+}: {
+    error: Error & { digest?: string }
+    reset: () => void
+}) {
+    const { _ } = useLingui()
+
+    return (
+        <ErrorDisplay
+            reset={reset}
+            title={_(msg`Failed to load the ranked queue :(`)}
+            error={error}
+        />
+    )
+}

app/app/[locale]/(stats)/error.tsx

@@ -2,7 +2,6 @@
 
 import { ErrorDisplay } from "../_layout/ErrorDisplay"
 import { msg } from "@lingui/macro"
-import { useEffect } from "react"
 import { useLingui } from "@lingui/react"
 
 export default function Error({
@@ -13,9 +12,12 @@ export default function Error({
     reset: () => void
 }) {
     const { _ } = useLingui()
-    useEffect(() => {
-        // TODO: Log the error to an error reporting service
-    }, [error])
 
-    return <ErrorDisplay reset={reset} title={_(msg`Failed to fetch stats`)} />
+    return (
+        <ErrorDisplay
+            reset={reset}
+            title={_(msg`Failed to fetch stats`)}
+            error={error}
+        />
+    )
 }

app/app/[locale]/(stats)/player/[playerId]/2v2/TeamCard.tsx

@@ -26,7 +26,7 @@ const rankedBannerClassName = css({
     opacity: 0.08,
     transform: "translateX(25%) rotate(15deg)",
     zIndex: -1,
-})()
+})().className
 
 export const TeamCard = ({ playerId, team }: TeamCardProps) => {
     const { playerName, teammate } = getPlayerTeam(playerId, team)

app/app/[locale]/(stats)/player/[playerId]/PlayerStatsTabs.tsx

@@ -20,7 +20,7 @@ const tabClassName = cn(
             borderColor: theme.colors.text,
             color: theme.colors.text,
         },
-    })(),
+    })().className,
 )
 
 export const PlayerStatsTabs = () => {

app/app/[locale]/(stats)/player/[playerId]/layout.tsx

@@ -7,7 +7,7 @@ import { type ReactNode, cache } from "react"
 import { getPlayerRanked, getPlayerStats } from "bhapi"
 import { supabaseService } from "db/supabase/service"
 
-type PlayerStatsLayoutProps = {
+export type PlayerStatsLayoutProps = {
     children: ReactNode
     params: {
         playerId: string

app/app/[locale]/_layout/ErrorDisplay.tsx

@@ -2,16 +2,24 @@ import { Button } from "ui/base/Button"
 import { DiscordIcon, GithubIcon } from "ui/icons"
 import { SectionTitle } from "@/components/layout/SectionTitle"
 import { Trans } from "@lingui/macro"
+import { useEffect } from "react"
 
 type ErrorDisplayProps = {
     title?: string
     reset: () => void
+    error: Error & { digest?: string }
 }
 
 export const ErrorDisplay = ({
     title = "Oops, something went wrong",
     reset,
+    error,
 }: ErrorDisplayProps) => {
+    useEffect(() => {
+        console.log("error", error)
+        // TODO: Log the error to an error reporting service
+    }, [error])
+
     return (
         <div>
             <SectionTitle className="text-center">{title}</SectionTitle>

app/app/[locale]/_layout/SideNav.tsx

@@ -41,7 +41,7 @@ const sideNavIconClassName = css({
         top: "-0.375rem",
         right: "-0.375rem",
     },
-})()
+})().className
 
 const SideNavIcon = ({
     className,

app/app/[locale]/error.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import { ErrorDisplay } from "./_layout/ErrorDisplay"
+import { msg } from "@lingui/macro"
+import { useLingui } from "@lingui/react"
+
+export default function Error({
+    error,
+    reset,
+}: {
+    error: Error & { digest?: string }
+    reset: () => void
+}) {
+    const { _ } = useLingui()
+
+    return (
+        <ErrorDisplay
+            reset={reset}
+            title={_(msg`An unknown error occured :(`)}
+            error={error}
+        />
+    )
+}