[React@18 failing test] visualize app - new charts library visualize area charts date histogram when no time filter interval errors should show error when calendar interval invalid

[Dosant]

We're working on upgrading Kibana to React@18 (in Legacy Mode). There are a couple failing tests when running React@18 in Legacy mode and this is one of them

visualize app - new charts library visualize area charts date histogram when no time filter interval errors should show error when calendar interval invalid. Failure

---

I investigated the problem and understand what is not working, but was hesistant to suggest a fix. I'd like a team to take another look and fix carefully.

To Reproduce:

1. Create aggregation based viz, e.g. Area Chart
2. Add data histogram agg
3. Change minimum interval to a invalid value ("f")
4. Change minimum interval to another invalid value ("ff")

React@18 failure:

error.mov

The error is thrown from here in the reducer:

kibana/src/plugins/vis_default_editor/public/components/sidebar/state/reducers.ts

Line 82 in 23e0e1e

const parsedAgg = agg.serialize();

When we try to update the state using 2nd invalid value, the error is thrown when we try to serialize the current agg with previous invalid value.

This code is exececuted when we call agg.serialize:

kibana/src/plugins/data/common/search/aggs/buckets/lib/time_buckets/time_buckets.ts

Lines 200 to 202 in 5ed6981

	if (!isDurationInterval(this._i)) {
	throw new TypeError('"' + this._i + '" is not a valid interval.');
	}

Why don't we see this failure in React@17?

In React@17 we don't see an error screen, but we only see a log in the console.

TypeError: "f" is not a valid interval.

It turns out that React@17 consistently executed that reducer twice. first time during dispatch and second time during rendering. This shouldn't be a problem because reducers are supposed to be pure (without side-effects). But in this case calling agg.serialize only throws an error when called the first time! So in React@17 the reducer was called the first time, the error was swallowed, then it was called the 2nd time and there was no error anymore, so it never poped up during rendering.

The root cause of inconsitent behaviour is here:

kibana/src/plugins/data/common/search/aggs/buckets/date_histogram.ts

Lines 111 to 121 in 8afbbc0

	if (buckets) return buckets;
	buckets = new TimeBuckets({
	'histogram:maxBars': getConfig(UI_SETTINGS.HISTOGRAM_MAX_BARS),
	'histogram:barTarget': getConfig(UI_SETTINGS.HISTOGRAM_BAR_TARGET),
	dateFormat: getConfig('dateFormat'),
	'dateFormat:scaled': getConfig('dateFormat:scaled'),
	});
	updateTimeBuckets(this, calculateBounds, buckets);
	return buckets;

when get() called first time we create buckets and cache them. but we cache them before calling updateTimeBuckets which is where the error happens.

To fix this issue, we should make the reducer pure and make sure an error is handled

[elasticmachine]

Pinging @elastic/kibana-visualizations (Team:Visualizations)