From 07dd57d1ea77c3f20f8f2a45a8a24ef8abe4e12e Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Sat, 1 Mar 2025 13:34:12 -0600 Subject: Add metrics to reporting flow (#7871) * Add metrics to reporting flow * Remove vestigial state --- src/components/moderation/ReportDialog/index.tsx | 23 +++++++++++++++++++++-- src/logger/metrics.ts | 11 +++++++++++ src/logger/types.ts | 1 + 3 files changed, 33 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/components/moderation/ReportDialog/index.tsx b/src/components/moderation/ReportDialog/index.tsx index 7115324e6..291699380 100644 --- a/src/components/moderation/ReportDialog/index.tsx +++ b/src/components/moderation/ReportDialog/index.tsx @@ -8,7 +8,7 @@ import {useLingui} from '@lingui/react' import {wait} from '#/lib/async/wait' import {getLabelingServiceTitle} from '#/lib/moderation' import {sanitizeHandle} from '#/lib/strings/handles' -import {logger} from '#/logger' +import {Logger} from '#/logger' import {isNative} from '#/platform/detection' import {useMyLabelersQuery} from '#/state/queries/preferences' import {CharProgress} from '#/view/com/composer/char-progress/CharProgress' @@ -39,6 +39,8 @@ import {ReportOption, useReportOptions} from './utils/useReportOptions' export {useDialogControl as useReportDialogControl} from '#/components/Dialog' +const logger = Logger.create(Logger.Context.ReportDialog) + export function ReportDialog( props: Omit & { subject: ReportSubject @@ -48,8 +50,11 @@ export function ReportDialog( () => parseReportSubject(props.subject), [props.subject], ) + const onClose = React.useCallback(() => { + logger.metric('reportDialog:close', {}) + }, []) return ( - + {subject ? : } @@ -137,6 +142,8 @@ function Inner(props: ReportDialogProps) { const onSubmit = React.useCallback(async () => { dispatch({type: 'clearError'}) + logger.info('submitting') + try { setPending(true) // wait at least 1s, make it feel substantial @@ -148,11 +155,17 @@ function Inner(props: ReportDialogProps) { }), ) setSuccess(true) + logger.metric('reportDialog:success', { + reason: state.selectedOption?.reason!, + labeler: state.selectedLabeler?.creator.handle!, + details: !!state.details, + }) // give time for user feedback setTimeout(() => { props.control.close() }, 1e3) } catch (e: any) { + logger.metric('reportDialog:failure', {}) logger.error(e, { source: 'ReportDialog', }) @@ -165,6 +178,12 @@ function Inner(props: ReportDialogProps) { } }, [_, submitReport, state, dispatch, props, setPending, setSuccess]) + React.useEffect(() => { + logger.metric('reportDialog:open', { + subjectType: props.subject.type, + }) + }, [props.subject]) + return (