briefercloud / briefercloud/briefer

Invalid time value causes frontend to crash

Open
#364 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
4.3k
Forks
290
PR merge metrics
No merged PRs in 30d

Description

Hi! I think I found a bug with the graphing of SQL data and after quite some hammering I think I found a way to reproduce it

## How to reproduce
After many trials and errors re-creating the docker container (and then navigating to the datasource panel and deleting the page from there), I've managed to find a way to reproduce the issue

1. Add a PSQL database (empty is fine)
2. Create a new notebook
3. In the notebook, add the query `SELECT 1234567891234567890 as val, '2024-10-30 23:50:21+00'::timestamptz as ts;` and evaluate it
4. Click `Visualize`
5. Click on the Y axis value and select the `ts` column

Interestingly, I cannot reproduce the issue with a query such as `SELECT '324' as value, '2024-05-26T22:33:44.000Z'::timestamp`

## Details

Version: 0.111 running on Kubernetes (0.112 was not available)

## Image:

Image

## Message from the console
```
RangeError: Invalid time value
NextJS 62
format
formatDateTime
formatter
makeLabelFormatter
n
resize
util_each
resize
update
update
util_each
update
update
setOption
Echarts
Qj
Hk
Pk
Pk
Ek
jg
Dk
Dk
gi
fi
ai
_update
_update
retry
promise callback*retry
LoadableSubscription
init
LoadableComponent
LoadableComponent
Nh
Yi
x
Uk
Ik
Ik
Gk
J
R
46475
__webpack_require__
14616
__webpack_require__
52967
__webpack_require__
28316
__webpack_require__
17029
__webpack_require__
66059
__webpack_require__
45286
__webpack_require__

O

f

main-0f3d59d9f7d25352.js:1:10934
NextJS 52
renderError
fn
componentDidCatch
callback
sh
kk
ik
Pk
Pk
Ek
jg
Dk
(Async: VoidFunction)
Dk
gi
fi
ai
_update
_update
retry
(Async: promise callback)
retry
LoadableSubscription
init
LoadableComponent
LoadableComponent
Nh
Yi
x
Uk
Ik
Ik
Gk
J
R
(Async: EventHandlerNonNull)
46475
__webpack_require__
14616
__webpack_require__
52967
__webpack_require__
28316
__webpack_require__
17029
__webpack_require__
66059
__webpack_require__
45286
__webpack_require__

O

f

A client-side exception has occurred, see here for more info: https://nextjs.org/docs/messages/client-side-exception-occurred
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Reproduce the crash in a notebook with the PostgreSQL query from the issue, then trace the frontend stack around format, formatDateTime, formatter, and makeLabelFormatter. Investigate the visualization path used when selecting the timestamptz column for the Y axis. Done means the chart remains usable and does not throw “RangeError: Invalid time value” for this input.

Written by the indexing model from the issue text.

Assessment

Tech stack
postgresql, typescript
Domain
data-visualization, databases, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.