[ERP-3472] Expose error details and provide 'copy to clipboard' functionality to allow us to reconcile to the user session in Splunk RUM

Author: ppettitau

frontend/.eslintrc.json

@@ -47,7 +47,12 @@
         "@typescript-eslint/explicit-module-boundary-types": "off",
         "@typescript-eslint/no-unused-vars": [
           "error",
-          { "ignoreRestSiblings": true }
+          {
+            "ignoreRestSiblings": true,
+            "caughtErrorsIgnorePattern": "^_",
+            "destructuredArrayIgnorePattern": "^_",
+            "varsIgnorePattern": "^_"
+          }
         ],
         "@typescript-eslint/no-explicit-any": "off",
         "@typescript-eslint/no-var-requires": "off",

frontend/components/errorBoundary/asyncErrorBoundary.stories.tsx

@@ -17,6 +17,13 @@ const ErrorComponent = () => {
   throw new Error("Test error");
 };
 
+const PromiseRejectComponent = () => {
+  new Promise((_, reject) => {
+    reject(new Error("Unexpected promise rejection"));
+  }).then();
+  return <></>;
+};
+
 export const Default: Story = {
   args: {
     children: <ErrorComponent />,
@@ -28,6 +35,13 @@ export const Default: Story = {
   ),
 };
 
+export const WithPromiseRejection: Story = {
+  ...Default,
+  args: {
+    children: <PromiseRejectComponent />,
+  },
+};
+
 export const WithNoErrors: Story = {
   ...Default,
   args: {

frontend/components/errorMessage/errorMessage.stories.tsx

@@ -14,9 +14,6 @@ const ErrorComponent = () => {
 };
 
 export const Default: Story = {
-  args: {
-    message: "An error occurred while processing your request.",
-  },
   render: (args) => (
     <ErrorBoundary fallback={<ErrorMessage {...args} />}>
       <ErrorComponent />

frontend/components/errorMessage/errorMessage.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent } from "react";
+import { FunctionComponent, useEffect, useState } from "react";
 import {
   DialogBackdrop,
   DialogBody,
@@ -10,23 +10,46 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Text } from "@chakra-ui/react";
+import { Box, Button, Clipboard, Text } from "@chakra-ui/react";
 import { ExternalLink } from "@/components/externalLink";
 import { FallbackProps, useErrorBoundary } from "react-error-boundary";
 import { MappedIcon } from "@/components/mappedIcon";
+import SplunkOtelWeb from "@splunk/otel-web";
+import { capitalize, isEmpty, words } from "lodash";
 
 export interface ErrorMessageProps extends FallbackProps {
   icon?: string;
   title?: string;
   message?: string;
 }
 
+type ErrorDetail = { label: string; value: string };
+const clipboardText = (detail: Array<ErrorDetail>) =>
+  detail.map(({ label, value }) => `${label}: ${value}`).join("\n");
+
 const ErrorMessage: FunctionComponent<ErrorMessageProps & FallbackProps> = ({
   icon = "exclamation-circle",
   title = "An unexpected error has occurred",
   message,
+  error,
 }) => {
   const { resetBoundary } = useErrorBoundary();
+  const [errorDetails, setErrorDetails] = useState<Array<ErrorDetail>>([]);
+
+  useEffect(() => {
+    setErrorDetails(
+      Object.entries({
+        splunkSessionId: SplunkOtelWeb.getSessionId(),
+        timestamp: new Date().toISOString(),
+        detail:
+          error?.reason?.toString() ?? error?.message ?? error?.toString(),
+      })
+        .filter(([_key, value]) => !isEmpty(value))
+        .map(([key, value]) => {
+          return { label: words(key)?.map(capitalize)?.join(" "), value };
+        }),
+    );
+  }, [error]);
 
   return (
     <DialogRoot
@@ -56,8 +79,30 @@ const ErrorMessage: FunctionComponent<ErrorMessageProps & FallbackProps> = ({
             >
               contact eResearch
             </ExternalLink>{" "}
-            for assistance.
+            for assistance, providing the following information:
           </Text>
+          <Box
+            border={"dashed"}
+            borderWidth={1}
+            borderColor={"gray.300"}
+            p={2}
+            mt={4}
+            mb={4}
+          >
+            {errorDetails.map(({ label, value }) => (
+              <Text key={label}>
+                {label}: {value}
+              </Text>
+            ))}
+          </Box>
+          <Clipboard.Root value={clipboardText(errorDetails)}>
+            <Clipboard.Trigger asChild>
+              <Button variant="surface" size="sm">
+                <Clipboard.Indicator />
+                <Clipboard.CopyText />
+              </Button>
+            </Clipboard.Trigger>
+          </Clipboard.Root>
         </DialogBody>
         <DialogFooter />
       </DialogContent>