mirror/insomnia
1
0
Fork 0
mirror of https://github.com/Kong/insomnia.git synced 2026-04-21 14:47:46 -04:00
Code Issues Packages Projects Releases Wiki Activity

chore: measure back to dashboard operation

Browse Source
This commit is contained in:
Curry Yang
2024-07-29 15:34:49 +08:00
parent f5b7fcb9ea
commit 4ae3d72e06
7 changed files with 54 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/insomnia/src/common/sentry.ts
View File

@@ -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 {

3
packages/insomnia/src/ui/routes/debug.tsx
View File

@@ -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');
}}
>
<Icon className='text-xs' icon="chevron-left" />
</NavLink>

3
packages/insomnia/src/ui/routes/design.tsx
View File

@@ -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');
}}
>
<Icon className='text-xs' icon="chevron-left" />
</NavLink>

3
packages/insomnia/src/ui/routes/environments.tsx
View File

@@ -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');
}}
>
<Icon className='text-xs' icon="chevron-left" />
</NavLink>

9
packages/insomnia/src/ui/routes/mock-server.tsx
View File

@@ -178,7 +178,14 @@ const MockServerRoute = () => {
<div className="flex flex-col items-start gap-2 justify-between p-[--padding-sm]">
<Breadcrumbs className='flex list-none items-center m-0 p-0 gap-2 font-bold w-full'>
<Breadcrumb className="flex select-none items-center gap-2 text-[--color-font] h-full outline-none data-[focused]:outline-none">
<NavLink 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/${projectId}`}>
<NavLink
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/${projectId}`}
onClick={() => {
performance.mark('returnToDashboard:start');
}}
>
<Icon className='text-xs' icon="chevron-left" />
</NavLink>
<span aria-hidden role="separator" className='text-[--hl-lg] h-4 outline outline-1' />

16
packages/insomnia/src/ui/routes/project.tsx
View File

@@ -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 (
<ErrorBoundary>
<Fragment>

20
packages/insomnia/src/ui/routes/root.tsx
View File

@@ -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 (
<AIProvider>
<NunjucksEnabledProvider>