Skip to content

bug(console): Dashboard date picker clear button causes invalid parameter error and crashes the pageΒ #8491

@September999999999

Description

@September999999999

Describe the bug

On the Dashboard page, the "Daily Active Users" section has a native date picker (<input type="date">). When clicking the browser's native Clear button on this date picker, the date state is set to an empty string "", which causes the API request to become:

GET /api/dashboard/users/active?date=

The backend koaGuard validates date with string().regex(dateRegEx).optional() β€” .optional() allows undefined but not empty string "". This results in a guard.invalid_input error (400), and the page crashes with an error screen showing:

请求中 query ζ— ζ•ˆ
Error in key path "date": (invalid_string) Invalid

Additional note: Directly refreshing the browser on the error page does not log the user out (the page recovers normally). However, clicking the "Retry" (重试) button on the error screen causes the user to be logged out. This suggests the retry button re-triggers the request with the stale empty date state, and the resulting error is handled by a global error handler that forces a session logout.

Affected environments

  • Self-hosted (v1.37.1, Docker) β€” confirmed reproducible
  • Logto Cloud (cloud.logto.io) β€” confirmed reproducible

This issue exists in both self-hosted and Logto's official cloud version.

Expected behavior

Clicking the "Clear" button on the date picker should either:

  • Reset the date to today (default behavior), or
  • Omit the date query parameter so the backend uses its default

It should not cause an API error or crash the page.

How to reproduce?

  1. Log in to the Admin Console (self-hosted or Logto Cloud)
  2. Navigate to the Dashboard page
  3. Click the date picker in the "Daily Active Users" section
  4. Click the Clear (清陀) button at the bottom of the date picker
  5. Observe: API returns 400 error, page crashes with error screen
  6. Click the "Retry" (重试) button on the error screen
  7. Observe: User is logged out

Note: Refreshing the browser instead of clicking "Retry" will recover the page without logging out.

Root cause

In packages/console/src/pages/Dashboard/index.tsx:

const handleDateChange: ChangeEventHandler<HTMLInputElement> = (event) => {
  setDate(event.target.value); // value is "" when cleared
};

The empty string is passed directly into the SWR request URL api/dashboard/users/active?date=${date}, and backend regex validation (dateRegEx = /^\d{4}(-\d{2}){2}/) rejects the empty string.

Suggested fix

const handleDateChange: ChangeEventHandler<HTMLInputElement> = (event) => {
  const { value } = event.target;
  setDate(value || format(Date.now(), 'yyyy-MM-dd'));
};

Environment

Self-hosted v1.37.1 & Logto Cloud

Screenshots

Image

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions