Add error reporting to error modal (#777)

* Add error reporting to error modal

* Update GitHub link for filing issue

* Fix GH workflow for dev tool app

.github/workflows/noop.yml

@@ -15,6 +15,7 @@ on:
       - "!.github/workflows/content-types.yml"
       - ".vscode/**"
       - ".yarn/**"
+      - "apps/xmtp.chat/**"
       - "*"
       - "!.node-version"
       - "!.nvmrc"

apps/xmtp.chat/src/components/App.tsx

@@ -3,8 +3,8 @@ import {
   Button,
   Group,
   Modal,
+  ScrollArea,
   Stack,
-  Text,
   Title,
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
@@ -14,6 +14,7 @@ import { useClient } from "../hooks/useClient";
 import classes from "./App.module.css";
 import { AppFooter } from "./AppFooter";
 import { AppHeader } from "./AppHeader";
+import { CodeWithCopy } from "./CodeWithCopy";
 import { Main } from "./Main";
 import { Navbar } from "./Navbar";
 
@@ -74,8 +75,19 @@ export const App: React.FC = () => {
           centered>
           <Stack gap="md">
             <Title order={4}>Application error</Title>
-            <Text>{unhandledRejectionError}</Text>
-            <Group justify="flex-end">
+            <ScrollArea>
+              <CodeWithCopy
+                code={JSON.stringify(unhandledRejectionError, null, 2)}
+              />
+            </ScrollArea>
+            <Group justify="space-between">
+              <Button
+                variant="default"
+                component="a"
+                href="https://github.com/xmtp/xmtp-js/issues/new/choose"
+                target="_blank">
+                Report issue
+              </Button>
               <Button
                 onClick={() => {
                   setUnhandledRejectionError(null);

apps/xmtp.chat/src/components/CodeWithCopy.tsx

@@ -9,6 +9,8 @@ export const CodeWithCopy: React.FC<CodeWithCopyProps> = ({ code }) => {
   return (
     <Box pos="relative">
       <Code
+        p="md"
+        pt="xl"
         block
         maw="calc(var(--modal-size) - calc(var(--mantine-spacing-md) * 2))">
         {code}

apps/xmtp.chat/src/components/Welcome.tsx

@@ -68,7 +68,7 @@ export const Welcome = () => {
         <Text>
           Your feedback is incredibly important to the success of this tool. If
           you find any bugs or have suggestions, please let us know by{" "}
-          <Anchor href="https://github.com/xmtp/xmtp-chat/issues">
+          <Anchor href="https://github.com/xmtp/xmtp-js/issues/new/choose">
             filing an issue
           </Anchor>{" "}
           on GitHub.