Copying trace attributes/columns as JSON doesn't work

[mattklein123]

Seeing this in my browser console:

Uncaught TypeError: Cannot read properties of undefined (reading 'writeText')
    at onClick (search-258f025ff3550742.js:57:17009)
    at u5 (framework-3338fd78997a402b.js:1:147972)
    at framework-3338fd78997a402b.js:1:154058
    at tC (framework-3338fd78997a402b.js:1:30163)
    at sr (framework-3338fd78997a402b.js:1:149205)
    at cp (framework-3338fd78997a402b.js:1:176430)
    at cf (framework-3338fd78997a402b.js:1:176252)

This is on 2.23.1. Let me know if I can provide more info.

[wrn14897]

Related to this fix c4a1311?
Could you try 2.24.0?

[mattklein123]

@wrn14897 still broken on 2.24.0. Let me know what other info I can provide.

[mattklein123]

Stack on 2.24.0

[savedSearchId]-c139bff9fd55fcad.js:57 Uncaught TypeError: Cannot read properties of undefined (reading 'writeText')
    at onClick ([savedSearchId]-c139…fd55fcad.js:57:5072)
    at u5 (framework-3338fd78997a402b.js:1:147972)
    at framework-3338fd78997a402b.js:1:154058
    at tC (framework-3338fd78997a402b.js:1:30163)
    at sr (framework-3338fd78997a402b.js:1:149205)
    at cp (framework-3338fd78997a402b.js:1:176430)
    at cf (framework-3338fd78997a402b.js:1:176252)

[wrn14897]

@mattklein123 Thanks! Could you share a screenshot of the event details and let me know which column you tried to copy? Need a bit more context

[mattklein123]

It doesn't seem to matter what I try to copy. Nothing works. Meaning if I click on this:

Or this:

Or even a single value I get the same error. I think it's something fundamental to my environment. Example event if it helps though I kind of doubt it:

[brandon-pereira]

@mattklein123 looking at the trace - one thing that comes to mind is that navigator.clipboard could not be permitted. Could you confirm that your browser supports the Clipboard API as well as your instance of HyperDX meets the Security Considerations (page served over HTTPS, if served from iframe you have the correct context, etc)

If this is the case, we can add better guarding/error messages when accessing the clipboard API to make it clear when its not authorized.

[mattklein123]

Chrome is up to date
Version 147.0.7727.117 (Official Build) (arm64)

so maybe that is the problem. I'm serving over HTTP because it's accessed through a VPN (tailscale). Is this the problem? Is there any workaround or it has to be HTTPS terminated?

[brandon-pereira]

Gotcha, yes likely that's it. You can check window.isSecureContext in the browser console to confirm. Is there any chance to use a https? If not we could introduce a legacy clipboard behaviour manually (see below) but that is definitely not ideal to maintain. If you're unable to fix the https -let us know. Would you be open to implementing the fallback behaviour and/or a toast explaining when clipboard is unavailable?

function copyToClipboard(text) {
  // Prefer modern API when available (HTTPS / localhost)
  if (navigator.clipboard?.writeText) {
    return navigator.clipboard.writeText(text).catch(() => fallbackCopy(text));
  }
  return Promise.resolve(fallbackCopy(text));
}

function fallbackCopy(text) {
  const ta = document.createElement('textarea');
  ta.value = text;
  // Avoid scrolling to bottom / visible flash
  ta.style.position = 'fixed';
  ta.style.top = '0';
  ta.style.left = '0';
  ta.style.width = '1px';
  ta.style.height = '1px';
  ta.style.padding = '0';
  ta.style.border = 'none';
  ta.style.outline = 'none';
  ta.style.boxShadow = 'none';
  ta.style.background = 'transparent';
  ta.setAttribute('readonly', '');
  document.body.appendChild(ta);

  // Preserve existing selection if any
  const selection = document.getSelection();
  const prevRange = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;

  ta.select();
  ta.setSelectionRange(0, ta.value.length); // iOS
  let ok = false;
  try {
    ok = document.execCommand('copy');
  } catch {
    ok = false;
  }
  document.body.removeChild(ta);

  if (prevRange && selection) {
    selection.removeAllRanges();
    selection.addRange(prevRange);
  }
  return ok;
}

[mattklein123]

Yeah I will figure out HTTPS but some better error message would be awesome, thank you.