diff --git a/packages/insomnia/src/common/sentry.ts b/packages/insomnia/src/common/sentry.ts index 6d75d83d9c..b34700ec66 100644 --- a/packages/insomnia/src/common/sentry.ts +++ b/packages/insomnia/src/common/sentry.ts @@ -17,6 +17,7 @@ export const enum SentryMetrics { ORGANIZATION_SWITCH_DURATION = 'organization_switch_duration', PROJECT_SWITCH_DURATION = 'project_switch_duration', CLOUD_SYNC_DURATION = 'cloud_sync_duration', + BACK_TO_DASHBOARD = 'back_to_dashboard', }; export const enum LandingPage { diff --git a/packages/insomnia/src/ui/routes/debug.tsx b/packages/insomnia/src/ui/routes/debug.tsx index 92c4114113..df3c917b7c 100644 --- a/packages/insomnia/src/ui/routes/debug.tsx +++ b/packages/insomnia/src/ui/routes/debug.tsx @@ -742,6 +742,9 @@ export const Debug: FC = () => { data-testid="project" className="px-1 py-1 aspect-square h-7 flex flex-shrink-0 outline-none data-[focused]:outline-none items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm" to={`/organization/${organizationId}/project/${activeProject._id}`} + onClick={() => { + performance.mark('returnToDashboard:start'); + }} > diff --git a/packages/insomnia/src/ui/routes/design.tsx b/packages/insomnia/src/ui/routes/design.tsx index e8c41795ef..5fa6f2b0de 100644 --- a/packages/insomnia/src/ui/routes/design.tsx +++ b/packages/insomnia/src/ui/routes/design.tsx @@ -461,6 +461,9 @@ const Design: FC = () => { data-testid="project" className="px-1 py-1 aspect-square h-7 flex flex-shrink-0 outline-none data-[focused]:outline-none items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm" to={`/organization/${organizationId}/project/${activeProject._id}`} + onClick={() => { + performance.mark('returnToDashboard:start'); + }} > diff --git a/packages/insomnia/src/ui/routes/environments.tsx b/packages/insomnia/src/ui/routes/environments.tsx index ad3191c616..2440d0c5ed 100644 --- a/packages/insomnia/src/ui/routes/environments.tsx +++ b/packages/insomnia/src/ui/routes/environments.tsx @@ -258,6 +258,9 @@ const Environments = () => { data-testid="project" className="px-1 py-1 aspect-square h-7 flex flex-shrink-0 outline-none data-[focused]:outline-none items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm" to={`/organization/${organizationId}/project/${activeProject._id}`} + onClick={() => { + performance.mark('returnToDashboard:start'); + }} > diff --git a/packages/insomnia/src/ui/routes/mock-server.tsx b/packages/insomnia/src/ui/routes/mock-server.tsx index 1f8eb3f04a..5d7472820e 100644 --- a/packages/insomnia/src/ui/routes/mock-server.tsx +++ b/packages/insomnia/src/ui/routes/mock-server.tsx @@ -178,7 +178,14 @@ const MockServerRoute = () => {
- + { + performance.mark('returnToDashboard:start'); + }} + > diff --git a/packages/insomnia/src/ui/routes/project.tsx b/packages/insomnia/src/ui/routes/project.tsx index ae606c88cd..9b706e2036 100644 --- a/packages/insomnia/src/ui/routes/project.tsx +++ b/packages/insomnia/src/ui/routes/project.tsx @@ -1008,6 +1008,22 @@ const ProjectRoute: FC = () => { } }, [projectId]); + useEffect(() => { + try { + // use mark and measure to track the time it takes to return to the dashboard + // TODO: + // investigate Sentry's React Router integration: https://docs.sentry.io/platforms/javascript/guides/react/features/react-router/ + // use same approach to track other operations in SentryMetrics + const markList = performance.getEntriesByName('returnToDashboard:start', 'mark'); + if (markList?.length) { + performance.mark('returnToDashboard:end'); + performance.measure(SentryMetrics.BACK_TO_DASHBOARD, 'returnToDashboard:start', 'returnToDashboard:end'); + performance.clearMarks('returnToDashboard:start'); + performance.clearMarks('returnToDashboard:end'); + } + } catch (e) { } + }, []); + return ( diff --git a/packages/insomnia/src/ui/routes/root.tsx b/packages/insomnia/src/ui/routes/root.tsx index fefa93593a..4bdad9d58e 100644 --- a/packages/insomnia/src/ui/routes/root.tsx +++ b/packages/insomnia/src/ui/routes/root.tsx @@ -1,5 +1,6 @@ import '../css/styles.css'; +import * as Sentry from '@sentry/electron/renderer'; import type { IpcRendererEvent } from 'electron'; import React, { useEffect, useState } from 'react'; import { type LoaderFunction, Outlet, useFetcher, useNavigate, useParams, useRouteLoaderData } from 'react-router-dom'; @@ -219,6 +220,25 @@ const Root = () => { ); }, [actionFetcher, navigate]); + // use User Timing API to measure performance + useEffect(() => { + try { + // Create the performance observer. + const observer = new PerformanceObserver(list => { + for (const entry of list.getEntries()) { + // Log the entry and all associated details. + const { name, duration } = entry; + Sentry.metrics.distribution(name, duration, { + unit: 'millisecond', + }); + } + }); + observer.observe({ type: 'measure', buffered: true }); + } catch (e) { + // Do nothing if the browser doesn't support this API. + } + }, []); + return (