Merge pull request #404 from RagingCactus/frontend-error-pages

Add dedicated frontend error page when API_ENDPOINT points to the frontend

Author: Yooooomi

apps/client/src/App.tsx

@@ -20,7 +20,7 @@ import CollaborativeSongs from "./scenes/Collaborative/Affinity/Songs";
 import CollaborativeAlbums from "./scenes/Collaborative/Affinity/Albums";
 import CollaborativeArtists from "./scenes/Collaborative/Affinity/Artists";
 import "./App.css";
-import RegistrationsDisabled from "./scenes/RegistrationsDisabled";
+import RegistrationsDisabled from "./scenes/Error/RegistrationsDisabled";
 import Affinity from "./scenes/Collaborative/Affinity";
 import { useTheme } from "./services/theme";
 import { selectDarkMode } from "./services/redux/modules/user/selector";
@@ -29,6 +29,7 @@ import TrackStats from "./scenes/TrackStats";
 import LongestSessions from "./scenes/LongestSessions";
 import AlbumStats from "./scenes/AlbumStats";
 import Benchmarks from "./scenes/Benchmarks";
+import ApiEndpointSetToFronted from "./scenes/Error/ApiEndpointSetToFronted";
 
 function App() {
   const dark = useSelector(selectDarkMode);
@@ -82,6 +83,10 @@ function App() {
                 path="/registrations-disabled"
                 element={<RegistrationsDisabled />}
               />
+              <Route
+                path="/oauth/spotify" // Error page when someone accidentally configures their API_ENDPOINT to point to the frontend instead of the backend
+                element={<ApiEndpointSetToFronted />}
+              />
               <Route
                 path="/top/songs"
                 element={

apps/client/src/scenes/Error/ApiEndpointSetToFronted/ApiEndpointSetToFrontend.tsx

@@ -0,0 +1,22 @@
+import Text from "../../../components/Text";
+import s from "../index.module.css";
+import { getApiEndpoint } from "../../../services/tools";
+
+export default function ApiEndpointSetToFrontend() {
+  return (
+    <div className={s.root}>
+      <Text element="h1">API Endpoint is not set up correctly</Text>
+      <Text className={s.explain}>
+      This request should have reached the backend, but was handled by the
+      frontend instead.
+      <p />
+      This is usually because your &nbsp;<code>API_ENDPOINT</code>&nbsp;
+      variable points to the frontend instead of the backend.
+      Please double-check your configuration.
+      <p />
+      The current configuration is: <br />
+      <code>API_ENDPOINT={getApiEndpoint()}</code>
+      </Text>
+    </div>
+  );
+}

apps/client/src/scenes/Error/ApiEndpointSetToFronted/index.ts

@@ -0,0 +1 @@
+export { default } from "./ApiEndpointSetToFrontend";

apps/client/src/scenes/RegistrationsDisabled/RegistrationsDisabled.tsx renamed to apps/client/src/scenes/Error/RegistrationsDisabled/RegistrationsDisabled.tsx

@@ -1,5 +1,5 @@
-import Text from "../../components/Text";
-import s from "./index.module.css";
+import Text from "../../../components/Text";
+import s from "../index.module.css";
 
 export default function RegistrationsDisabled() {
   return (

apps/client/src/scenes/RegistrationsDisabled/index.ts renamed to apps/client/src/scenes/Error/RegistrationsDisabled/index.ts

@@ -19,7 +19,9 @@ export function getAtLeastImage(images: SpotifyImage[], size: number) {
 }
 
 // @ts-ignore
-export const getSpotifyLogUrl = () => `${window.API_ENDPOINT}/oauth/spotify`;
+export const getApiEndpoint = () => window.API_ENDPOINT as string;
+
+export const getSpotifyLogUrl = () => `${getApiEndpoint()}/oauth/spotify`;
 
 export const compact = <T>(arr: (T | undefined)[]): T[] =>
   arr.filter(a => a != null) as T[];