From e3ba32d02bb02c083933b8d5793fb374e7323957 Mon Sep 17 00:00:00 2001
From: Maximilian Kaske <56969857+mxkaske@users.noreply.github.com>
Date: Tue, 2 Apr 2024 20:55:41 +0200
Subject: [PATCH] fix: checker request body (#739)

---
 apps/web/src/app/api/checker/test/route.ts    |  1 +
 apps/web/src/app/play/checker/[id]/utils.ts   |  2 +-
 .../web/src/components/forms/monitor/form.tsx | 34 +++++++++++++++++--
 .../forms/monitor/section-requests.tsx        |  2 +-
 4 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/app/api/checker/test/route.ts b/apps/web/src/app/api/checker/test/route.ts
index ec49ce93..cde1df7b 100644
--- a/apps/web/src/app/api/checker/test/route.ts
+++ b/apps/web/src/app/api/checker/test/route.ts
@@ -31,6 +31,7 @@ export async function POST(request: Request) {
     if (url === "https://www.openstatus.dev/api/checker/test") {
       return NextResponse.json({ success: true }, { status: 200 });
     }
+
     const res = await checkRegion(url, region, { method, headers, body });
 
     return NextResponse.json(res);
diff --git a/apps/web/src/app/play/checker/[id]/utils.ts b/apps/web/src/app/play/checker/[id]/utils.ts
index f35988a8..a412938b 100644
--- a/apps/web/src/app/play/checker/[id]/utils.ts
+++ b/apps/web/src/app/play/checker/[id]/utils.ts
@@ -104,7 +104,7 @@ export async function checkRegion(
           [key]: value,
         };
       }, {}),
-      body: opts?.body,
+      body: opts?.body ? JSON.parse(opts.body) : undefined,
     }),
     next: { revalidate: 0 },
   });
diff --git a/apps/web/src/components/forms/monitor/form.tsx b/apps/web/src/components/forms/monitor/form.tsx
index 6c326898..29b9d433 100644
--- a/apps/web/src/components/forms/monitor/form.tsx
+++ b/apps/web/src/components/forms/monitor/form.tsx
@@ -126,11 +126,32 @@ export function MonitorForm({
     });
   };
 
-  const pingEndpoint = async (region?: MonitorFlyRegion) => {
-    const { url, body, method, headers, statusAssertions, headerAssertions } =
-      form.getValues();
+  const validateJSON = (value?: string) => {
+    if (!value) return;
+    try {
+      const obj = JSON.parse(value) as Record<string, unknown>;
+      form.clearErrors("body");
+      return obj;
+    } catch (e) {
+      form.setError("body", {
+        message: "Not a valid JSON object",
+      });
+      return false;
+    }
+  };
 
+  const pingEndpoint = async (region?: MonitorFlyRegion) => {
     try {
+      const { url, body, method, headers, statusAssertions, headerAssertions } =
+        form.getValues();
+
+      if (body && body !== "") {
+        const validJSON = validateJSON(body);
+        if (!validJSON) {
+          return { error: "Not a valid JSON object.", data: undefined };
+        }
+      }
+
       const res = await fetch(`/api/checker/test`, {
         method: "POST",
         headers: new Headers({
@@ -140,6 +161,12 @@ export function MonitorForm({
         signal: AbortSignal.timeout(ABORT_TIMEOUT),
       });
 
+      if (!res.ok) {
+        return {
+          error: "Something went wrong. Please try again.",
+        };
+      }
+
       const as = assertions.deserialize(
         JSON.stringify([
           ...(statusAssertions || []),
@@ -175,6 +202,7 @@ export function MonitorForm({
 
       return { data, error: undefined };
     } catch (error) {
+      console.error(error);
       if (error instanceof Error && error.name === "AbortError") {
         return {
           error: `Abort error: request takes more then ${formatDuration(
diff --git a/apps/web/src/components/forms/monitor/section-requests.tsx b/apps/web/src/components/forms/monitor/section-requests.tsx
index 05da4272..2e36dedd 100644
--- a/apps/web/src/components/forms/monitor/section-requests.tsx
+++ b/apps/web/src/components/forms/monitor/section-requests.tsx
@@ -32,7 +32,6 @@ import {
 } from "@openstatus/ui";
 
 import { SectionHeader } from "../shared/section-header";
-import { RequestTestButton } from "./request-test-button";
 
 interface Props {
   form: UseFormReturn<InsertMonitor>;
@@ -207,6 +206,7 @@ export function SectionRequests({ form }: Props) {
                   </TooltipProvider>
                 </div>
                 <FormControl>
+                  {/* FIXME: cannot enter 'Enter' */}
                   <Textarea
                     rows={8}
                     placeholder='{ "hello": "world" }'
-- 
2.51.2