Browse Source

fix(timeRangeSelector): Fix site reload issue in Safari (#52589)

In Safari, if the start time is after the end time in
`TimeRangeSelector`, then the whole site crashes and reloads:


https://github.com/getsentry/sentry/assets/44172267/942f8029-a3a3-4074-9f7e-ab0d51ad708c

This happens because the server returns a 400 status when the start and
end time are not in order:
<img width="762" alt="image"
src="https://github.com/getsentry/sentry/assets/44172267/f20eec37-1566-4661-a129-d46cc59b9b16">

Chrome & Firefox can handle this and display an error message, but
Safari triggers a site reload.

To fix this, we can check to make sure that the start and end times are
in order and if not display an error ring (+ disable the apply button):


https://github.com/getsentry/sentry/assets/44172267/061a9764-c043-4f4c-ab36-ecf1b00c2560
Vu Luong 1 year ago
parent
commit
14119878f7

+ 6 - 6
static/app/components/organizations/timeRangeSelector/dateRange.tsx

@@ -117,13 +117,13 @@ class BaseDateRange extends Component<Props, State> {
     const end = this.props.end ?? undefined;
     const {onChange, organization, router} = this.props;
     const startTime = e.target.value;
+    const newStartTime = setDateToTime(start, startTime, {local: true});
 
-    if (!startTime || !isValidTime(startTime)) {
+    if (!startTime || !isValidTime(startTime) || (end && newStartTime > end)) {
       this.setState({hasStartErrors: true});
       onChange({hasDateRangeErrors: true});
       return;
     }
-    const newTime = setDateToTime(start, startTime, {local: true});
 
     trackAnalytics('dateselector.time_changed', {
       organization,
@@ -133,7 +133,7 @@ class BaseDateRange extends Component<Props, State> {
     });
 
     onChange({
-      start: newTime,
+      start: newStartTime,
       end,
       hasDateRangeErrors: this.state.hasEndErrors,
     });
@@ -146,14 +146,14 @@ class BaseDateRange extends Component<Props, State> {
     const end = this.props.end ?? '';
     const {organization, onChange, router} = this.props;
     const endTime = e.target.value;
+    const newEndTime = setDateToTime(end, endTime, {local: true});
 
-    if (!endTime || !isValidTime(endTime)) {
+    if (!endTime || !isValidTime(endTime) || (start && start > newEndTime)) {
       this.setState({hasEndErrors: true});
       onChange({hasDateRangeErrors: true});
       return;
     }
 
-    const newTime = setDateToTime(end, endTime, {local: true});
     trackAnalytics('dateselector.time_changed', {
       organization,
       field_changed: 'end',
@@ -163,7 +163,7 @@ class BaseDateRange extends Component<Props, State> {
 
     onChange({
       start,
-      end: newTime,
+      end: newEndTime,
       hasDateRangeErrors: this.state.hasStartErrors,
     });