fix: bus selector inline error msg.

compose.production.yaml

@@ -1,12 +1,36 @@
 services:
   db:
-    restart: always
+    restart: unless-stopped
+    logging:
+      driver: json-file
+      options:
+        # Max disk usage 60MB
+        max-file: 3
+        max-size: 20m
   session:
-    restart: always
+    restart: unless-stopped
+    logging:
+      driver: json-file
+      options:
+        # Max disk usage 60MB
+        max-file: 3
+        max-size: 20m
   api:
-    restart: always
+    restart: unless-stopped
+    logging:
+      driver: json-file
+      options:
+        # Max disk usage 100MB
+        max-file: 5
+        max-size: 20m
     environment:
       NODE_ENV: production
       DEBUG: ""
   stage:
-    restart: always
+    restart: unless-stopped
+    logging:
+      driver: json-file
+      options:
+        # Max disk usage 100MB
+        max-file: 5
+        max-size: 20m

packages/api/src/index.ts

@@ -1,4 +1,4 @@
-import { env } from 'node:process'
+import { env, exit } from 'node:process'
 import http from 'node:http'
 
 import makeDebug from 'debug'
@@ -53,6 +53,7 @@ if (env.BM_SESSION_STORE === 'redis') {
   } catch (err) {
     // eslint-disable-next-line no-console
     console.error(`Redis client failed to connect: ${err}`)
+    exit(1)
   }
 }
 

packages/ui/src/components/busSelector.tsx

@@ -9,6 +9,7 @@ import { Agencies } from './selectors/agencies.js'
 import { Routes } from './selectors/routes.js'
 import { Directions } from './selectors/directions.js'
 import { Stops } from './selectors/stops.js'
+import { SelectorError } from './error/selector.js'
 
 import { useGlobals } from '../globals.js'
 import { useMap } from '../contexts/map.js'
@@ -279,17 +280,9 @@ const BusSelector = memo(function BusSelector({ agencies }: BusSelectorProps) {
     }
   }, [dispatch, homeStop, agencies, agency, routeName, routes, route, direction, stop])
 
-  if (error instanceof Error) {
-    return (
-      <div style={{ padding: '20px' }}>
-        <p>An error occured while getting agency and route information:</p>
-        <p>{error.message}</p>
-      </div>
-    )
-  }
-
   return (
     <Page title="Bus Selector">
+      {error instanceof Error && <SelectorError err={error} />}
       <Form
         onSubmit={evt => {
           evt.preventDefault()

packages/ui/src/components/error/selector.tsx

@@ -0,0 +1,28 @@
+import styled from 'styled-components'
+import { Alert } from '@busmap/components/alert'
+
+import { errors } from '@core/api/errors.js'
+
+import type { FC } from 'react'
+
+interface SelectorErrorProps {
+  err: Error
+}
+
+const Text = styled.p`
+  && {
+    margin: 0 0 10px;
+  }
+`
+const SelectorError: FC<SelectorErrorProps> = ({ err }) => {
+  const message = errors.getMessage(err)
+
+  return (
+    <Alert type="error">
+      <Text>An error occured while getting agency and route information:</Text>
+      <Text>{message}</Text>
+    </Alert>
+  )
+}
+
+export { SelectorError }