refactor: improve error handling during ClickHouse query type mismatch while filtering session replays

frontend/src/scenes/session-recordings/playlist/sessionRecordingsPlaylistLogic.ts

@@ -1,3 +1,5 @@
+import { lemonToast } from '@posthog/lemon-ui'
+import { captureException } from '@sentry/react'
 import equal from 'fast-deep-equal'
 import { actions, afterMount, connect, kea, key, listeners, path, props, propsChanged, reducers, selectors } from 'kea'
 import { loaders } from 'kea-loaders'
@@ -359,7 +361,20 @@ export const sessionRecordingsPlaylistLogic = kea<sessionRecordingsPlaylistLogic
                     await breakpoint(400) // Debounce for lots of quick filter changes
 
                     const startTime = performance.now()
-                    const response = await api.recordings.list(params)
+                    let response
+
+                    try {
+                        response = await api.recordings.list(params)
+                    } catch (error: any) {
+                        captureException(error)
+                        actions.loadSessionRecordingsFailure(error.message, error)
+
+                        return {
+                            has_next: false,
+                            results: [],
+                        }
+                    }
+
                     const loadTimeMs = performance.now() - startTime
 
                     actions.reportRecordingsListFetched(loadTimeMs, values.filters, defaultRecordingDurationFilter)
@@ -580,6 +595,17 @@ export const sessionRecordingsPlaylistLogic = kea<sessionRecordingsPlaylistLogic
                 actions.maybeLoadSessionRecordings('older')
             }
         },
+
+        loadSessionRecordingsFailure: ({ error, errorObject }) => {
+            if (errorObject?.data?.type === 'validation_error' && errorObject?.data?.code === 'type_mismatch') {
+                lemonToast.error(
+                    'One or more property values in your filters are in an incorrect format.' +
+                        ' Please check and adjust them to match the required data types.'
+                )
+            } else {
+                lemonToast.error(`Error loading session recordings: ${error}`)
+            }
+        },
     })),
     selectors({
         logicProps: [() => [(_, props) => props], (props): SessionRecordingPlaylistLogicProps => props],

posthog/session_recordings/session_recording_api.py

@@ -21,13 +21,16 @@
 from rest_framework.renderers import JSONRenderer
 from rest_framework.response import Response
 from rest_framework.utils.encoders import JSONEncoder
+from rest_framework.exceptions import ValidationError
 
 from posthog.api.person import MinimalPersonSerializer
 from posthog.api.routing import TeamAndOrgViewSetMixin
 from posthog.api.utils import safe_clickhouse_string
 from posthog.auth import SharingAccessTokenAuthentication
 from posthog.cloud_utils import is_cloud
 from posthog.constants import SESSION_RECORDINGS_FILTER_IDS
+from posthog.errors import ExposedCHQueryError
+from posthog.hogql.errors import ExposedHogQLError
 from posthog.models import User, Team
 from posthog.models.filters.session_recordings_filter import SessionRecordingsFilter
 from posthog.models.person.person import PersonDistinctId
@@ -276,7 +279,10 @@ def safely_get_object(self, queryset) -> SessionRecording:
 
     def list(self, request: request.Request, *args: Any, **kwargs: Any) -> Response:
         filter = SessionRecordingsFilter(request=request, team=self.team)
-        return list_recordings_response(filter, request, self.get_serializer_context())
+        try:
+            return list_recordings_response(filter, request, self.get_serializer_context())
+        except (ExposedHogQLError, ExposedCHQueryError) as e:
+            raise ValidationError(str(e), getattr(e, "code_name", None))
 
     @extend_schema(
         description="""