{"record":{"id":"6885e6e3d7fd5eec","repo":"pinpoint-apm/pinpoint","slug":"out-of-date-range","errorCode":null,"errorMessage":"Out of date range.","messagePattern":"Out of date range\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"web-frontend/src/main/v3/packages/ui/src/components/DatetimePicker/DatetimePicker.tsx","lineNumber":162,"sourceCode":"              dateFormat={dateFormat}\n              disable={isRealtime}\n              className=\"w-104\"\n              seamToken=\"~\"\n              localeKey={language}\n              startDate={parsedDate.from}\n              endDate={parsedDate.to}\n              minDate={subYears(new Date(), 5)}\n              displayedInput={input}\n              onChange={(dateRange, text = '') => {\n                if (dateRange[0] && dateRange[1]) {\n                  const isWithinMaxRange = isValidDateRange(maxDateRangeDays)({\n                    from: dateRange[0],\n                    to: dateRange[1],\n                  });\n                  if (isWithinMaxRange) {\n                    handleChange?.(genDateState(dateRange[0], dateRange[1], timezone), text);\n                  } else {\n                    toast.warn(outOfDateRangeMessage);\n                    const prarsedPrevDate = getParsedDateRange({ from, to }, () => true);\n                    const formattedDateRange = getFormattedDateRange({\n                      from: prarsedPrevDate.from,\n                      to: prarsedPrevDate.to,\n                    });\n                    setInput(`${formattedDateRange.from} ~ ${formattedDateRange.to}`);\n                  }\n                }\n              }}\n              customTimes={{\n                Relative: ['45m', '12hours', '1d', '2days', 'yesterday', 'today'],\n              }}\n              validateDatePickerRange={([from, to]) => {\n                if (from && to) {\n                  if (subDays(to, maxDateRangeDays) > from) {\n                    toast.warn(outOfDateRangeMessage);\n                    return false;\n                  } else {","sourceCodeStart":144,"sourceCodeEnd":180,"githubUrl":"https://github.com/pinpoint-apm/pinpoint/blob/744c3d3075e595656abb1ae331ad2c0e4c9eb996/web-frontend/src/main/v3/packages/ui/src/components/DatetimePicker/DatetimePicker.tsx#L144-L180","documentation":"Not a thrown exception but a user-facing toast (outOfDateRangeMessage) emitted by DatetimePicker's onChange. When the user-picked date range passes isValidDateRange(maxDateRangeDays) but exceeds the picker's maxDateRangeDays limit, the change is rejected, a warning toast is shown, and the input is reset to the previously valid range.","triggerScenarios":"User manually types or selects a from/to range in the RichDatetimePicker whose length exceeds maxDateRangeDays; onChange computes isWithinMaxRange=false and shows the toast while restoring the prior input text.","commonSituations":"Selecting a range wider than the configured maximum (e.g. > maxDateRangeDays set by the host app); typing a large date span by hand; a host page configured a small maxDateRangeDays so ordinary ranges are rejected.","solutions":["Choose a date range whose length is at most maxDateRangeDays.","Raise the maxDateRangeDays prop passed by the host application if the limit is too restrictive.","Use the Relative quick-select times (e.g. '1d', '2days') which fit within the allowed range.","In tests/custom integrations, pre-validate the range with isValidDateRange(maxDateRangeDays) before calling onChange."],"exampleFix":"// before\nonChange={(dateRange) => handleChange?.(genDateState(dateRange[0], dateRange[1], timezone))}\n// after\nconst range = { from: dateRange[0], to: dateRange[1] };\nif (isValidDateRange(maxDateRangeDays)(range)) {\n  handleChange?.(genDateState(range.from, range.to, timezone));\n}","handlingStrategy":"validation","validationCode":"import { isValidDateRange } from '@pinpoint/ui/utils';\nconst range = { from: dateRange[0], to: dateRange[1] };\nif (range.from && range.to && isValidDateRange(maxDateRangeDays)(range)) {\n  handleChange?.(genDateState(range.from, range.to, timezone));\n}","typeGuard":"function isCompleteRange(r) {\n  return r?.from instanceof Date && r?.to instanceof Date;\n}","tryCatchPattern":null,"preventionTips":["Pre-validate ranges with isValidDateRange(maxDateRangeDays) before applying them.","Set a maxDateRangeDays that matches real user workflows.","Prefer the Relative quick-select options, which are within the limit."],"tags":["react","datetime-picker","validation","ux"],"backgroundTag":"value-out-of-range","analyzedSha":"744c3d3075e595656abb1ae331ad2c0e4c9eb996","analyzedAt":"2026-09-07T18:48:45.289Z","contentChangedAt":"2026-09-07T18:48:45.289Z","schemaVersion":2},"datasetVersion":"2026-09-17T15:17:12.973Z"}