fix json from stripe

Author: OmarMcAdam

pages/o/[orgSlug]/[endpointId]/index.vue

@@ -105,17 +105,17 @@ const activeMessageHeaders = computed(() => {
 
 const activeMessageBody = computed(() => {
   if (!activeMessage.value) return "";
-  if (activeMessage.value.contentType === "application/json") {
-    return JSON.stringify(JSON.parse(activeMessage.value.body), null, 2);
+  const split = activeMessage.value.contentType.split(";")[0];
+  if (split === "application/json") {
+    return JSON.stringify(activeMessage.value.bodyJson, null, 2);
   }
-  return activeMessage.value.body;
+  return activeMessage.value.body as string;
 });
 
 const activeMessageContentType = computed(() => {
   if (!activeMessage.value) return "";
-  const type = activeMessage.value.contentType.startsWith("application/")
-    ? activeMessage.value.contentType.split("/")[1]
-    : activeMessage.value.contentType;
+  const split = activeMessage.value.contentType.split(";")[0];
+  const type = split.startsWith("application/") ? split.split("/")[1] : split;
   return type;
 });
 
@@ -410,7 +410,7 @@ async function getMessageDeliveries() {
                       square
                       icon="i-ph-clipboard"
                       variant="soft"
-                      @click="copy(activeMessage.body)"
+                      @click="copy(activeMessageBody)"
                       class="active:ring-green-500 active:ring-2"
                     />
                   </UTooltip>

server/db/schema.ts

@@ -203,7 +203,8 @@ export const messages = pgTable("messages", {
   endpointId: uuid("endpoint_id").notNull(),
   headers: json("headers").notNull(),
   method: varchar("method").notNull(),
-  body: varchar("body").notNull(),
+  body: varchar("body"),
+  bodyJson: json("body_json"),
   contentType: varchar("content_type").notNull(),
   response: json("response")
     .notNull()

server/routes/endpoint/[endpointId].ts

@@ -39,20 +39,23 @@ export default defineEventHandler(async (event) => {
   const payloadBody = await readBody(event);
   const requestHost = getRequestHost(event);
   const requestMethod = event.node.req.method as string;
-  const contentType = getHeader(event, "content-type");
-  const body = JSON.stringify(payloadBody) ?? payloadBody.toString();
+  const contentTypeUnparsed = getHeader(event, "content-type");
   if (!endpointResponse) return sendNoContent(event, 404);
   if (!payloadBody || !payloadHeaders) return sendNoContent(event, 400);
   setResponseStatus(event, endpointResponse.response.code);
   await send(event, endpointResponse.response.content, "application/text");
 
+  // parse the content type
+  const contentType = contentTypeUnparsed?.split(";")[0] || "application/json";
+  const isJson = isBodyJson(contentType);
+
   // save the message to the database
   const messageInsert = await db
     .insert(messages)
     .values({
       orgId: endpointResponse.orgId,
       headers: payloadHeaders,
-      body: body,
+      ...(isJson ? { bodyJson: payloadBody } : { body: payloadBody }),
       endpointId: endpointId,
       origin: requestHost,
       method: requestMethod,

server/trpc/routers/messages.ts

@@ -28,6 +28,7 @@ export const messageRouter = router({
           headers: true,
           origin: true,
           body: true,
+          bodyJson: true,
           response: true,
           createdAt: true,
           contentType: true,

server/utils/contentType.ts

@@ -0,0 +1,4 @@
+export function isBodyJson(contentType: string) {
+  const splitType = contentType.split(";")[0];
+  return splitType === "application/json";
+}

server/utils/destinationSender.ts

@@ -2,6 +2,7 @@ import type { FetchError } from "ofetch";
 import { eq } from "drizzle-orm";
 import { db } from "~/server/db";
 import { endpoints, messageDeliveries, messages } from "~/server/db/schema";
+import { isBodyJson } from "./contentType";
 
 export async function sendMessageToDestinations(
   endpointId: string,
@@ -43,6 +44,7 @@ export async function sendMessageToDestinations(
       id: true,
       headers: true,
       body: true,
+      bodyJson: true,
       contentType: true,
       endpointId: true,
       method: true,
@@ -54,10 +56,9 @@ export async function sendMessageToDestinations(
 
   if (!message || message.orgId !== orgId) return;
   const payloadHeaders = message.headers;
-  const body =
-    message.contentType === "application/json"
-      ? JSON.parse(message.body)
-      : message.body;
+  const body = isBodyJson(message.contentType)
+    ? (message.bodyJson as JSON)
+    : (message.body as string);
   if (!body || !payloadHeaders) return;
 
   // Handle Forwarding to the destinations