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.