Skip to content

Commit c9f8a7b

Browse files
brophdawg11brophdawg11
authoredJan 26, 2024
Add future flag to throw request.signal.reason for aborted requests (#11104)
·
v0.0.0-nightly-fa0068005-20250131create-react-router@6.26.2
1 parent cc40394 commit c9f8a7b

File tree

5 files changed

+270
-12
lines changed

5 files changed

+270
-12
lines changed
 

‎.changeset/throw-abort-reason.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"@remix-run/router": minor
3+
---
4+
5+
Add a `createStaticHandler` `future.v7_throwAbortReason` flag to throw `request.signal.reason` (defaults to a `DOMException`) when a request is aborted instead of an `Error` such as `new Error("query() call aborted: GET /path")`
6+
7+
- Please note that `DOMException` was added in Node v17 so you will not get a `DOMException` on Node 16 and below.

‎docs/guides/api-development-strategy.md

+19
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,23 @@ const router = createBrowserRouter(routes, {
7171
| `v7_prependBasename` | Prepend the router basename to navigate/fetch paths |
7272
| [`v7_relativeSplatPath`][relativesplatpath] | Fix buggy relative path resolution in splat routes |
7373

74+
#### `createStaticHandler` Future Flags
75+
76+
These flags are only applicable when [SSR][ssr]-ing a React Router app:
77+
78+
```js
79+
const handler = createStaticHandler(routes, {
80+
future: {
81+
v7_throwAbortReason: true,
82+
},
83+
});
84+
```
85+
86+
| Flag | Description |
87+
| ------------------------------------------- | ----------------------------------------------------------------------- |
88+
| [`v7_relativeSplatPath`][relativesplatpath] | Fix buggy relative path resolution in splat routes |
89+
| [`v7_throwAbortReason`][abortreason] | Throw `request.signal.reason` if a `query`/`queryRoute` call is aborted |
90+
7491
### React Router Future Flags
7592

7693
These flags apply to both Data and non-Data Routers and are passed to the rendered React component:
@@ -98,3 +115,5 @@ These flags apply to both Data and non-Data Routers and are passed to the render
98115
[starttransition]: https://react.dev/reference/react/startTransition
99116
[partialhydration]: ../routers/create-browser-router#partial-hydration-data
100117
[relativesplatpath]: ../hooks/use-resolved-path#splat-paths
118+
[ssr]: ../guides/ssr
119+
[abortreason]: ../routers/create-static-handler#handlerqueryrequest-opts

‎docs/routers/create-static-handler.md

+23-4
Original file line numberDiff line numberDiff line change
@@ -54,12 +54,27 @@ export async function renderHtml(req) {
5454

5555
```ts
5656
declare function createStaticHandler(
57-
routes: RouteObject[],
58-
opts?: {
59-
basename?: string;
60-
}
57+
routes: AgnosticRouteObject[],
58+
opts?: CreateStaticHandlerOptions
6159
): StaticHandler;
6260

61+
interface CreateStaticHandlerOptions {
62+
basename?: string;
63+
future?: Partial<StaticHandlerFutureConfig>;
64+
mapRouteProperties?: MapRoutePropertiesFunction;
65+
}
66+
67+
interface StaticHandlerFutureConfig {
68+
v7_relativeSplatPath: boolean;
69+
v7_throwAbortReason: boolean;
70+
}
71+
72+
interface MapRoutePropertiesFunction {
73+
(route: AgnosticRouteObject): {
74+
hasErrorBoundary: boolean;
75+
} & Record<string, any>;
76+
}
77+
6378
interface StaticHandler {
6479
dataRoutes: AgnosticDataRouteObject[];
6580
query(
@@ -86,6 +101,8 @@ These are the same `routes`/`basename` you would pass to [`createBrowserRouter`]
86101

87102
The `handler.query()` method takes in a Fetch request, performs route matching, and executes all relevant route action/loader methods depending on the request. The return `context` value contains all of the information required to render the HTML document for the request (route-level `actionData`, `loaderData`, `errors`, etc.). If any of the matched routes return or throw a redirect response, then `query()` will return that redirect in the form of Fetch `Response`.
88103

104+
If a request is aborted, `query` will throw an error such as `Error("query() call aborted: GET /path")`. If you want to throw the native `AbortSignal.reason` (by default a `DOMException`) you can opt-in into the `future.v7_throwAbortReason` future flag. `DOMException` was added in Node 17 so you must be on Node 17 or higher for this to work properly.
105+
89106
### `opts.requestContext`
90107

91108
If you need to pass information from your server into Remix actions/loaders, you can do so with `opts.requestContext` and it will show up in your actions/loaders in the context parameter.
@@ -115,6 +132,8 @@ export async function render(req: express.Request) {
115132

116133
The `handler.queryRoute` is a more-targeted version that queries a singular route and runs it's loader or action based on the request. By default, it will match the target route based on the request URL. The return value is the values returned from the loader or action, which is usually a `Response` object.
117134

135+
If a request is aborted, `query` will throw an error such as `Error("queryRoute() call aborted: GET /path")`. If you want to throw the native `AbortSignal.reason` (by default a `DOMException`) you can opt-in into the `future.v7_throwAbortReason` future flag. `DOMException` was added in Node 17 so you must be on Node 17 or higher for this to work properly.
136+
118137
### `opts.routeId`
119138

120139
If you need to call a specific route action/loader that doesn't exactly correspond to the URL (for example, a parent route loader), you can specify a `routeId`:

‎packages/router/__tests__/ssr-test.ts

+204
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
/**
2+
* @jest-environment node
3+
*/
4+
15
import type { StaticHandler, StaticHandlerContext } from "../router";
26
import { UNSAFE_DEFERRED_SYMBOL, createStaticHandler } from "../router";
37
import {
@@ -652,6 +656,106 @@ describe("ssr", () => {
652656
);
653657
});
654658

659+
it("should handle aborted load requests (v7_throwAbortReason=true)", async () => {
660+
let dfd = createDeferred();
661+
let controller = new AbortController();
662+
let { query } = createStaticHandler(
663+
[
664+
{
665+
id: "root",
666+
path: "/path",
667+
loader: () => dfd.promise,
668+
},
669+
],
670+
{ future: { v7_throwAbortReason: true } }
671+
);
672+
let request = createRequest("/path?key=value", {
673+
signal: controller.signal,
674+
});
675+
let e;
676+
try {
677+
let contextPromise = query(request);
678+
controller.abort();
679+
// This should resolve even though we never resolved the loader
680+
await contextPromise;
681+
} catch (_e) {
682+
e = _e;
683+
}
684+
// DOMException added in node 17
685+
if (process.versions.node.split(".").map(Number)[0] >= 17) {
686+
// eslint-disable-next-line jest/no-conditional-expect
687+
expect(e).toBeInstanceOf(DOMException);
688+
}
689+
expect(e.name).toBe("AbortError");
690+
expect(e.message).toBe("This operation was aborted");
691+
});
692+
693+
it("should handle aborted submit requests (v7_throwAbortReason=true)", async () => {
694+
let dfd = createDeferred();
695+
let controller = new AbortController();
696+
let { query } = createStaticHandler(
697+
[
698+
{
699+
id: "root",
700+
path: "/path",
701+
action: () => dfd.promise,
702+
},
703+
],
704+
{ future: { v7_throwAbortReason: true } }
705+
);
706+
let request = createSubmitRequest("/path?key=value", {
707+
signal: controller.signal,
708+
});
709+
let e;
710+
try {
711+
let contextPromise = query(request);
712+
controller.abort();
713+
// This should resolve even though we never resolved the loader
714+
await contextPromise;
715+
} catch (_e) {
716+
e = _e;
717+
}
718+
// DOMException added in node 17
719+
if (process.versions.node.split(".").map(Number)[0] >= 17) {
720+
// eslint-disable-next-line jest/no-conditional-expect
721+
expect(e).toBeInstanceOf(DOMException);
722+
}
723+
expect(e.name).toBe("AbortError");
724+
expect(e.message).toBe("This operation was aborted");
725+
});
726+
727+
it("should handle aborted requests (v7_throwAbortReason=true + custom reason)", async () => {
728+
let dfd = createDeferred();
729+
let controller = new AbortController();
730+
let { query } = createStaticHandler(
731+
[
732+
{
733+
id: "root",
734+
path: "/path",
735+
loader: () => dfd.promise,
736+
},
737+
],
738+
{ future: { v7_throwAbortReason: true } }
739+
);
740+
let request = createRequest("/path?key=value", {
741+
signal: controller.signal,
742+
});
743+
let e;
744+
try {
745+
let contextPromise = query(request);
746+
// Note this works in Node 18+ - but it does not work if using the
747+
// `abort-controller` polyfill which doesn't yet support a custom `reason`
748+
// See: https://github.com/mysticatea/abort-controller/issues/33
749+
controller.abort(new Error("Oh no!"));
750+
// This should resolve even though we never resolved the loader
751+
await contextPromise;
752+
} catch (_e) {
753+
e = _e;
754+
}
755+
expect(e).toBeInstanceOf(Error);
756+
expect(e.message).toBe("Oh no!");
757+
});
758+
655759
it("should assign signals to requests by default (per the", async () => {
656760
let { query } = createStaticHandler(SSR_ROUTES);
657761
let request = createRequest("/", { signal: undefined });
@@ -1951,6 +2055,106 @@ describe("ssr", () => {
19512055
);
19522056
});
19532057

2058+
it("should handle aborted load requests (v7_throwAbortReason=true)", async () => {
2059+
let dfd = createDeferred();
2060+
let controller = new AbortController();
2061+
let { queryRoute } = createStaticHandler(
2062+
[
2063+
{
2064+
id: "root",
2065+
path: "/path",
2066+
loader: () => dfd.promise,
2067+
},
2068+
],
2069+
{ future: { v7_throwAbortReason: true } }
2070+
);
2071+
let request = createRequest("/path?key=value", {
2072+
signal: controller.signal,
2073+
});
2074+
let e;
2075+
try {
2076+
let statePromise = queryRoute(request, { routeId: "root" });
2077+
controller.abort();
2078+
// This should resolve even though we never resolved the loader
2079+
await statePromise;
2080+
} catch (_e) {
2081+
e = _e;
2082+
}
2083+
// DOMException added in node 17
2084+
if (process.versions.node.split(".").map(Number)[0] >= 17) {
2085+
// eslint-disable-next-line jest/no-conditional-expect
2086+
expect(e).toBeInstanceOf(DOMException);
2087+
}
2088+
expect(e.name).toBe("AbortError");
2089+
expect(e.message).toBe("This operation was aborted");
2090+
});
2091+
2092+
it("should handle aborted submit requests (v7_throwAbortReason=true)", async () => {
2093+
let dfd = createDeferred();
2094+
let controller = new AbortController();
2095+
let { queryRoute } = createStaticHandler(
2096+
[
2097+
{
2098+
id: "root",
2099+
path: "/path",
2100+
action: () => dfd.promise,
2101+
},
2102+
],
2103+
{ future: { v7_throwAbortReason: true } }
2104+
);
2105+
let request = createSubmitRequest("/path?key=value", {
2106+
signal: controller.signal,
2107+
});
2108+
let e;
2109+
try {
2110+
let statePromise = queryRoute(request, { routeId: "root" });
2111+
controller.abort();
2112+
// This should resolve even though we never resolved the loader
2113+
await statePromise;
2114+
} catch (_e) {
2115+
e = _e;
2116+
}
2117+
// DOMException added in node 17
2118+
if (process.versions.node.split(".").map(Number)[0] >= 17) {
2119+
// eslint-disable-next-line jest/no-conditional-expect
2120+
expect(e).toBeInstanceOf(DOMException);
2121+
}
2122+
expect(e.name).toBe("AbortError");
2123+
expect(e.message).toBe("This operation was aborted");
2124+
});
2125+
2126+
it("should handle aborted load requests (v7_throwAbortReason=true + custom reason)", async () => {
2127+
let dfd = createDeferred();
2128+
let controller = new AbortController();
2129+
let { queryRoute } = createStaticHandler(
2130+
[
2131+
{
2132+
id: "root",
2133+
path: "/path",
2134+
loader: () => dfd.promise,
2135+
},
2136+
],
2137+
{ future: { v7_throwAbortReason: true } }
2138+
);
2139+
let request = createRequest("/path?key=value", {
2140+
signal: controller.signal,
2141+
});
2142+
let e;
2143+
try {
2144+
let statePromise = queryRoute(request, { routeId: "root" });
2145+
// Note this works in Node 18+ - but it does not work if using the
2146+
// `abort-controller` polyfill which doesn't yet support a custom `reason`
2147+
// See: https://github.com/mysticatea/abort-controller/issues/33
2148+
controller.abort(new Error("Oh no!"));
2149+
// This should resolve even though we never resolved the loader
2150+
await statePromise;
2151+
} catch (_e) {
2152+
e = _e;
2153+
}
2154+
expect(e).toBeInstanceOf(Error);
2155+
expect(e.message).toBe("Oh no!");
2156+
});
2157+
19542158
it("should assign signals to requests by default (per the spec)", async () => {
19552159
let { queryRoute } = createStaticHandler(SSR_ROUTES);
19562160
let request = createRequest("/", { signal: undefined });

‎packages/router/router.ts

+17-8
Original file line numberDiff line numberDiff line change
@@ -2834,6 +2834,7 @@ export const UNSAFE_DEFERRED_SYMBOL = Symbol("deferred");
28342834
*/
28352835
export interface StaticHandlerFutureConfig {
28362836
v7_relativeSplatPath: boolean;
2837+
v7_throwAbortReason: boolean;
28372838
}
28382839

28392840
export interface CreateStaticHandlerOptions {
@@ -2872,6 +2873,7 @@ export function createStaticHandler(
28722873
// Config driven behavior flags
28732874
let future: StaticHandlerFutureConfig = {
28742875
v7_relativeSplatPath: false,
2876+
v7_throwAbortReason: false,
28752877
...(opts ? opts.future : null),
28762878
};
28772879

@@ -3141,10 +3143,7 @@ export function createStaticHandler(
31413143
);
31423144

31433145
if (request.signal.aborted) {
3144-
let method = isRouteRequest ? "queryRoute" : "query";
3145-
throw new Error(
3146-
`${method}() call aborted: ${request.method} ${request.url}`
3147-
);
3146+
throwStaticHandlerAbortedError(request, isRouteRequest, future);
31483147
}
31493148
}
31503149

@@ -3312,10 +3311,7 @@ export function createStaticHandler(
33123311
]);
33133312

33143313
if (request.signal.aborted) {
3315-
let method = isRouteRequest ? "queryRoute" : "query";
3316-
throw new Error(
3317-
`${method}() call aborted: ${request.method} ${request.url}`
3318-
);
3314+
throwStaticHandlerAbortedError(request, isRouteRequest, future);
33193315
}
33203316

33213317
// Process and commit output from loaders
@@ -3380,6 +3376,19 @@ export function getStaticContextFromError(
33803376
return newContext;
33813377
}
33823378

3379+
function throwStaticHandlerAbortedError(
3380+
request: Request,
3381+
isRouteRequest: boolean,
3382+
future: StaticHandlerFutureConfig
3383+
) {
3384+
if (future.v7_throwAbortReason && request.signal.reason !== undefined) {
3385+
throw request.signal.reason;
3386+
}
3387+
3388+
let method = isRouteRequest ? "queryRoute" : "query";
3389+
throw new Error(`${method}() call aborted: ${request.method} ${request.url}`);
3390+
}
3391+
33833392
function isSubmissionNavigation(
33843393
opts: BaseNavigateOrFetchOptions
33853394
): opts is SubmissionNavigateOptions {

0 commit comments

Comments
 (0)
Please sign in to comment.