handling error correctly

app/api/ask-ai/route.ts

@@ -201,7 +201,14 @@ export async function POST(request: NextRequest) {
           );
         }
       } finally {
-        await writer?.close();
+        try {
+          // Only close if writer exists and is not already closed
+          if (writer && !writer.closed) {
+            await writer.close();
+          }
+        } catch {
+          // Ignore errors on close
+        }
       }
     })();
 

components/editor/ask-ai/index.tsx

@@ -190,7 +190,10 @@ export function AskAI({
             }
 
             const chunk = decoder.decode(value, { stream: true });
-            try {
+
+            const isJson =
+              chunk.trim().startsWith("{") && chunk.trim().endsWith("}");
+            if (isJson) {
               const res = JSON.parse(chunk);
               if (res.openLogin) {
                 setOpen(true);
@@ -204,7 +207,7 @@ export function AskAI({
               }
               setisAiWorking(false);
               return;
-            } catch {
+            } else {
               thinkResponse += chunk;
               if (selectedModel?.isThinker) {
                 const thinkMatch = thinkResponse.match(/<think>[\s\S]*/)?.[0];

components/editor/deploy-button/index.tsx

@@ -60,6 +60,8 @@ export function DeployButton({
     }
   };
 
+  // TODO add a way to do not allow people to deploy if the html is broken.
+
   return (
     <div className="flex items-center justify-end gap-5">
       <div className="relative flex items-center justify-end">

components/editor/index.tsx

@@ -172,6 +172,10 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
     }
   }, [currentTab]);
 
+  const handleEditorValidation = (markers: editor.IMarker[]) => {
+    console.log("Editor validation markers:", markers);
+  };
+
   return (
     <section className="h-[100dvh] bg-neutral-950 flex flex-col">
       <Header tab={currentTab} onNewTab={setCurrentTab}>
@@ -201,7 +205,7 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
                 }}
               />
               <Editor
-                language="html"
+                defaultLanguage="html"
                 theme="vs-dark"
                 className={classNames(
                   "h-full bg-neutral-900 transition-all duration-200 absolute left-0 top-0",
@@ -228,6 +232,7 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
                   editorRef.current = editor;
                   monacoRef.current = monaco;
                 }}
+                onValidate={handleEditorValidation}
               />
               <AskAI
                 html={html}

package-lock.json

@@ -10,7 +10,7 @@
       "dependencies": {
         "@huggingface/hub": "^2.2.0",
         "@huggingface/inference": "^4.0.3",
-        "@monaco-editor/react": "^4.7.0",
+        "@monaco-editor/react": "^4.7.0-rc.0",
         "@radix-ui/react-avatar": "^1.1.10",
         "@radix-ui/react-checkbox": "^1.3.2",
         "@radix-ui/react-collapsible": "^1.1.11",
@@ -886,12 +886,12 @@
       }
     },
     "node_modules/@monaco-editor/react": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.7.0.tgz",
-      "integrity": "sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==",
+      "version": "4.7.0-rc.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.7.0-rc.0.tgz",
+      "integrity": "sha512-YfjXkDK0bcwS0zo8PXptvQdCQfOPPtzGsAzmIv7PnoUGFdIohsR+NVDyjbajMddF+3cWUm/3q9NzP/DUke9a+w==",
       "license": "MIT",
       "dependencies": {
-        "@monaco-editor/loader": "^1.5.0"
+        "@monaco-editor/loader": "^1.4.0"
       },
       "peerDependencies": {
         "monaco-editor": ">= 0.25.0 < 1",

package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@huggingface/hub": "^2.2.0",
     "@huggingface/inference": "^4.0.3",
-    "@monaco-editor/react": "^4.7.0",
+    "@monaco-editor/react": "^4.7.0-rc.0",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-checkbox": "^1.3.2",
     "@radix-ui/react-collapsible": "^1.1.11",