Skip to content

chore: record and raise problematic http protocols for each proxy #15917

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Dec 20, 2024
Merged

chore: record and raise problematic http protocols for each proxy #15917

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
b0c48b1
chore: record http protocol for each proxy
Emyrk Dec 18, 2024
b20a0a3
update language
Emyrk Dec 18, 2024
82ff50d
update story book
Emyrk Dec 18, 2024
177e0a4
formatting
Emyrk Dec 18, 2024
060b8c9
wording
Emyrk Dec 18, 2024
0988ded
line length
Emyrk Dec 18, 2024
b95e092
linting
Emyrk Dec 18, 2024
3acd9a9
linting, how many indents do we need?
Emyrk Dec 18, 2024
3c380c8
linter, just ignoring
Emyrk Dec 18, 2024
62710ae
pre comments
Emyrk Dec 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion site/src/contexts/useProxyLatency.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,11 @@ export interface ProxyLatencyReport {
latencyMS: number;
// at is when the latency was recorded.
at: Date;
/**
* nextHopProtocol can determine if HTTP/2 is being used.
* https://developer.mozilla.org/docs/Web/API/PerformanceResourceTiming/nextHopProtocol
*/
nextHopProtocol?: string;
}

interface ProxyLatencyAction {
Expand Down Expand Up @@ -151,6 +156,7 @@ export const useProxyLatency = (
// https://developer.mozilla.org/en-US/docs/Web/API/Performance_API/Resource_timing
let latencyMS = 0;
let accurate = false;
let nextHopProtocol: string | undefined = undefined;
if (
"requestStart" in entry &&
(entry as PerformanceResourceTiming).requestStart !== 0
Expand All @@ -159,6 +165,7 @@ export const useProxyLatency = (
const timingEntry = entry as PerformanceResourceTiming;
latencyMS = timingEntry.responseStart - timingEntry.requestStart;
accurate = true;
nextHopProtocol = timingEntry.nextHopProtocol;
} else {
// This is the total duration of the request and will be off by a good margin.
// This is a fallback if the better timing is not available.
Expand All @@ -175,7 +182,8 @@ export const useProxyLatency = (
latencyMS,
accurate,
at: new Date(),
},
nextHopProtocol: nextHopProtocol,
} as ProxyLatencyReport,
};
dispatchProxyLatencies(update);
// Also save to local storage to persist the latency across page refreshes.
Expand Down
31 changes: 28 additions & 3 deletions site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,30 @@ export const ProxyRow: FC<ProxyRowProps> = ({ proxy, latency }) => {
// All users can see healthy/unhealthy, some can see more.
let statusBadge = <ProxyStatus proxy={proxy} />;
let shouldShowMessages = false;
const extraWarnings: string[] = [];
if (latency?.nextHopProtocol) {
switch (latency.nextHopProtocol) {
case "http/0.9":
case "http/1.0":
case "http/1.1":
extraWarnings.push(
// biome-ignore lint/style/useTemplate: easier to read short lines
`Requests to the proxy from current browser are using "${latency.nextHopProtocol}". ` +
"The proxy server might not support HTTP/2. " +
"For usability reasons, HTTP/2 or above is recommended. " +
"Pages may fail to load if the web browser's concurrent " +
"connection limit per host is reached.",
);
}
}

if ("status" in proxy) {
const wsproxy = proxy as WorkspaceProxy;
statusBadge = <DetailedProxyStatus proxy={wsproxy} />;
shouldShowMessages = Boolean(
(wsproxy.status?.report?.warnings &&
wsproxy.status?.report?.warnings.length > 0) ||
extraWarnings.length > 0 ||
(wsproxy.status?.report?.errors &&
wsproxy.status?.report?.errors.length > 0),
);
Expand Down Expand Up @@ -84,7 +102,10 @@ export const ProxyRow: FC<ProxyRowProps> = ({ proxy, latency }) => {
colSpan={4}
css={{ padding: "0 !important", borderBottom: 0 }}
>
<ProxyMessagesRow proxy={proxy as WorkspaceProxy} />
<ProxyMessagesRow
proxy={proxy as WorkspaceProxy}
extraWarnings={extraWarnings}
/>
</TableCell>
</TableRow>
)}
Expand All @@ -94,9 +115,13 @@ export const ProxyRow: FC<ProxyRowProps> = ({ proxy, latency }) => {

interface ProxyMessagesRowProps {
proxy: WorkspaceProxy;
extraWarnings: string[];
}

const ProxyMessagesRow: FC<ProxyMessagesRowProps> = ({ proxy }) => {
const ProxyMessagesRow: FC<ProxyMessagesRowProps> = ({
proxy,
extraWarnings,
}) => {
const theme = useTheme();

return (
Expand All @@ -109,7 +134,7 @@ const ProxyMessagesRow: FC<ProxyMessagesRowProps> = ({ proxy }) => {
title={
<span css={{ color: theme.palette.warning.light }}>Warnings</span>
}
messages={proxy.status?.report?.warnings}
messages={[...(proxy.status?.report?.warnings ?? []), ...extraWarnings]}
/>
</>
);
Expand Down
4 changes: 4 additions & 0 deletions site/src/testHelpers/entities.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,6 +206,10 @@ export const MockProxyLatencies: Record<string, ProxyLatencyReport> = {
100) %
250,
at: new Date(),
nextHopProtocol:
proxy.id === "8444931c-0247-4171-842a-569d9f9cbadb"
? "http/1.1"
: "h2",
};
return acc;
},
Expand Down
Loading