Skip to content

fix(router-core): handle AbortError in router execution flow #4570

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

fix(router-core): handle AbortError in router execution flow #4570

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
938b41e
fix(router-core): handle AbortError in router execution flow
leesb971204 Jul 3, 2025
e2a8074
test(react-router): add test for AbortError handling in loader with b…
leesb971204 Jul 4, 2025
8c8f463
test(solid-router): add test for AbortError handling in loader with b…
leesb971204 Jul 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 27 additions & 1 deletion packages/react-router/tests/loaders.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -429,7 +429,7 @@ test('reproducer #4546', async () => {
component: () => {
return (
<>
<div className="p-2 flex gap-2 text-lg">
<div className="flex gap-2 p-2 text-lg">
<Link
data-testid="link-to-index"
to="/"
Expand Down Expand Up @@ -645,3 +645,29 @@ test('reproducer #4546', async () => {
expect(loaderData).toHaveTextContent('5')
}
})

test('throw abortError from loader upon initial load with basepath', async () => {
const rootRoute = createRootRoute({})

const indexRoute = createRoute({
getParentRoute: () => rootRoute,
path: '/',
loader: async () => {
return Promise.reject(new DOMException('Aborted', 'AbortError'))
},
component: () => <div>Index route content</div>,
errorComponent: () => (
<div data-testid="index-error">indexErrorComponent</div>
),
})

const routeTree = rootRoute.addChildren([indexRoute])
const router = createRouter({ routeTree, history, basepath: '/app' })

render(<RouterProvider router={router} />)

const indexElement = await screen.findByText('Index route content')
expect(indexElement).toBeInTheDocument()
expect(screen.queryByTestId('index-error')).not.toBeInTheDocument()
expect(window.location.pathname.startsWith('/app')).toBe(true)
})
16 changes: 16 additions & 0 deletions packages/router-core/src/router.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2511,6 +2511,22 @@ export class RouterCore<
...head,
}))
} catch (e) {
if (
e instanceof DOMException &&
e.name === 'AbortError'
) {
const head = await executeHead()
updateMatch(matchId, (prev) => ({
...prev,
status:
prev.status === 'pending'
? 'success'
: prev.status,
...head,
}))
return
}

Comment on lines +2514 to +2529
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

According to the documentation, the abortController.abort() method throws an Error object of type DOMException with the name AbortError.
When this error is thrown during route loading, it is treated as a normal control flow and the route is updated to a valid state accordingly.

Copy link
Contributor Author

@leesb971204 leesb971204 Jul 3, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@SeanCassiere

I noticed you’ve explored similar concerns before(#4531), so I think it would be great to discuss this approach together.

let error = e

await potentialPendingMinPromise()
Expand Down
26 changes: 26 additions & 0 deletions packages/solid-router/tests/loaders.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -317,3 +317,29 @@ test('throw error from beforeLoad when navigating to route', async () => {
const indexElement = await screen.findByText('fooErrorComponent')
expect(indexElement).toBeInTheDocument()
})

test('throw abortError from loader upon initial load with basepath', async () => {
const rootRoute = createRootRoute({})

const indexRoute = createRoute({
getParentRoute: () => rootRoute,
path: '/',
loader: async () => {
return Promise.reject(new DOMException('Aborted', 'AbortError'))
},
component: () => <div>Index route content</div>,
errorComponent: () => (
<div data-testid="index-error">indexErrorComponent</div>
),
})

const routeTree = rootRoute.addChildren([indexRoute])
const router = createRouter({ routeTree, basepath: '/app' })

render(() => <RouterProvider router={router} />)

const indexElement = await screen.findByText('Index route content')
expect(indexElement).toBeInTheDocument()
expect(screen.queryByTestId('index-error')).not.toBeInTheDocument()
expect(window.location.pathname.startsWith('/app')).toBe(true)
})