fix(app): copy buttons silently fail over plain HTTP

Closes #2135.

`navigator.clipboard` is only defined when the page is served over
HTTPS or `localhost`. When HyperDX is reached over plain HTTP
(Tailscale tunnel, corporate VPN, non-localhost host), every "copy"
button throws `TypeError: Cannot read properties of undefined
(reading 'writeText')` and nothing reaches the user's clipboard.

Add `packages/app/src/utils/clipboard.ts` with two helpers:

- `copyTextToClipboard(text)` tries the modern API first, then falls
  back to a hidden-textarea + `document.execCommand('copy')` trick
  that works in non-secure contexts.
- `copyTextWithToast(text, successMessage)` wraps the copy with a
  Mantine notification (green on success, red on failure with a
  message that explains the HTTPS / localhost requirement).

Replace all six raw `navigator.clipboard.writeText` call sites with
the new util:

- `DBRowTableRowButtons.tsx` row JSON + shareable URL buttons
- `DBRowTableFieldWithPopover.tsx` field-value popover
- `DBRowJsonViewer.tsx` "Copy row as JSON", "Copy Object", and
  "Copy Value" actions

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: alex-fedotyev

.changeset/clipboard-http-fallback.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+Fix copy buttons silently failing when HyperDX is served over plain HTTP. Add a `document.execCommand('copy')` fallback for non-secure contexts and a clear toast when both paths fail.

packages/app/src/components/DBRowJsonViewer.tsx

@@ -29,6 +29,7 @@ import {
 
 import HyperJson, { GetLineActions, LineAction } from '@/components/HyperJson';
 import { mergePath } from '@/utils';
+import { copyTextWithToast } from '@/utils/clipboard';
 
 type JSONExtractFn =
   | 'JSONExtractString'
@@ -220,15 +221,12 @@ function HyperJsonMenu({ rowData }: { rowData: any }) {
       {rowData != null && (
         <UnstyledButton
           onClick={() => {
-            window.navigator.clipboard.writeText(
+            copyTextWithToast(
               typeof rowData === 'string'
                 ? rowData
                 : JSON.stringify(rowData, null, 2),
+              'Value copied to clipboard',
             );
-            notifications.show({
-              color: 'green',
-              message: `Value copied to clipboard`,
-            });
           }}
           variant="copy"
           title={'Copy row as JSON'}
@@ -559,13 +557,10 @@ export function DBRowJsonViewer({
           copiedObj = keyPath.length === 0 ? rowData : get(rowData, keyPath);
         }
 
-        window.navigator.clipboard.writeText(
+        copyTextWithToast(
           JSON.stringify(copiedObj, null, 2),
+          'Copied object to clipboard',
         );
-        notifications.show({
-          color: 'green',
-          message: `Copied object to clipboard`,
-        });
       };
 
       if (typeof value === 'object') {
@@ -584,15 +579,12 @@ export function DBRowJsonViewer({
             </Group>
           ),
           onClick: () => {
-            window.navigator.clipboard.writeText(
+            copyTextWithToast(
               typeof value === 'string'
                 ? value
                 : JSON.stringify(value, null, 2),
+              'Value copied to clipboard',
             );
-            notifications.show({
-              color: 'green',
-              message: `Value copied to clipboard`,
-            });
           },
         });
       }

packages/app/src/components/DBTable/DBRowTableFieldWithPopover.tsx

@@ -4,6 +4,8 @@ import { Popover } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { IconCopy, IconFilter, IconFilterX } from '@tabler/icons-react';
 
+import { copyTextWithToast } from '@/utils/clipboard';
+
 import { RowSidePanelContext } from '../DBRowSidePanel';
 
 import { DBRowTableIconButton } from './DBRowTableIconButton';
@@ -83,15 +85,12 @@ const DBRowTableFieldWithPopover = ({
   };
 
   const copyFieldValue = async () => {
-    try {
-      const value =
-        typeof cellValue === 'string' ? cellValue : String(cellValue ?? '');
-      await navigator.clipboard.writeText(value);
+    const value =
+      typeof cellValue === 'string' ? cellValue : String(cellValue ?? '');
+    const ok = await copyTextWithToast(value, 'Copied field value');
+    if (ok) {
       setIsCopied(true);
       setTimeout(() => setIsCopied(false), 2000);
-    } catch (error) {
-      console.error('Failed to copy to clipboard:', error);
-      // Optionally show an error toast notification to the user
     }
   };
 

packages/app/src/components/DBTable/DBRowTableRowButtons.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { IconCopy, IconLink, IconTextWrap } from '@tabler/icons-react';
 
 import { INTERNAL_ROW_FIELDS, RowWhereResult } from '@/hooks/useRowWhere';
+import { copyTextWithToast } from '@/utils/clipboard';
 
 import { DBRowTableIconButton } from './DBRowTableIconButton';
 
@@ -26,57 +27,53 @@ const DBRowTableRowButtons: React.FC<DBRowTableRowButtonsProps> = ({
   const [isUrlCopied, setIsUrlCopied] = useState(false);
 
   const copyRowData = async () => {
-    try {
-      // Filter out internal metadata fields that start with __ or are generated IDs
+    // Filter out internal metadata fields that start with __ or are generated IDs
+    const { [INTERNAL_ROW_FIELDS.ID]: _id, ...cleanRow } = row;
 
-      const { [INTERNAL_ROW_FIELDS.ID]: _id, ...cleanRow } = row;
-
-      // Parse JSON string fields to make them proper JSON objects
-      const parsedRow = Object.entries(cleanRow).reduce(
-        (acc, [key, value]) => {
-          if (
-            typeof value === 'string' &&
-            (value.startsWith('{') || value.startsWith('['))
-          ) {
-            try {
-              acc[key] = JSON.parse(value);
-            } catch {
-              // If parsing fails, keep the original string
-              acc[key] = value;
-            }
-          } else {
+    // Parse JSON string fields to make them proper JSON objects
+    const parsedRow = Object.entries(cleanRow).reduce(
+      (acc, [key, value]) => {
+        if (
+          typeof value === 'string' &&
+          (value.startsWith('{') || value.startsWith('['))
+        ) {
+          try {
+            acc[key] = JSON.parse(value);
+          } catch {
+            // If parsing fails, keep the original string
             acc[key] = value;
           }
-          return acc;
-        },
-        {} as Record<string, any>,
-      );
+        } else {
+          acc[key] = value;
+        }
+        return acc;
+      },
+      {} as Record<string, any>,
+    );
 
-      const rowData = JSON.stringify(parsedRow, null, 2);
-      await navigator.clipboard.writeText(rowData);
+    const rowData = JSON.stringify(parsedRow, null, 2);
+    const ok = await copyTextWithToast(rowData, 'Copied row as JSON');
+    if (ok) {
       setIsCopied(true);
       setTimeout(() => setIsCopied(false), 2000);
-    } catch (error) {
-      console.error('Failed to copy row data to clipboard:', error);
-      // Optionally show an error toast notification to the user
     }
   };
 
   const copyRowUrl = async () => {
-    try {
-      const rowWhereResult = getRowWhere(row);
-      const currentUrl = new URL(window.location.href);
-      // Add the row identifier as query parameters
-      currentUrl.searchParams.set('rowWhere', rowWhereResult.where);
-      if (sourceId) {
-        currentUrl.searchParams.set('rowSource', sourceId);
-      }
-      await navigator.clipboard.writeText(currentUrl.toString());
+    const rowWhereResult = getRowWhere(row);
+    const currentUrl = new URL(window.location.href);
+    // Add the row identifier as query parameters
+    currentUrl.searchParams.set('rowWhere', rowWhereResult.where);
+    if (sourceId) {
+      currentUrl.searchParams.set('rowSource', sourceId);
+    }
+    const ok = await copyTextWithToast(
+      currentUrl.toString(),
+      'Copied shareable link',
+    );
+    if (ok) {
       setIsUrlCopied(true);
       setTimeout(() => setIsUrlCopied(false), 2000);
-    } catch (error) {
-      console.error('Failed to copy URL to clipboard:', error);
-      // Optionally show an error toast notification to the user
     }
   };
 

packages/app/src/utils/__tests__/clipboard.test.ts

@@ -0,0 +1,181 @@
+import { copyTextToClipboard, copyTextWithToast } from '../clipboard';
+
+const mantineShow = jest.fn();
+jest.mock('@mantine/notifications', () => ({
+  notifications: {
+    show: (...args: any[]) => mantineShow(...args),
+  },
+}));
+
+describe('copyTextToClipboard', () => {
+  beforeEach(() => {
+    mantineShow.mockClear();
+    // Reset clipboard between tests
+    Object.defineProperty(navigator, 'clipboard', {
+      value: undefined,
+      writable: true,
+      configurable: true,
+    });
+    // Default execCommand stub returns true
+    document.execCommand = jest.fn().mockReturnValue(true);
+  });
+
+  it('uses navigator.clipboard when available', async () => {
+    const writeText = jest.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, 'clipboard', {
+      value: { writeText },
+      writable: true,
+      configurable: true,
+    });
+    const execSpy = document.execCommand as jest.Mock;
+
+    const result = await copyTextToClipboard('hello');
+
+    expect(result).toBe(true);
+    expect(writeText).toHaveBeenCalledWith('hello');
+    expect(execSpy).not.toHaveBeenCalled();
+  });
+
+  it('falls back to execCommand when navigator.clipboard.writeText rejects', async () => {
+    const writeText = jest.fn().mockRejectedValue(new Error('denied'));
+    Object.defineProperty(navigator, 'clipboard', {
+      value: { writeText },
+      writable: true,
+      configurable: true,
+    });
+    const execSpy = document.execCommand as jest.Mock;
+
+    const result = await copyTextToClipboard('hello');
+
+    expect(result).toBe(true);
+    expect(writeText).toHaveBeenCalledWith('hello');
+    expect(execSpy).toHaveBeenCalledWith('copy');
+  });
+
+  it('falls back to execCommand when navigator.clipboard is undefined', async () => {
+    // clipboard is undefined per beforeEach
+    const execSpy = document.execCommand as jest.Mock;
+
+    const result = await copyTextToClipboard('hello');
+
+    expect(result).toBe(true);
+    expect(execSpy).toHaveBeenCalledWith('copy');
+  });
+
+  it('returns false when both paths fail', async () => {
+    const writeText = jest.fn().mockRejectedValue(new Error('denied'));
+    Object.defineProperty(navigator, 'clipboard', {
+      value: { writeText },
+      writable: true,
+      configurable: true,
+    });
+    document.execCommand = jest.fn().mockReturnValue(false);
+
+    const result = await copyTextToClipboard('hello');
+
+    expect(result).toBe(false);
+  });
+
+  it('removes the textarea from the DOM after the fallback runs', async () => {
+    const result = await copyTextToClipboard('hello');
+
+    expect(result).toBe(true);
+    expect(document.querySelectorAll('textarea').length).toBe(0);
+  });
+
+  it('removes the textarea even when execCommand throws', async () => {
+    document.execCommand = jest.fn().mockImplementation(() => {
+      throw new Error('boom');
+    });
+
+    const result = await copyTextToClipboard('hello');
+
+    expect(result).toBe(false);
+    expect(document.querySelectorAll('textarea').length).toBe(0);
+  });
+
+  it('restores the existing selection after the fallback runs', async () => {
+    // Seed an existing range on a paragraph in the DOM
+    const p = document.createElement('p');
+    p.textContent = 'preserved selection target';
+    document.body.appendChild(p);
+
+    const range = document.createRange();
+    range.selectNodeContents(p);
+
+    const selection = document.getSelection();
+    if (!selection) {
+      throw new Error('jsdom should provide getSelection');
+    }
+    selection.removeAllRanges();
+    selection.addRange(range);
+
+    const result = await copyTextToClipboard('hello');
+
+    expect(result).toBe(true);
+    expect(selection.rangeCount).toBe(1);
+    expect(selection.getRangeAt(0).toString()).toBe(
+      'preserved selection target',
+    );
+
+    document.body.removeChild(p);
+  });
+});
+
+describe('copyTextWithToast', () => {
+  beforeEach(() => {
+    mantineShow.mockClear();
+    Object.defineProperty(navigator, 'clipboard', {
+      value: undefined,
+      writable: true,
+      configurable: true,
+    });
+    document.execCommand = jest.fn().mockReturnValue(true);
+  });
+
+  it('shows a green success toast on success', async () => {
+    const writeText = jest.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, 'clipboard', {
+      value: { writeText },
+      writable: true,
+      configurable: true,
+    });
+
+    const result = await copyTextWithToast('hello');
+
+    expect(result).toBe(true);
+    expect(mantineShow).toHaveBeenCalledWith({
+      color: 'green',
+      message: 'Copied to clipboard',
+    });
+  });
+
+  it('uses a custom success message when provided', async () => {
+    const writeText = jest.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, 'clipboard', {
+      value: { writeText },
+      writable: true,
+      configurable: true,
+    });
+
+    await copyTextWithToast('hello', 'Value copied to clipboard');
+
+    expect(mantineShow).toHaveBeenCalledWith({
+      color: 'green',
+      message: 'Value copied to clipboard',
+    });
+  });
+
+  it('shows a red failure toast when both paths fail', async () => {
+    document.execCommand = jest.fn().mockReturnValue(false);
+
+    const result = await copyTextWithToast('hello');
+
+    expect(result).toBe(false);
+    expect(mantineShow).toHaveBeenCalledWith({
+      color: 'red',
+      message:
+        "Couldn't copy. HyperDX needs HTTPS or localhost to use the browser clipboard API.",
+    });
+  });
+});