Merge pull request #97 from shayypy/loud-send-errors

Loud send/edit errors

modules/editor/EditorManager.ts

@@ -2,6 +2,7 @@
 
 import { Instance, SnapshotOrInstance, types } from "mobx-state-tree"
 import { delay } from "../../common/state/delay"
+import type { DiscordError } from "../../types/DiscordError"
 import type { MessageData } from "../message/state/data/MessageData"
 import { MessageModel } from "../message/state/models/MessageModel"
 import { WebhookModel } from "../webhook/WebhookModel"
@@ -63,6 +64,7 @@ export const EditorManager = types
     },
 
     async save() {
+      const errors: DiscordError[] = []
       for (const target of self.targets) {
         for (const message of self.messages) {
           const headers: Record<string, string> = {
@@ -98,10 +100,17 @@ export const EditorManager = types
 
           /* eslint-enable no-await-in-loop */
 
+          if (!response.ok) {
+            errors.push(data as DiscordError)
+          }
+
           console.log("Target executed", data)
         }
       }
 
+      if (errors.length > 0) {
+        throw new Error(JSON.stringify(errors))
+      }
       return null
     },
 

modules/editor/webhook/DiscordErrorsModal.tsx

@@ -0,0 +1,76 @@
+import React from "react"
+import { SecondaryButton } from "../../../common/input/button/SecondaryButton"
+import { ModalAction } from "../../../common/modal/layout/ModalAction"
+import { ModalBody } from "../../../common/modal/layout/ModalBody"
+import { ModalContainer } from "../../../common/modal/layout/ModalContainer"
+import { ModalFooter } from "../../../common/modal/layout/ModalFooter"
+import { ModalHeader } from "../../../common/modal/layout/ModalHeader"
+import { ModalTitle } from "../../../common/modal/layout/ModalTitle"
+import { ModalContext } from "../../../common/modal/ModalContext"
+import { useRequiredContext } from "../../../common/state/useRequiredContext"
+import { remove } from "../../../icons/remove"
+import type { CodedError, DiscordError } from "../../../types/DiscordError"
+import { Markdown } from "../../markdown/Markdown"
+
+export type DiscordErrorsModalProps = {
+  errors: DiscordError[]
+}
+
+export function DiscordErrorsModal(props: DiscordErrorsModalProps) {
+  const { errors } = props
+
+  const modal = useRequiredContext(ModalContext)
+
+  const flattened = errors.map(discordError => {
+    const flattenErrorObject = (d: DiscordError["errors"], key?: string) => {
+      const items: string[][] = []
+      for (const [k, v] of Object.entries(d!)) {
+        const newKey = key ? `${key}.${k}` : k
+
+        if (typeof v === "object" && !Array.isArray(v) && v != null) {
+          // eslint-disable-next-line no-underscore-dangle
+          const codedErrors = (v as { _errors?: CodedError[] })._errors
+          if (!codedErrors) {
+            items.push(
+              ...flattenErrorObject(v as DiscordError["errors"], newKey),
+            )
+          } else {
+            items.push([newKey, codedErrors.map(e => e.message).join(", ")])
+          }
+        } else {
+          items.push([newKey, String(v)])
+        }
+      }
+
+      return items
+    }
+    if (discordError.errors) {
+      const items = flattenErrorObject(discordError.errors)
+      return items.map(([k, v]) => `In \`${k}\`: ${v}`)
+    }
+    return [discordError.message]
+  })[0]
+
+  return (
+    <ModalContainer>
+      <ModalHeader>
+        <ModalTitle>Discord Error</ModalTitle>
+        <ModalAction
+          icon={remove}
+          label="Close"
+          onClick={() => modal.dismiss()}
+        />
+      </ModalHeader>
+      <ModalBody>
+        <Markdown
+          content={`Your message could not be submitted because it contains the following errors:\n\n${flattened.join(
+            "\n",
+          )}`}
+        />
+      </ModalBody>
+      <ModalFooter>
+        <SecondaryButton onClick={() => modal.dismiss()}>Close</SecondaryButton>
+      </ModalFooter>
+    </ModalContainer>
+  )
+}

modules/editor/webhook/WebhookControls.tsx

@@ -12,6 +12,7 @@ import { useRequiredContext } from "../../../common/state/useRequiredContext"
 import { remove } from "../../../icons/remove"
 import type { EditorFormState } from "../../message/state/editorForm"
 import { EditorManagerContext } from "../EditorManagerContext"
+import { DiscordErrorsModal } from "./DiscordErrorsModal"
 import { NetworkErrorModal } from "./NetworkErrorModal"
 
 const InputAction = styled(IconButton)`
@@ -40,10 +41,18 @@ export function WebhookControls(props: WebhookControlsProps) {
 
     try {
       await form.save()
-    } catch {
-      modalManager.spawn({
-        render: () => <NetworkErrorModal />,
-      })
+    } catch (error) {
+      if (error instanceof TypeError) {
+        modalManager.spawn({
+          render: () => <NetworkErrorModal />,
+        })
+      } else {
+        modalManager.spawn({
+          render: () => (
+            <DiscordErrorsModal errors={JSON.parse((error as Error).message)} />
+          ),
+        })
+      }
     }
 
     setSubmitting(false)

types/DiscordError.ts

@@ -0,0 +1,11 @@
+// >= v8
+export type DiscordError = {
+  code: number
+  message: string
+  errors?: Record<string, unknown>
+}
+
+export type CodedError = {
+  code: string
+  message: string
+}