stroblmeandClaude Opus 5
32d8b42682
The same bundle is served by a portal under /i/{id}, so it reads its API base,
credential and router basepath from an injected config instead of the build-time
URL and localStorage. A normal installation finds no config and behaves exactly
as before; the credential deliberately never touches localStorage, since two
installations open in one browser share an origin and would overwrite each
other's session.
The websocket URL was resolving an absolute path against the base, which
discards the base's own path — harmless until the base gained one, then it
aimed the socket at the wrong host entirely.
Connection state gets a store of its own, apart from the engine's: the proxy's
503 carries {offline, last_seen}, which raises a banner naming when the
installation was last heard from and turns a failed mutation into 'not
delivered' rather than a generic error. The screen keeps its last data
underneath, since stale readings with a timestamp beat a blank page. A
reconnecting socket invalidates every query, because whatever happened while it
was down was missed.
Verified in a browser against a real hub and installation: the full UI loads
through the tunnel with no console errors, and killing the installation raises
the banner within a poll.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XtBzdDyLsmDaF1W7DLYtYM
92 lines
2.9 KiB
TypeScript
92 lines
2.9 KiB
TypeScript
import {
|
|
MutationCache,
|
|
QueryCache,
|
|
QueryClient,
|
|
QueryClientProvider,
|
|
} from "@tanstack/react-query"
|
|
import { createRouter, RouterProvider } from "@tanstack/react-router"
|
|
import { MotionConfig } from "motion/react"
|
|
import { StrictMode } from "react"
|
|
import ReactDOM from "react-dom/client"
|
|
import { ApiError, OpenAPI } from "./client"
|
|
import { ThemeProvider } from "./components/theme-provider"
|
|
import { Toaster } from "./components/ui/sonner"
|
|
import "./index.css"
|
|
import { connectionStore, offlineDetail } from "./lib/connectionStore"
|
|
import { apiToken, portalConfig } from "./lib/portal"
|
|
import { routeTree } from "./routeTree.gen"
|
|
|
|
const portal = portalConfig()
|
|
|
|
// Served through a portal, the API is a path on this same origin and the
|
|
// credential arrives with the page. Everywhere else this is the build-time URL
|
|
// and the token in storage, exactly as before.
|
|
OpenAPI.BASE = portal
|
|
? window.location.origin + portal.apiBase
|
|
: import.meta.env.VITE_API_URL
|
|
OpenAPI.TOKEN = async () => apiToken()
|
|
|
|
/** A session the server will not accept, whatever we do next. */
|
|
const isAuthFailure = (error: unknown) =>
|
|
error instanceof ApiError && [401, 403].includes(error.status)
|
|
|
|
const handleApiError = (error: Error) => {
|
|
const offline = offlineDetail(error)
|
|
if (offline) {
|
|
// The installation is unreachable, not the session invalid: keep the user
|
|
// where they are and let the banner explain.
|
|
connectionStore.setOffline(offline.lastSeen)
|
|
return
|
|
}
|
|
if (isAuthFailure(error)) {
|
|
if (portal) {
|
|
// The portal knows whether they are still signed in; it can mint a fresh
|
|
// handoff or send them to the login screen.
|
|
window.location.href = `${portal.portalUrl}?reauth=${portal.installationId}`
|
|
return
|
|
}
|
|
localStorage.removeItem("access_token")
|
|
window.location.href = "/login"
|
|
}
|
|
}
|
|
|
|
const queryClient = new QueryClient({
|
|
queryCache: new QueryCache({
|
|
onError: handleApiError,
|
|
// Any answer at all means the tunnel is up again.
|
|
onSuccess: () => connectionStore.setOnline(),
|
|
}),
|
|
mutationCache: new MutationCache({
|
|
onError: handleApiError,
|
|
}),
|
|
defaultOptions: {
|
|
queries: {
|
|
// Retrying an expired session only delays the trip to the login screen.
|
|
retry: (count, error) => !isAuthFailure(error) && count < 3,
|
|
},
|
|
mutations: {
|
|
retry: false,
|
|
},
|
|
},
|
|
})
|
|
|
|
const router = createRouter({ routeTree, basepath: portal?.basePath })
|
|
declare module "@tanstack/react-router" {
|
|
interface Register {
|
|
router: typeof router
|
|
}
|
|
}
|
|
|
|
ReactDOM.createRoot(document.getElementById("root")!).render(
|
|
<StrictMode>
|
|
<ThemeProvider defaultTheme="system" storageKey="fluksio-ui-theme">
|
|
<MotionConfig reducedMotion="user">
|
|
<QueryClientProvider client={queryClient}>
|
|
<RouterProvider router={router} />
|
|
<Toaster richColors closeButton />
|
|
</QueryClientProvider>
|
|
</MotionConfig>
|
|
</ThemeProvider>
|
|
</StrictMode>,
|
|
)
|