showReportDialog failure API

[SimonSchick]

Problem Statement

When running ad blockers or other network disruptions occur showReportDialog will silently fail, there is no api provided for catching this case and asking the user to potentially turn their adblocker (or similar off).

Solution Brainstorm

1. Make showReportDialog return a Promise that resolves when the dialog opens, rejects with error when it fails. (Bonus if you make showReportDialog resolve an object that lets you close the dialog or similar.
2. Add onError callback showReportDialog({ onError: (error: Error) => { ... } }}

Additional Context

No response

Priority

_{React with 👍 to help prioritize this issue. Please use comments to provide useful context, avoiding +1 or me too, to help us triage it.}

[linear-code]

JS-3824

[SimonSchick]

Our interrim solution:

import * as Sentry from '@sentry/browser';
import { useCallback, useEffect, useState } from 'react';

const isReportDialogScript = (target: EventTarget | null): target is HTMLScriptElement => {
  if (!(target instanceof HTMLScriptElement)) {
    return false;
  }

  const url = new URL(target.src);
  return url.hostname.endsWith('sentry.io') && url.pathname.endsWith('/api/embed/error-page/');
};

export const useReportDialog = (
  errorId: string | undefined,
): readonly [open: () => void, failed: boolean] => {
  const [failed, setFailed] = useState(false);

  // showReportDialog exposes no failure callback. Script error events don't bubble, so catch
  // them on window during the capture phase.
  useEffect(() => {
    const onError = (event: Event): void => {
      if (isReportDialogScript(event.target)) {
        setFailed(true);
      }
    };

    window.addEventListener('error', onError, { capture: true });

    return () => {
      window.removeEventListener('error', onError, { capture: true });
    };
  }, []);

  const open = useCallback(() => {
    if (!errorId) {
      return;
    }

    setFailed(false);
    Sentry.showReportDialog({ eventId: errorId });
  }, [errorId]);

  return [open, failed] as const;
};