a8999aa0a0
### The problem Right now we use a catchall path in Vercel routing config to rewrite all requests that don't match existing assets to `/index.html`, which is needed for client side routing to work. This, however, messes up 404 errors for truly non-existing files which won't be handled by the SPA, because they get redirected to index.html. Even worse, this interacts very poorly with caching. Normally if we request a non-existent file, then put the file in place, and request the file again, we'll get 404 the first time and the actual file the second time. However, in our case we instead return `/index.html` after the first attempt and cache that response, making it impossible to correct a missing file without cache flush. ### The solution One way to fix this is to make the regex in Vercel config precise, so that they only match our SPA routes. However, it can be dangerous, because this means we'll need to manually update the config with new SPA routes every time we add any. This PR tests that regexes we're using in Vercel match all routes that we set in the SPA router. ### Potential future improvements It's very possible to generate Vercel's config from React Router routing objects, but at the moment it's not done because that would require importing most of dotcom during the build phase, which seem to cause errors. ### Change Type - [x] `internal` — Any other changes that don't affect the published package[^2] ### Test Plan 1. Might need a light smoke test after deployment to dotcom. - [x] End to end tests
58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
import { captureException } from '@sentry/react'
|
|
import { nanoid } from 'nanoid'
|
|
import { useEffect } from 'react'
|
|
import { createRoutesFromElements, Outlet, redirect, Route, useRouteError } from 'react-router-dom'
|
|
import { DefaultErrorFallback } from './components/DefaultErrorFallback/DefaultErrorFallback'
|
|
import { ErrorPage } from './components/ErrorPage/ErrorPage'
|
|
|
|
export const router = createRoutesFromElements(
|
|
<Route
|
|
element={
|
|
// Add all top level providers that require the router here
|
|
|
|
<Outlet />
|
|
}
|
|
ErrorBoundary={() => {
|
|
const error = useRouteError()
|
|
useEffect(() => {
|
|
captureException(error)
|
|
}, [error])
|
|
return (
|
|
<ErrorPage
|
|
messages={{
|
|
header: 'Something went wrong',
|
|
para1:
|
|
'Please try refreshing the page. Still having trouble? Let us know at hello@tldraw.com.',
|
|
}}
|
|
/>
|
|
)
|
|
}}
|
|
>
|
|
<Route errorElement={<DefaultErrorFallback />}>
|
|
<Route path="/" lazy={() => import('./pages/root')} />
|
|
<Route
|
|
path="/r"
|
|
loader={() => {
|
|
const id = 'v2' + nanoid()
|
|
return redirect(`/r/${id}`)
|
|
}}
|
|
/>
|
|
<Route
|
|
path="/new"
|
|
loader={() => {
|
|
const id = 'v2' + nanoid()
|
|
return redirect(`/r/${id}`)
|
|
}}
|
|
/>
|
|
<Route path="/r/:roomId" lazy={() => import('./pages/public-multiplayer')} />
|
|
<Route path="/r/:boardId/history" lazy={() => import('./pages/history')} />
|
|
<Route
|
|
path="/r/:boardId/history/:timestamp"
|
|
lazy={() => import('./pages/history-snapshot')}
|
|
/>
|
|
<Route path="/s/:roomId" lazy={() => import('./pages/public-snapshot')} />
|
|
<Route path="/v/:roomId" lazy={() => import('./pages/public-readonly')} />
|
|
</Route>
|
|
<Route path="*" lazy={() => import('./pages/not-found')} />
|
|
</Route>
|
|
)
|