fix: preserve render-thrown notFound errors#7077
Conversation
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughAnnotates framework-thrown Changes
Sequence DiagramsequenceDiagram
participant RouteComponent as Route Component
participant CatchBoundary as Catch / NotFound Boundary
participant RouteMatch as Route Match State
participant NotFoundHandler as Route NotFound Component
RouteComponent->>CatchBoundary: throw notFound()
CatchBoundary->>RouteMatch: read currentMatchState().routeId
CatchBoundary->>CatchBoundary: error.routeId ??= matchState.routeId
CatchBoundary->>NotFoundHandler: invoke fallback / render with annotated error
NotFoundHandler->>RouteMatch: compare error.routeId vs currentMatch.routeId
alt routeId matches current route
NotFoundHandler->>NotFoundHandler: render route's notFoundComponent
else routeId doesn't match
NotFoundHandler->>CatchBoundary: rethrow to parent boundary
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
|
View your CI Pipeline Execution ↗ for commit a8b1068
☁️ Nx Cloud last updated this comment at |
🚀 Changeset Version Preview4 package(s) bumped directly, 18 bumped as dependents. 🟩 Patch bumps
|
Bundle Size Benchmarks
Trend sparkline is historical gzip bytes ending with this PR measurement; lower is better. |
269a34e to
f07ccba
Compare
There was a problem hiding this comment.
❌ The fix was rejected
We add a dedicated NotFoundErrorPlugin for seroval that must be registered before ShallowErrorPlugin, because notFound() now returns an Error instance and ShallowErrorPlugin only preserves the message property — silently dropping isNotFound, routeId, data, and other metadata on every SSR/hydration cycle. This fix ensures all NotFoundError properties survive dehydration and rehydration, restoring correct not-found boundary resolution on the client.
Suggested Fix changes
diff --git a/packages/router-core/src/ssr/serializer/NotFoundErrorPlugin.ts b/packages/router-core/src/ssr/serializer/NotFoundErrorPlugin.ts
new file mode 100644
index 0000000000..5947d88e02
--- /dev/null
+++ b/packages/router-core/src/ssr/serializer/NotFoundErrorPlugin.ts
@@ -0,0 +1,81 @@
+import { createPlugin } from 'seroval'
+import type { SerovalNode } from 'seroval'
+
+interface NotFoundNode {
+ message: SerovalNode
+ routeId: SerovalNode
+ data: SerovalNode
+ global: SerovalNode
+ _global: SerovalNode
+}
+
+/**
+ * Serializes NotFoundError instances (objects with `isNotFound: true`) so that
+ * all router metadata (routeId, data, global, _global) survives SSR dehydration
+ * and client-side hydration. This plugin must be registered before
+ * ShallowErrorPlugin because notFound() now returns an Error subclass – without
+ * this plugin ShallowErrorPlugin would match first and strip all custom
+ * properties, keeping only `message`.
+ */
+export const NotFoundErrorPlugin = /* @__PURE__ */ createPlugin<
+ any,
+ NotFoundNode
+>({
+ tag: '$TSR/NotFoundError',
+ test(value) {
+ return !!value?.isNotFound
+ },
+ parse: {
+ sync(value, ctx) {
+ return {
+ message: ctx.parse(value.message),
+ routeId: ctx.parse(value.routeId),
+ data: ctx.parse(value.data),
+ global: ctx.parse(value.global),
+ _global: ctx.parse(value._global),
+ }
+ },
+ async async(value, ctx) {
+ return {
+ message: await ctx.parse(value.message),
+ routeId: await ctx.parse(value.routeId),
+ data: await ctx.parse(value.data),
+ global: await ctx.parse(value.global),
+ _global: await ctx.parse(value._global),
+ }
+ },
+ stream(value, ctx) {
+ return {
+ message: ctx.parse(value.message),
+ routeId: ctx.parse(value.routeId),
+ data: ctx.parse(value.data),
+ global: ctx.parse(value.global),
+ _global: ctx.parse(value._global),
+ }
+ },
+ },
+ serialize(node, ctx) {
+ return (
+ 'Object.assign(new Error(' +
+ ctx.serialize(node.message) +
+ '),{isNotFound:true,routeId:' +
+ ctx.serialize(node.routeId) +
+ ',data:' +
+ ctx.serialize(node.data) +
+ ',global:' +
+ ctx.serialize(node.global) +
+ ',_global:' +
+ ctx.serialize(node._global) +
+ '})'
+ )
+ },
+ deserialize(node, ctx) {
+ return Object.assign(new Error(ctx.deserialize(node.message) as string), {
+ isNotFound: true,
+ routeId: ctx.deserialize(node.routeId),
+ data: ctx.deserialize(node.data),
+ global: ctx.deserialize(node.global),
+ _global: ctx.deserialize(node._global),
+ })
+ },
+})
diff --git a/packages/router-core/src/ssr/serializer/seroval-plugins.ts b/packages/router-core/src/ssr/serializer/seroval-plugins.ts
index de10d3bdc0..7df43fc048 100644
--- a/packages/router-core/src/ssr/serializer/seroval-plugins.ts
+++ b/packages/router-core/src/ssr/serializer/seroval-plugins.ts
@@ -1,9 +1,14 @@
import { ReadableStreamPlugin } from 'seroval-plugins/web'
+import { NotFoundErrorPlugin } from './NotFoundErrorPlugin'
import { ShallowErrorPlugin } from './ShallowErrorPlugin'
import { RawStreamSSRPlugin } from './RawStream'
import type { Plugin } from 'seroval'
export const defaultSerovalPlugins = [
+ // NotFoundErrorPlugin must come before ShallowErrorPlugin: notFound() now
+ // returns an Error instance, and ShallowErrorPlugin would otherwise match it
+ // first and strip all custom properties (isNotFound, routeId, data, etc.).
+ NotFoundErrorPlugin as Plugin<any, any>,
ShallowErrorPlugin as Plugin<Error, any>,
// RawStreamSSRPlugin must come before ReadableStreamPlugin to match first
RawStreamSSRPlugin,
View interactive diff ↗
➡️ This fix was rejected by manuel.schiller@caligano.de
🎓 Learn more about Self-Healing CI on nx.dev
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/solid-router/src/not-found.tsx (1)
16-17: Use a typedcauseguard instead ofanycasting.Lines 16–17 bypass strict typing with
as anywhen accessing thecauseproperty on an unknown error object. A type guard maintains the same behavior while preserving type safety and complying with the TypeScript strict mode guideline.Proposed refactor
+function getErrorCause(error: unknown): unknown { + if (typeof error === 'object' && error !== null && 'cause' in error) { + return (error as { cause?: unknown }).cause + } + return undefined +} + export function getNotFound( error: unknown, ): (NotFoundError & { isNotFound: true }) | undefined { if (isNotFound(error)) { return error as NotFoundError & { isNotFound: true } } - if (isNotFound((error as any)?.cause)) { - return (error as any).cause as NotFoundError & { isNotFound: true } + const cause = getErrorCause(error) + if (isNotFound(cause)) { + return cause as NotFoundError & { isNotFound: true } } return undefined }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/solid-router/src/not-found.tsx` around lines 16 - 17, The code uses `as any` to access `cause` on an unknown `error`; replace this with a proper type guard so we don't bypass strict typing. Add a small guard like `function hasCause(e: unknown): e is { cause: unknown }` (or update `isNotFound` to accept `unknown` and act as a type predicate for `NotFoundError & { isNotFound: true }`), then change the branch to `if (hasCause(error) && isNotFound(error.cause)) return error.cause` (no `as any`), ensuring `isNotFound` is a type predicate so the returned value is correctly typed as `NotFoundError & { isNotFound: true }`.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/solid-router/src/not-found.tsx`:
- Around line 37-40: The onCatch callback type must match the actual value
passed from getNotFound; update the component's prop type for onCatch to accept
NotFoundError (or Error | NotFoundError if you prefer a broader contract)
instead of (error: Error) => void, adjust any related type alias/props interface
where onCatch is declared, and then remove the unsafe "as any" cast in the
props.onCatch invocation where getNotFound is called (referencing getNotFound,
NotFoundError, and props.onCatch to locate the changes).
---
Nitpick comments:
In `@packages/solid-router/src/not-found.tsx`:
- Around line 16-17: The code uses `as any` to access `cause` on an unknown
`error`; replace this with a proper type guard so we don't bypass strict typing.
Add a small guard like `function hasCause(e: unknown): e is { cause: unknown }`
(or update `isNotFound` to accept `unknown` and act as a type predicate for
`NotFoundError & { isNotFound: true }`), then change the branch to `if
(hasCause(error) && isNotFound(error.cause)) return error.cause` (no `as any`),
ensuring `isNotFound` is a type predicate so the returned value is correctly
typed as `NotFoundError & { isNotFound: true }`.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 3f6ec326-de3b-441d-9e8c-7b862d491fc6
📒 Files selected for processing (8)
.changeset/funny-doors-smile.mdpackages/react-router/src/Match.tsxpackages/react-router/tests/not-found.test.tsxpackages/solid-router/src/Match.tsxpackages/solid-router/src/not-found.tsxpackages/solid-router/tests/not-found.test.tsxpackages/vue-router/src/Match.tsxpackages/vue-router/tests/not-found.test.tsx
✅ Files skipped from review due to trivial changes (3)
- .changeset/funny-doors-smile.md
- packages/vue-router/tests/not-found.test.tsx
- packages/solid-router/tests/not-found.test.tsx
🚧 Files skipped from review as they are similar to previous changes (4)
- packages/react-router/src/Match.tsx
- packages/vue-router/src/Match.tsx
- packages/react-router/tests/not-found.test.tsx
- packages/solid-router/src/Match.tsx
Summary by CodeRabbit
Bug Fixes
Tests