test(vue-start): serialization-adapters e2e suite #6126
Conversation
WalkthroughIntroduces a complete Vue end-to-end test suite for serialization adapters. Adds project configuration, TanStack Router setup, multiple route modules testing SSR and server-function scenarios with custom error and data adapters, and Playwright tests validating serialization behavior across various data types and control flows. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
View your CI Pipeline Execution ↗ for commit 0ed8ed9
☁️ Nx Cloud last updated this comment at |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (5)
e2e/vue-start/serialization-adapters/src/router.tsx (1)
4-11: Consider adding an explicit return type annotation.While TypeScript can infer the return type, adding an explicit return type would improve code clarity and provide better IDE support.
Apply this diff to add a return type:
+import type { Router } from '@tanstack/vue-router' + -export function getRouter() { +export function getRouter(): Router { const router = createRouter({ routeTree, scrollRestoration: true, }) return router }e2e/vue-start/serialization-adapters/src/routes/server-function/nested.tsx (1)
18-27: Consider using async/await for cleaner async handling.While the current
.then()approach works, usingasync/awaitwould make the async flow more readable and maintainable.Apply this diff to use async/await:
<button data-testid="server-function-trigger" - onClick={() => - serverFnReturningNested().then( - (res) => (nestedResponse.value = res), - ) - } + onClick={async () => { + const res = await serverFnReturningNested() + nestedResponse.value = res + }} > trigger </button>e2e/vue-start/serialization-adapters/src/routes/server-function/custom-error.tsx (1)
22-23: Consider a more specific type forvalidResponse.Using
anyreduces type safety. Since the server function returns'Hello, world!'on success, this could be typed more precisely.- const validResponse = ref<any>(null) + const validResponse = ref<string | null>(null)e2e/vue-start/serialization-adapters/src/routes/__root.tsx (1)
35-35: Consider typing the slots parameter for better type safety.The
slotsparameter is typed asany, which bypasses TypeScript's type checking. For strict mode compliance, consider using a more specific type.Apply this diff to improve type safety:
-function RootDocument(_: unknown, { slots }: { slots: any }) { +function RootDocument(_: unknown, { slots }: { slots: { default?: () => any } }) {e2e/vue-start/serialization-adapters/src/data.tsx (1)
161-205: Remove unnecessary block scope.The function body is wrapped in an extra block scope starting at Line 162, which is redundant since the function body already provides the necessary scope.
Apply this diff to remove the unnecessary block:
export function RenderNestedData({ nested }: { nested: NestedOuter }) { - { - const localData = makeNested() - const expectedShoutState = localData.inner.shout() - const expectedWhisperState = localData.whisper() - const shoutState = nested.inner.shout() - const whisperState = nested.whisper() + const localData = makeNested() + const expectedShoutState = localData.inner.shout() + const expectedWhisperState = localData.whisper() + const shoutState = nested.inner.shout() + const whisperState = nested.whisper() - return ( - <div data-testid="data-only-container"> + return ( + <div data-testid="data-only-container"> ... - </div> - ) - } + </div> + ) }
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (21)
e2e/vue-start/serialization-adapters/.gitignore(1 hunks)e2e/vue-start/serialization-adapters/.prettierignore(1 hunks)e2e/vue-start/serialization-adapters/package.json(1 hunks)e2e/vue-start/serialization-adapters/playwright.config.ts(1 hunks)e2e/vue-start/serialization-adapters/postcss.config.mjs(1 hunks)e2e/vue-start/serialization-adapters/src/CustomError.ts(1 hunks)e2e/vue-start/serialization-adapters/src/data.tsx(1 hunks)e2e/vue-start/serialization-adapters/src/routeTree.gen.ts(1 hunks)e2e/vue-start/serialization-adapters/src/router.tsx(1 hunks)e2e/vue-start/serialization-adapters/src/routes/__root.tsx(1 hunks)e2e/vue-start/serialization-adapters/src/routes/index.tsx(1 hunks)e2e/vue-start/serialization-adapters/src/routes/server-function/custom-error.tsx(1 hunks)e2e/vue-start/serialization-adapters/src/routes/server-function/nested.tsx(1 hunks)e2e/vue-start/serialization-adapters/src/routes/ssr/data-only.tsx(1 hunks)e2e/vue-start/serialization-adapters/src/routes/ssr/nested.tsx(1 hunks)e2e/vue-start/serialization-adapters/src/routes/ssr/stream.tsx(1 hunks)e2e/vue-start/serialization-adapters/src/start.tsx(1 hunks)e2e/vue-start/serialization-adapters/src/styles/app.css(1 hunks)e2e/vue-start/serialization-adapters/tests/app.spec.ts(1 hunks)e2e/vue-start/serialization-adapters/tsconfig.json(1 hunks)e2e/vue-start/serialization-adapters/vite.config.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript strict mode with extensive type safety for all code
Files:
e2e/vue-start/serialization-adapters/src/router.tsxe2e/vue-start/serialization-adapters/src/start.tsxe2e/vue-start/serialization-adapters/src/routes/server-function/custom-error.tsxe2e/vue-start/serialization-adapters/src/routes/__root.tsxe2e/vue-start/serialization-adapters/src/routes/server-function/nested.tsxe2e/vue-start/serialization-adapters/vite.config.tse2e/vue-start/serialization-adapters/src/routes/ssr/stream.tsxe2e/vue-start/serialization-adapters/tests/app.spec.tse2e/vue-start/serialization-adapters/src/routes/ssr/nested.tsxe2e/vue-start/serialization-adapters/src/routes/index.tsxe2e/vue-start/serialization-adapters/src/data.tsxe2e/vue-start/serialization-adapters/src/CustomError.tse2e/vue-start/serialization-adapters/src/routeTree.gen.tse2e/vue-start/serialization-adapters/playwright.config.tse2e/vue-start/serialization-adapters/src/routes/ssr/data-only.tsx
**/*.{js,ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Implement ESLint rules for router best practices using the ESLint plugin router
Files:
e2e/vue-start/serialization-adapters/src/router.tsxe2e/vue-start/serialization-adapters/src/start.tsxe2e/vue-start/serialization-adapters/src/routes/server-function/custom-error.tsxe2e/vue-start/serialization-adapters/src/routes/__root.tsxe2e/vue-start/serialization-adapters/src/routes/server-function/nested.tsxe2e/vue-start/serialization-adapters/vite.config.tse2e/vue-start/serialization-adapters/src/routes/ssr/stream.tsxe2e/vue-start/serialization-adapters/tests/app.spec.tse2e/vue-start/serialization-adapters/src/routes/ssr/nested.tsxe2e/vue-start/serialization-adapters/src/routes/index.tsxe2e/vue-start/serialization-adapters/src/data.tsxe2e/vue-start/serialization-adapters/src/CustomError.tse2e/vue-start/serialization-adapters/src/routeTree.gen.tse2e/vue-start/serialization-adapters/playwright.config.tse2e/vue-start/serialization-adapters/src/routes/ssr/data-only.tsx
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
Use workspace protocol
workspace:*for internal dependencies in package.json files
Files:
e2e/vue-start/serialization-adapters/package.json
🧠 Learnings (10)
📓 Common learnings
Learnt from: nlynzaad
Repo: TanStack/router PR: 5402
File: packages/router-generator/tests/generator/no-formatted-route-tree/routeTree.nonnested.snapshot.ts:19-21
Timestamp: 2025-10-08T08:11:47.088Z
Learning: Test snapshot files in the router-generator tests directory (e.g., files matching the pattern `packages/router-generator/tests/generator/**/routeTree*.snapshot.ts` or `routeTree*.snapshot.js`) should not be modified or have issues flagged, as they are fixtures used to verify the generator's output and are intentionally preserved as-is.
Learnt from: FatahChan
Repo: TanStack/router PR: 5475
File: e2e/react-start/basic-prerendering/src/routes/redirect/$target/via-beforeLoad.tsx:8-0
Timestamp: 2025-10-14T18:59:33.990Z
Learning: In TanStack Router e2e test files, when a route parameter is validated at the route level (e.g., using zod in validateSearch or param validation), switch statements on that parameter do not require a default case, as the validation ensures only expected values will reach the switch.
📚 Learning: 2025-11-02T16:16:24.898Z
Learnt from: nlynzaad
Repo: TanStack/router PR: 5732
File: packages/start-client-core/src/client/hydrateStart.ts:6-9
Timestamp: 2025-11-02T16:16:24.898Z
Learning: In packages/start-client-core/src/client/hydrateStart.ts, the `import/no-duplicates` ESLint disable is necessary for imports from `#tanstack-router-entry` and `#tanstack-start-entry` because both aliases resolve to the same placeholder file (`fake-start-entry.js`) in package.json during static analysis, even though they resolve to different files at runtime.
Applied to files:
e2e/vue-start/serialization-adapters/package.jsone2e/vue-start/serialization-adapters/src/start.tsxe2e/vue-start/serialization-adapters/.prettierignoree2e/vue-start/serialization-adapters/src/routes/index.tsxe2e/vue-start/serialization-adapters/tsconfig.jsone2e/vue-start/serialization-adapters/src/routeTree.gen.ts
📚 Learning: 2025-10-08T08:11:47.088Z
Learnt from: nlynzaad
Repo: TanStack/router PR: 5402
File: packages/router-generator/tests/generator/no-formatted-route-tree/routeTree.nonnested.snapshot.ts:19-21
Timestamp: 2025-10-08T08:11:47.088Z
Learning: Test snapshot files in the router-generator tests directory (e.g., files matching the pattern `packages/router-generator/tests/generator/**/routeTree*.snapshot.ts` or `routeTree*.snapshot.js`) should not be modified or have issues flagged, as they are fixtures used to verify the generator's output and are intentionally preserved as-is.
Applied to files:
e2e/vue-start/serialization-adapters/src/routes/server-function/custom-error.tsxe2e/vue-start/serialization-adapters/src/routes/__root.tsxe2e/vue-start/serialization-adapters/src/routes/ssr/stream.tsxe2e/vue-start/serialization-adapters/tests/app.spec.tse2e/vue-start/serialization-adapters/src/routes/ssr/nested.tsxe2e/vue-start/serialization-adapters/.prettierignoree2e/vue-start/serialization-adapters/src/routes/index.tsxe2e/vue-start/serialization-adapters/src/routeTree.gen.tse2e/vue-start/serialization-adapters/src/routes/ssr/data-only.tsx
📚 Learning: 2025-10-14T18:59:33.990Z
Learnt from: FatahChan
Repo: TanStack/router PR: 5475
File: e2e/react-start/basic-prerendering/src/routes/redirect/$target/via-beforeLoad.tsx:8-0
Timestamp: 2025-10-14T18:59:33.990Z
Learning: In TanStack Router e2e test files, when a route parameter is validated at the route level (e.g., using zod in validateSearch or param validation), switch statements on that parameter do not require a default case, as the validation ensures only expected values will reach the switch.
Applied to files:
e2e/vue-start/serialization-adapters/src/routes/server-function/custom-error.tsxe2e/vue-start/serialization-adapters/src/routes/__root.tsx
📚 Learning: 2025-12-17T02:17:47.423Z
Learnt from: schiller-manuel
Repo: TanStack/router PR: 6120
File: packages/router-generator/src/generator.ts:654-657
Timestamp: 2025-12-17T02:17:47.423Z
Learning: In `packages/router-generator/src/generator.ts`, pathless_layout routes must receive a `path` property when they have a `cleanedPath`, even though they are non-path routes. This is necessary because child routes inherit the path from their parent, and without this property, child routes would not have the correct full path at runtime.
Applied to files:
e2e/vue-start/serialization-adapters/src/routes/__root.tsxe2e/vue-start/serialization-adapters/src/routes/ssr/nested.tsxe2e/vue-start/serialization-adapters/src/routes/index.tsxe2e/vue-start/serialization-adapters/src/routeTree.gen.ts
📚 Learning: 2025-12-06T15:03:07.223Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-06T15:03:07.223Z
Learning: Applies to **/*.{js,ts,tsx} : Implement ESLint rules for router best practices using the ESLint plugin router
Applied to files:
e2e/vue-start/serialization-adapters/src/routes/__root.tsxe2e/vue-start/serialization-adapters/.prettierignoree2e/vue-start/serialization-adapters/src/routes/index.tsxe2e/vue-start/serialization-adapters/tsconfig.jsone2e/vue-start/serialization-adapters/src/routeTree.gen.ts
📚 Learning: 2025-12-06T15:03:07.223Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-06T15:03:07.223Z
Learning: Use file-based routing in `src/routes/` directories or code-based routing with route definitions
Applied to files:
e2e/vue-start/serialization-adapters/src/routes/ssr/nested.tsxe2e/vue-start/serialization-adapters/src/routes/index.tsxe2e/vue-start/serialization-adapters/src/routeTree.gen.tse2e/vue-start/serialization-adapters/src/routes/ssr/data-only.tsx
📚 Learning: 2025-10-01T18:31:35.420Z
Learnt from: schiller-manuel
Repo: TanStack/router PR: 5330
File: e2e/react-start/custom-basepath/src/routeTree.gen.ts:58-61
Timestamp: 2025-10-01T18:31:35.420Z
Learning: Do not review files named `routeTree.gen.ts` in TanStack Router repositories, as these are autogenerated files that should not be manually modified.
Applied to files:
e2e/vue-start/serialization-adapters/.prettierignoree2e/vue-start/serialization-adapters/src/routeTree.gen.ts
📚 Learning: 2025-12-06T15:03:07.223Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-06T15:03:07.223Z
Learning: Applies to **/*.{ts,tsx} : Use TypeScript strict mode with extensive type safety for all code
Applied to files:
e2e/vue-start/serialization-adapters/tsconfig.json
📚 Learning: 2025-10-09T12:59:14.842Z
Learnt from: hokkyss
Repo: TanStack/router PR: 5418
File: e2e/react-start/custom-identifier-prefix/public/site.webmanifest:2-3
Timestamp: 2025-10-09T12:59:14.842Z
Learning: In e2e test fixtures (files under e2e directories), empty or placeholder values in configuration files like site.webmanifest are acceptable and should not be flagged unless the test specifically validates those fields.
Applied to files:
e2e/vue-start/serialization-adapters/playwright.config.ts
🧬 Code graph analysis (8)
e2e/vue-start/serialization-adapters/src/start.tsx (2)
e2e/vue-start/serialization-adapters/src/data.tsx (3)
fooAdapter(29-34)carAdapter(36-47)nestedOuterAdapter(112-118)e2e/vue-start/serialization-adapters/src/CustomError.ts (1)
customErrorAdapter(18-31)
e2e/vue-start/serialization-adapters/src/routes/server-function/custom-error.tsx (2)
packages/start-server-core/src/request-response.ts (1)
setResponseStatus(196-204)e2e/vue-start/serialization-adapters/src/CustomError.ts (1)
CustomError(3-16)
e2e/vue-start/serialization-adapters/src/routes/__root.tsx (1)
packages/router-core/src/router.ts (1)
state(1088-1090)
e2e/vue-start/serialization-adapters/src/routes/server-function/nested.tsx (1)
e2e/vue-start/serialization-adapters/src/data.tsx (3)
makeNested(120-122)NestedOuter(91-96)RenderNestedData(161-205)
e2e/vue-start/serialization-adapters/src/routes/ssr/stream.tsx (1)
e2e/vue-start/serialization-adapters/src/data.tsx (2)
makeData(49-90)RenderData(124-159)
e2e/vue-start/serialization-adapters/src/routes/ssr/nested.tsx (1)
e2e/vue-start/serialization-adapters/src/data.tsx (2)
makeNested(120-122)RenderNestedData(161-205)
e2e/vue-start/serialization-adapters/src/routeTree.gen.ts (2)
e2e/vue-start/serialization-adapters/src/router.tsx (1)
getRouter(4-11)e2e/vue-start/serialization-adapters/src/start.tsx (1)
startInstance(5-16)
e2e/vue-start/serialization-adapters/src/routes/ssr/data-only.tsx (1)
e2e/vue-start/serialization-adapters/src/data.tsx (2)
makeData(49-90)RenderData(124-159)
🪛 Biome (2.1.2)
e2e/vue-start/serialization-adapters/src/routes/ssr/stream.tsx
[error] 31-31: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Test
- GitHub Check: Preview
🔇 Additional comments (23)
e2e/vue-start/serialization-adapters/.prettierignore (1)
1-4: LGTM!The Prettier ignore patterns are appropriate. The configuration correctly excludes the autogenerated
routeTree.gen.tsfile from formatting, along with standard build artifacts, public directories, and lock files.e2e/vue-start/serialization-adapters/postcss.config.mjs (1)
1-5: LGTM!Standard PostCSS configuration for Tailwind CSS v4. The configuration is minimal and correct.
e2e/vue-start/serialization-adapters/tsconfig.json (1)
1-23: LGTM!TypeScript configuration properly enables strict mode and sets up Vue JSX integration with appropriate compiler options. The path alias
~/*for./src/*provides clean import paths throughout the project.e2e/vue-start/serialization-adapters/src/styles/app.css (1)
1-38: LGTM!Well-documented Tailwind CSS v4 compatibility layer. The border-color override and theme setup ensure consistent styling across light/dark modes, and the
.using-mouseoutline removal improves UX for mouse interactions.e2e/vue-start/serialization-adapters/package.json (1)
1-34: LGTM!Package configuration correctly uses the
workspace:^protocol for all internal TanStack dependencies, adhering to the coding guidelines. The dependency setup is appropriate for a Vue e2e test suite.e2e/vue-start/serialization-adapters/src/routes/ssr/nested.tsx (1)
1-15: LGTM!SSR route correctly implements the TanStack Vue Router pattern with
beforeLoadpreparing nested data,loaderpassing context, and the component consuming the loader data viaRoute.useLoaderData(). The.valueaccess pattern is appropriate for Vue 3's reactivity system.e2e/vue-start/serialization-adapters/src/start.tsx (1)
1-16: LGTM!Start configuration correctly registers serialization adapters and enables SSR. The inline comment clearly documents the relationship between
nestedOuterAdapterandnestedInnerAdapterthrough the extends mechanism.e2e/vue-start/serialization-adapters/src/routes/server-function/nested.tsx (1)
7-9: LGTM!Server function and component implementation follow Vue 3 and TanStack Router patterns correctly. The reactive state management with
ref<NestedOuter>()and conditional rendering based on the server response are properly implemented.Also applies to: 11-17, 29-37, 39-41
e2e/vue-start/serialization-adapters/vite.config.ts (1)
1-19: LGTM!The Vite configuration is well-structured with proper plugin ordering and standard e2e test server setup at port 3000.
e2e/vue-start/serialization-adapters/src/routes/ssr/stream.tsx (1)
1-41: LGTM!The SSR streaming route correctly implements async data loading with
SuspenseandAwait. The Biome lint warning aboutchildrenprop is a false positive—this is the idiomatic render-prop pattern for Vue JSX with TanStack'sAwaitcomponent, not a React anti-pattern.e2e/vue-start/serialization-adapters/tests/app.spec.ts (1)
1-112: LGTM!The test suite is well-structured with reusable helper functions for common assertions. The whitelist for 499 errors correctly aligns with the custom error test that sets this status code. Test coverage spans all the new SSR and server-function routes.
e2e/vue-start/serialization-adapters/src/routes/ssr/data-only.tsx (1)
1-51: LGTM!The data-only SSR route correctly demonstrates the serialization adapter pattern by comparing server-generated data (
loaderData) against client-generated data (localData). Thehonk()method comparison is a good test for verifying that class methods survive serialization/deserialization.e2e/vue-start/serialization-adapters/src/routes/server-function/custom-error.tsx (1)
8-17: LGTM!The server function correctly demonstrates custom error serialization with BigInt support. Setting a 499 status before throwing ensures the e2e test can whitelist this specific error response.
e2e/vue-start/serialization-adapters/playwright.config.ts (1)
1-34: LGTM!The Playwright configuration follows established patterns for TanStack Router e2e tests. Dynamic port assignment via
getTestServerPortensures test isolation, and thereuseExistingServertoggle appropriately differs between CI and local development.e2e/vue-start/serialization-adapters/src/routes/index.tsx (1)
1-57: LGTM!The home route correctly uses
reloadDocument={true}on all links to ensure full SSR page loads, which is essential for testing serialization adapters. The test IDs are well-structured and align with the e2e test selectors.e2e/vue-start/serialization-adapters/src/routes/__root.tsx (2)
1-13: LGTM!The imports are appropriate for a Vue e2e test using TanStack Router with Vite.
15-33: LGTM!The root route configuration is well-structured with appropriate head metadata, shell component, and 404 handling.
e2e/vue-start/serialization-adapters/src/CustomError.ts (1)
3-16: LGTM!The CustomError class correctly extends Error with proper prototype chain handling.
e2e/vue-start/serialization-adapters/src/data.tsx (5)
3-34: LGTM!The Foo class and adapter implementation is clean and correct.
7-47: LGTM!Excellent use of discriminated union pattern with the
__typefield. The adapter correctly serializes data properties while preserving methods through themakeCarfactory.
49-90: LGTM!The
makeData()function provides comprehensive test coverage with various data structures (single instances, arrays, maps, and maps of arrays).
91-122: LGTM!Excellent demonstration of nested serialization adapters using the
extendsfeature. This shows how adapters can compose to handle nested object structures.
124-159: LGTM!The RenderData component is well-structured for e2e testing with clear expected vs actual comparisons and appropriate test IDs.
| /public/build# Sentry Config File | ||
| .env.sentry-build-plugin |
There was a problem hiding this comment.
Fix inline comment syntax in .gitignore.
Line 13 mixes a path pattern with an inline comment. In .gitignore, # denotes a comment start, so this line would be treated as a single pattern rather than a path followed by metadata. Separate the comment onto its own line.
Apply this diff to fix the syntax:
-/public/build# Sentry Config File
+/public/build
+# Sentry Config File📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| /public/build# Sentry Config File | |
| .env.sentry-build-plugin | |
| /public/build | |
| # Sentry Config File | |
| .env.sentry-build-plugin |
🤖 Prompt for AI Agents
In e2e/vue-start/serialization-adapters/.gitignore around lines 13 to 14, fix
the inline comment by separating the path pattern and the comment: replace the
combined "/public/build# Sentry Config File" entry with a plain "/public/build"
line followed by a separate comment line starting with "#" (e.g. "# Sentry
Config File"), leaving the subsequent ".env.sentry-build-plugin" entry
unchanged.
| export const customErrorAdapter = createSerializationAdapter({ | ||
| key: 'custom-error', | ||
| test: (v) => v instanceof CustomError, | ||
| toSerializable: ({ message, foo, bar }) => { | ||
| return { | ||
| message, | ||
| foo, | ||
| bar, | ||
| } | ||
| }, | ||
| fromSerializable: ({ message, foo, bar }) => { | ||
| return new CustomError(message, { foo, bar }) | ||
| }, | ||
| }) |
There was a problem hiding this comment.
Handle bigint serialization to prevent runtime errors.
The bar property is a bigint, which cannot be directly serialized to JSON. When the serialization system attempts to stringify the result of toSerializable, it will throw: "TypeError: Do not know how to serialize a BigInt".
Apply this diff to convert bigint to string for serialization:
export const customErrorAdapter = createSerializationAdapter({
key: 'custom-error',
test: (v) => v instanceof CustomError,
toSerializable: ({ message, foo, bar }) => {
return {
message,
foo,
- bar,
+ bar: bar.toString(),
}
},
- fromSerializable: ({ message, foo, bar }) => {
- return new CustomError(message, { foo, bar })
+ fromSerializable: ({ message, foo, bar }: { message: string; foo: string; bar: string }) => {
+ return new CustomError(message, { foo, bar: BigInt(bar) })
},
})🤖 Prompt for AI Agents
In e2e/vue-start/serialization-adapters/src/CustomError.ts around lines 18 to
31, the adapter currently returns the bigint property `bar` directly which will
throw when JSON-stringified; update toSerializable to convert `bar` to a string
(e.g. String(bar) or bar.toString()), and update fromSerializable to convert the
serialized string back to a bigint using BigInt(serializedBar) before passing it
to the CustomError constructor so serialization and deserialization handle
bigint safely.
Summary by CodeRabbit
Release Notes
Tests
Chores
✏️ Tip: You can customize this high-level summary in your review settings.