[Error] You have provided invalid Date format. Please provide a valid JavaScript Date

 

React-ApexCharts는 React 차트를 생성하기 위해 React-ApexCharts 구성요소를 사용하여 React.js 애플리케이션에서 다양한 차트를 손쉽게 만들 수 있다.

 

나도 React에 React-ApexCharts 라이브러리를 사용하여 LineChart를 개발하고 있던 도중 에러를 발견했다.

 

코드설계

import React, { useState } from 'react';
import ReactApexChart from "react-apexcharts";

const Chart = ({cnrMapSatCnr, cnrMapEventDate}) => {
	
    // 차트 데이터 및 옵션 설정
	const [chartData, setChartData] = useState({
        series: [
            {
                name: '위성신호레벨/잡음비',
                type: 'line',
                data: cnrMapSatCnr,
                color: '#DC143C',
            },
        ],
        options: {
            chart: {
                height: 350,
                type: 'line',
                toolbar: {
                    show: true,
                    offsetY: -25,
                    offsetX: -5,
                },
            },
            plotOptions: {
                bar: {
                    horizontal: false,
                    columnWidth: '90%',
                    endingShape:'rounded'
                }
            },
            markers: {
                size: 1
            },
            xaxis: {
                type: 'datetime',
                categories: cnrMapEventDate,
                title: {
                    text: 'Daily(일)',
                }
            },
            tooltip: {
                x: {
                    format: 'yyyy/MM/dd HH',
                },
                y: [
                    {
                        title: {
                            formatter: function (val) {
                                return val + " (dB)"
                            }
                        }
                    }
                ]
            }
        }
    })
    
    return(
    	<ReactApexChart options={chartData.options} series={chartData.series} height={350} />
    )
}

 

props 으로 받아온 cnrMapSatCnr 이라는 변수는 소수점 둘째 자리 이하의 float 형 숫자의 배열값이 들어있었고,

(예) const cnrMapSatCnr = [50.1, 51.86, 53.70, 43.1, ...]

 

cnrMapEventDate 변수는 'YYYY-MM-DDTHH' 형식의 날짜와 시간까지의 문자형 

(예) const cnrMapEventDate = ['2024-03-01T00', '2024-03-01T01', '2024-03-01T02', '2024-03-01T02', ...]

 

에러코드

Uncaught (in promise) Error: You have provided invalid Date format. Please provide a valid JavaScript Date

 

해당 에러코드를 번역기로 돌렸을 때

잘못된 날짜 형식을 제공했습니다. 유효한 자바스크립트 날짜를 제공하십시오.

라고 번역된다.

사진첨부

문제원인

처음에는 무슨말인지 이해하지 못했다. 날짜 형식을 지켰다고 생각했고, 애시당초 유효한 자바스크립트 날짜라는 개념이 잘 이해가 되지 않았다. cnrMapEventDate 배열 안의 값들이 누가봐도 날짜형식이었기 때문이다.

하지만 조금 서칭을 해보니, 어떤 문제 때문이었는지 알 수 있었다.

 

ApexChart에는 Datetime 형식으로 xaxis 를 설정할 경우에 정확한 날짜 형식을 지켜야 한다는 것이었다.

 

다시 확인해 보니, cnrMapEventDate 의 형식이 'YYYY-MM-DDT00'로 유효한 자바스크립트 날짜를 제공하지 못했다.

따라서, 'YYYY-MM-DDTHH:mm:ss' 형식으로 맞춰야 할 필요가 있었다.

해결방안

1. 정확한 날짜 형식 사용: 날짜 데이터가 'YYYY-MM-DDTHH:mm:ss'와 같은 ISO 8601 형식이거나, 'new Date('2024-02-01T00:00:00')' 와 같이 생성할 수 있는 형식이어야 한다.

 

그래서 배열 안에 있는 날짜 값들의 date 형식을 모두 바꿔주었다.

 

2. 유효한 날짜 값: 생성한 날짜가 실제로 유효한 날짜인지 확인해주어야 한다. 특히 'new Date('invalid date')'와 같이 유효하지 않은 문자열을 사용하면 오류가 발생할 수 있다.

// 유효한 날짜인지 확인하는 함수
const isValidDate = dateString => !isNaN(new Date(dateString).getTime());

// 각 날짜를 검사하여 유효한 날짜만을 남긴 배열 생성
const validEventDates = cnrMapEventDate.filter(date => isValidDate(date));

console.log(validEventDates);

다른 해결방안

단순히 해당 데이터 형식으로 xaxis 를 지정하고 싶다면, 배열 안의 값들을 문자형으로 인식하여 설계할 수 있는 방법이 있다.

즉, 시간 데이터가 아니더라도 특정한 문자열 값을 x 축으로 사용할 수 있다.

 

하지만, 해당 방법은 x축이 날짜 형식이 아니라, 문자열로 인식한 배열 기준이기 때문에 개발자 본인이 데이터 간의 순서를 잘 확인해야 한다.

시간의 영속성이 아닌 경우에도 사용할 수 있기 때문에 데이터 정렬과 표시 방식에 주의해야 하며, 필요에 따라 데이터를 적절히 가공하여 사용해야 한다는 다소 수고스러움이 생길 수 있다.

(ApexCharts는 기본적으로 데이터를 오름차순으로 정렬한다.)