Uncaught runtime errors; it happened sometimes (when I click for loading data quickly)

[yuniwahuni]

Hi,

I made timeline chart for inpatient medicine.
chart data is loaded by sql server (node js)

sometimes rendering is well, but sometimes cause error when render chart.
how could I fix this problem?

when it caused error

when it worked well

this is my source

import { useState, useLayoutEffect } from 'react';
import fromKapsule from 'react-kapsule';
import moment from 'moment';
import TimelinesChart from 'timelines-chart';

const TimelinesChartComp = fromKapsule(TimelinesChart);

const useWindowSize = () => {
	const [size, setSize] = useState([0, 0]);
	useLayoutEffect(() => {
		function updateSize() {
			setSize([window.innerWidth, window.innerHeight]);
		}
		window.addEventListener('resize', updateSize);
		updateSize();
		return () => window.removeEventListener('resize', updateSize);
	}, []);
	return size;
};

export default function Timelines({ data }) {
	const [width, height] = useWindowSize();

	function xTickFnc(val) {
		return moment(val).format('YY.MM.DD A');
	}
	return (
		<>
			<div id='chart'>
				<div className='App'>
					<TimelinesChartComp
						zQualitative={true}
						width={width - 100}
						leftMargin={300}
						maxHeight={1000}
						maxLineHeight={40}
						xTickFormat={xTickFnc}
						data={data}
					/>
				</div>
			</div>
		</>
	);
}

[vasturiano]

@yuniwahuni in order to better help you with debugging, could you make a simple repro example on https://codepen.io/ ?

[yuniwahuni]

@yuniwahuni in order to better help you with debugging, could you make a simple repro example on https://codepen.io/ ?

@vasturiano
Sure, thanks for your reply on my question,
I will make source for codepen. please wait a moment.

Up to now, the cause that i think is Asynchronous responce of backend.
I used Apollo graphql bewteen backend and frontend for API.

If I don't use backend, the error is not happen. but when I use backend and get data asynchronous, it happen somtimes.

import { useEffect, useState } from 'react';
import { GET_TIME_LINE_LIST } from './api/gql/devConf';
import { useQuery } from '@apollo/client';
import Timelines from './Timelines';
import moment from 'moment';
import Tabs from './component/Tab';

function makePeriodFromDaylist(group, dates) {
	//... make date period from data
}

function configRangeData(group, orderRecord) {
       //.. make data for timelinechart
	return [
		{
			label: '',
			data: makePeriodFromDaylist(group, orderDayList),
		},
	];
}

function makeGroupData(data) {
	const uniqueOrderName = [...new Set(data.map((item) => item.orderName))];
	const resultData = uniqueOrderName.map((orderName) => ({
		group: orderName,
		data: configRangeData(
			orderName,
			data.filter((v) => v.orderName === orderName)
		),
	}));
	return resultData;
}

export default function App() {
	const [category, setCategory] = useState({ categoryKey: 3, categoryName: 'medicine' });
	const { loading, error, data } = useQuery(GET_TIME_LINE_LIST, {
		fetchPolicy: 'network-only',
		variables: {
			chartNo: '00-0000001',
			category: category.categoryKey,
			inDate: '',
		},
	});

	function makeCategoryTab(categoryList) {
		function onSetCategory(cat) {
			setCategory(cat);
		}
		return <Tabs data={categoryList} category={category} onSetCategory={onSetCategory} />;
	}

	if (loading) return <>{'Loading...'}</>;
	if (error) return <>{'Error ${error.message'}}</>;
	if (data) {
		const timelineList = data?.getTimelineList?.timelineList;
		if (timelineList.length > 0) {
			return (
				<>
					<div className='Tabs'>
						<span className='TitleCaption'>{'Medicine TimeLine'}</span>
						<ul className='nav'>{makeCategoryTab()}</ul>
					</div>
					<Timelines data={makeGroupData(timelineList)} />
				</>
			);
		} else {
			return <></>;
		}
	}

	return <></>;
}

[Maarc]

Hi! Thank you for opening this issue. I have the same error using timelines-chart with vue.js, while refreshing too quickly.