Redux devtool often crashed

Client
1

Our project is facing an issue where Redux DevTools is not stable. It often crashes or fails to load the store, especially when working with CDM. Whenever this happens, our developers have to close the browser DevTools and refresh the page, hoping Redux DevTools will work again.

During debugging, I noticed that the size of the store is around ~13MB.

To address this, we decided not to serialize models/models (the largest object) in DevTools. This change worked like a charm—Redux DevTools is now very fast and consistently ready to use.

It look like this.

image
image1187×471 21.5 KB

My question is: Does A12 face this issue, and is there a plan to fix it? Or has A12 already resolved this?
Actually, not serializing models/models is sometimes not ideal for debugging issues.

Thank you.

2

Hi @anh-round-summit,

A12 did not resolve that from framework level as far as i know. But in a former project the same issues appeared and we had to sanitize state and also actions for the dev tools.

Beside inline attachments in activity dataholders another thing was to sanitize the model slice.

Actually, not serializing models/models is sometimes not ideal for debugging issues.

For that reason the model slice was not fully sanitized on our side. We only sanitized the generatedCodeAccessor of the document models since it had the largest content in our models and did not made sense to have it in redux dev tools debugging.

So if you also have problems with the size of your model contents i can imagine to adapt your sanitizer function to enable some model names if needed (guessing single unsanitized model would not make to much trouble).

And another information taken from docs:

The extension is in different process and cannot access the store object directly, unlike vanilla redux-devtools which doesn’t have this issue. In case sanitizing doesn’t fit your use case, you might consider including it directly as a react component, so there will be no need to serialize the data, but it would add some complexity.

https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/Troubleshooting.md#excessive-use-of-memory-and-cpu

3

Thank you for your answer, we actually implemented stateSanitizer for reduce a memory size of store in devtool. We also create a hotfix flag to make models/models display again without changing a code.
I think it suitable now for our project.

Here is example code for other project need to take example:

declare let window: Window & {
	_sampleDevToolMiddleware?: Middleware;
	_RDT_DEBUG_LARGE_MODELS?: boolean;
};

const enhancerOptions = (): EnhancerOptions => {
	return {
		name: "A12 Client",
		serialize: FIX_devtoolsReviverActivation({
			replacer,
			reviver
		}) as EnhancerOptions["serialize"],
		stateSanitizer: (state: any) => {
			/**
			 *  Make models/models do not serialize in devtools to store lighter and faster.
			 *  In case you want to debug models in hotfix without changing a code, type this one in console of browser:
			 *  window._RDT_DEBUG_LARGE_MODELS = true;
			 *  then re-login to action loadModels happen again.
			 *
			 *  It helpful for Test and Staging env. For a local, just always return state;
			 */
			if (window._RDT_DEBUG_LARGE_MODELS) {
				return state;
			}

			return state["models"] ? { ...state, models: { ...state["models"], models: "<<Too Large>>" } } : state;
		}
	};
}