Dealing with a React Native and TypeScript app here. I keep encountering an error from Fabric every week: "JSON.stringify cannot serialize cyclic structures." The frustrating part is that the error seems to pop up randomly, without any specific scenario triggering it. To make matters worse, my project has numerous third-party libraries that rely on JSON.stringify. This makes it impossible for me to manually implement a custom method everywhere to handle this issue. However, there might be a solution. In the root of my project, there's a boot file where all classes can be overridden. So, I came up with a helper function to tackle cyclic structure serialization:
const getCircularReplacer = () => {
const seen = new WeakSet();
return (key: any, value: any) => {
if (typeof value === 'object' && value !== null) {
if (seen.has(value)) {
return jsonStringify.circularReferenceReplacement;
}
seen.add(value);
}
return value;
};
};
interface IJsonStringify {
(value: any, replacer?: (this: any, key: string, value: any) => any, space?: string | number): string;
circularReferenceReplacement?: any;
}
export const jsonStringify: IJsonStringify = (value: any, replacer?: (this: any, key: string, value: any) => any, space?: string | number): string => {
return JSON.stringify(value, replacer || getCircularReplacer(), space);
};
However, when attempting to override JSON.stringify in my boot file like so:
JSON.stringify = (value: any) => {
return jsonStringify(value);
};
I encounter a different error: "Maximum call stack size exceeded." Can someone point out where I'm going wrong or suggest a better way to override the JSON class using my helper function?