Dashboards improved error handling for Highcharts component

[jszuminski]

Expected behaviour

The Dashboards should throw a proper error if the Highcharts have been misconfigured (for example, Highcharts Error 18).

This is the piece of code that I'm referring to:

highcharts/ts/Dashboards/Components/HighchartsComponent/HighchartsComponent.ts

Lines 658 to 689 in f121311

	private createChart(): Chart|undefined {
	const charter = HighchartsComponent.charter || Globals.win.Highcharts;
	if (!this.chartConstructor) {
	this.chartConstructor = 'chart';
	}
	const Factory = charter[this.chartConstructor];
	if (Factory) {
	try {
	if (this.chartConstructor === 'chart') {
	return charter.Chart.chart(
	this.chartContainer,
	this.chartOptions
	);
	}
	return new Factory(this.chartContainer, this.chartOptions);
	} catch {
	throw new Error(
	'The Highcharts component is misconfigured: `' +
	this.cell.id + '`'
	);
	}
	}
	if (typeof charter.chart !== 'function') {
	throw new Error('Chart constructor not found');
	}
	return this.chart;
	}

Actual behaviour

Currently, we only get to see "Highcharts component is misconfigured" but there's no way of seeing which Highcharts error has been thrown which is problematic. Also, if the cell or its id is not defined, we get "cannot read properties of undefined (id)".

It is also difficult to debug this problem as the catch there does not receive the error argument and a generic error is thrown for all the Highcharts errors.

Detecting which Highcharts errors throw this error have been problematic in one Highcharts Dashboards custom project in React.

Product version

Highcharts Dashboards (all)