Skip to content

fix: safely serialize query/mutation data to prevent DataCloneError with framework proxies #182

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
biesbjerg wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: safely serialize query/mutation data to prevent DataCloneError with framework proxies #182

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
30 changes: 22 additions & 8 deletions src/injected/injected.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,20 @@ import {
import { TanStackQueryActionExecutor } from "./modules/action-executor";
import { sendToContentScript } from "./modules/message-sender";

/**
* Safely deep-clone a value into a plain, structured-cloneable object.
* Frameworks like Vue 3, MobX, and Solid wrap state in Proxy objects that
* cannot be passed through `window.postMessage` (structured clone algorithm).
* JSON round-tripping reads through Proxy getters, producing plain objects.
*/
function safeClone<T>(value: T): T {
Copy link

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

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

JSON.parse(JSON.stringify()) is called on every query/mutation update, potentially multiple times per second during active operations. This creates performance overhead since:

  1. JSON.stringify traverses the entire object tree
  2. JSON.parse rebuilds the entire object tree
  3. This happens for every field (queryKey, data, error, meta, variables, context) on every query/mutation

Consider optimizing by:

  1. Only applying safeClone when the value is actually a Proxy (check using util.types.isProxy in Node.js or a custom detector)
  2. Caching cloned results if the same object reference is seen repeatedly
  3. Using a shallow clone for simple primitives and arrays of primitives

The performance impact will be especially noticeable with large query caches or complex data objects.

Suggested change
function safeClone<T>(value: T): T {
function safeClone<T>(value: T): T {
// Fast path for primitives: JSON cloning would yield the same value.
if (value === null || typeof value !== "object") {
return value;
}
// Fast path for arrays of primitives: shallow copy is equivalent to JSON clone.
if (Array.isArray(value)) {
let allPrimitives = true;
for (let i = 0; i < value.length; i++) {
const el = value[i];
if (el !== null && typeof el === "object") {
allPrimitives = false;
break;
}
}
if (allPrimitives) {
return value.slice() as T;
}
}
// Fallback: deep clone via JSON round-trip to unwrap proxies and nested objects.

Copilot uses AI. Check for mistakes.
try {
return JSON.parse(JSON.stringify(value));
Comment on lines +26 to +30
Copy link

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

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

JSON.stringify has important limitations that may cause data loss:

  1. Functions, symbols, and undefined values in objects are omitted; in arrays they become null
  2. Dates become strings and lose their Date type
  3. Sets, Maps, RegExp, and other built-in types are not properly serialized
  4. BigInt values throw errors
  5. NaN and Infinity become null

While JSON round-tripping solves the Proxy issue, it fundamentally changes the data. For example, if query.state.data contains a Date, it will become a string. This could break devtools functionality that expects to inspect the original data types. Consider documenting these limitations or handling specific known types (like Date, Set, Map) with custom serialization logic if the devtools needs to display them correctly.

Suggested change
* JSON round-tripping reads through Proxy getters, producing plain objects.
*/
function safeClone<T>(value: T): T {
try {
return JSON.parse(JSON.stringify(value));
* We first prefer `structuredClone` to preserve types, and fall back to
* JSON round-tripping with a custom replacer/reviver to handle common
* built-in types (Date, Set, Map, RegExp, BigInt, NaN, Infinity).
*/
const globalStructuredClone: (<T>(value: T) => T) | undefined =
typeof (globalThis as any).structuredClone === "function"
? ((globalThis as any).structuredClone as <T>(value: T) => T)
: undefined;
function devtoolsJsonReplacer(_key: string, value: unknown): unknown {
// Preserve BigInt by converting to a tagged string representation.
if (typeof value === "bigint") {
return { __devtools_type: "BigInt", value: value.toString() };
}
// Preserve Dates.
if (value instanceof Date) {
return { __devtools_type: "Date", value: value.toISOString() };
}
// Preserve Sets as arrays.
if (value instanceof Set) {
return {
__devtools_type: "Set",
value: Array.from(value.values()),
};
}
// Preserve Maps as [key, value] entry arrays.
if (value instanceof Map) {
return {
__devtools_type: "Map",
value: Array.from(value.entries()),
};
}
// Preserve regular expressions.
if (value instanceof RegExp) {
return {
__devtools_type: "RegExp",
value: value.source,
flags: value.flags,
};
}
// Preserve special number values that JSON would otherwise turn into null.
if (typeof value === "number" && !Number.isFinite(value)) {
return { __devtools_type: "Number", value: value.toString() };
}
return value;
}
function devtoolsJsonReviver(_key: string, value: unknown): unknown {
if (
value &&
typeof value === "object" &&
Object.prototype.hasOwnProperty.call(value, "__devtools_type")
) {
const tagged = value as {
__devtools_type: string;
value?: unknown;
flags?: string;
};
switch (tagged.__devtools_type) {
case "BigInt":
return typeof tagged.value === "string"
? BigInt(tagged.value)
: value;
case "Date":
return typeof tagged.value === "string"
? new Date(tagged.value)
: value;
case "Set":
return Array.isArray(tagged.value)
? new Set(tagged.value)
: value;
case "Map":
return Array.isArray(tagged.value)
? new Map(tagged.value as [any, any][])
: value;
case "RegExp":
return typeof tagged.value === "string"
? new RegExp(tagged.value, tagged.flags || "")
: value;
case "Number":
if (tagged.value === "NaN") return NaN;
if (tagged.value === "Infinity") return Infinity;
if (tagged.value === "-Infinity") return -Infinity;
return value;
default:
return value;
}
}
return value;
}
function safeClone<T>(value: T): T {
// Prefer native structuredClone when available to preserve types where possible.
if (globalStructuredClone) {
try {
return globalStructuredClone(value);
} catch {
// Fall through to JSON-based cloning if structuredClone fails
// (for example, on certain Proxy-wrapped values).
}
}
try {
const json = JSON.stringify(value, devtoolsJsonReplacer);
return JSON.parse(json, devtoolsJsonReviver);

Copilot uses AI. Check for mistakes.
} catch {
Copy link

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

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

The silent error handling (empty catch block) makes debugging difficult. If safeClone fails, developers won't know which field caused the serialization error or why. This is especially problematic since the function is called on multiple different fields (queryKey, data, error, variables, context, meta).

Consider logging a warning when serialization fails to aid debugging. For example: console.warn('Failed to serialize value:', error); This follows the pattern used elsewhere in the codebase for non-critical errors.

Suggested change
} catch {
} catch (error) {
console.warn("Failed to serialize value in safeClone:", error);

Copilot uses AI. Check for mistakes.
return "[Unserializable]" as T;
Comment on lines +28 to +32
Copy link

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

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

The return type "[Unserializable]" as T creates a type safety issue. When T is expected to be an object or array (like queryKey, which is QueryKey type), returning a string breaks the type contract. This could cause runtime errors in code that expects the original type structure.

Consider either:

  1. Returning {} as T for objects/arrays to maintain structural compatibility
  2. Adding proper type narrowing to handle different value types appropriately
  3. Using a union type that allows the function to return the original type or a serialization error indicator
Suggested change
function safeClone<T>(value: T): T {
try {
return JSON.parse(JSON.stringify(value));
} catch {
return "[Unserializable]" as T;
function safeClone<T>(value: T): T | "[Unserializable]" {
try {
return JSON.parse(JSON.stringify(value));
} catch {
return "[Unserializable]";

Copilot uses AI. Check for mistakes.
}
}

// Main injected script class
class InjectedScript {
private detectionCleanup: (() => void) | null = null;
Expand Down Expand Up @@ -282,11 +296,11 @@ class InjectedScript {
// Map Query object to QueryData format
private mapQueryToData(query: Query): QueryData {
return {
queryKey: query.queryKey,
queryKey: safeClone(query.queryKey),
queryHash: query.queryHash,
state: {
data: query.state.data,
error: query.state.error,
data: safeClone(query.state.data),
error: safeClone(query.state.error),
status: query.state.status,
isFetching: query.state.fetchStatus === "fetching",
isPending: query.state.status === "pending",
Expand All @@ -298,7 +312,7 @@ class InjectedScript {
errorUpdatedAt: query.state.errorUpdatedAt,
fetchStatus: query.state.fetchStatus,
},
meta: query.meta || {},
meta: safeClone(query.meta || {}),
Copy link

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

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

The expression query.meta || {} already creates a new plain object when meta is falsy, so safeClone is unnecessary in that case. Consider optimizing to: query.meta ? safeClone(query.meta) : {} to avoid the overhead of JSON serialization when meta is undefined or null.

Suggested change
meta: safeClone(query.meta || {}),
meta: query.meta ? safeClone(query.meta) : {},

Copilot uses AI. Check for mistakes.
isActive: query.getObserversCount() > 0,
observersCount: query.getObserversCount(),
};
Expand All @@ -309,10 +323,10 @@ class InjectedScript {
return {
mutationId: mutation.mutationId,
state: mutation.state.status,
variables: mutation.state.variables,
context: mutation.state.context,
data: mutation.state.data,
error: mutation.state.error,
variables: safeClone(mutation.state.variables),
context: safeClone(mutation.state.context),
data: safeClone(mutation.state.data),
error: safeClone(mutation.state.error),
submittedAt: mutation.state.submittedAt,
isPending: mutation.state.status === "pending",
};
Expand Down