fix: render nothing on website when collection is invalid

User got 500 on published site. Turned out collection got invalid data (not array). We need to keep site working in such cases, missing piece will be more intuitive than 500 on whole website.
webstudio-is · Feb 2, 2025 · 93d2933 · 93d2933
1 parent b9f84e7
commit 93d2933
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 8 deletions.
diff --git a/fixtures/webstudio-custom-template/app/__generated__/[sitemap.xml]._index.tsx b/fixtures/webstudio-custom-template/app/__generated__/[sitemap.xml]._index.tsx
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[resources]._index.tsx b/fixtures/webstudio-remix-vercel/app/__generated__/[resources]._index.tsx
diff --git a/fixtures/webstudio-remix-vercel/app/__generated__/[sitemap.xml]._index.tsx b/fixtures/webstudio-remix-vercel/app/__generated__/[sitemap.xml]._index.tsx
diff --git a/packages/react-sdk/src/component-generator.test.tsx b/packages/react-sdk/src/component-generator.test.tsx
@@ -458,7 +458,7 @@ test("generate collection component as map", () => {
   ).toEqual(
     validateJSX(
       clear(`
-    {data?.map((element: any, index: number) =>
+    {data?.map?.((element: any, index: number) =>
     <Fragment key={index}>
     <Label />
     <Button
@@ -636,7 +636,7 @@ test("avoid generating collection parameter variable as state", () => {
     const Page = () => {
     let [data, set$data] = useVariableState<any>(["apple","orange","mango"])
     return <Body>
-    {data?.map((element: any, index: number) =>
+    {data?.map?.((element: any, index: number) =>
     <Fragment key={index}>
     </Fragment>
     )}
@@ -854,7 +854,7 @@ let [condition, set$condition] = useVariableState<any>(false)
 return <Body>
 {(condition) &&
 <>
-{[]?.map((collectionItem: any, index: number) =>
+{[]?.map?.((collectionItem: any, index: number) =>
 <Fragment key={index}>
 </Fragment>
 )}

diff --git a/packages/react-sdk/src/component-generator.ts b/packages/react-sdk/src/component-generator.ts
@@ -251,8 +251,9 @@ export const generateJsxElement = ({
       return "";
     }
     const indexVariable = scope.getName(`${instance.id}-index`, "index");
-    // fix implicit any error
-    generatedElement += `{${collectionDataValue}?.map((${collectionItemValue}: any, ${indexVariable}: number) =>\n`;
+    // collection can be nullable or invalid type
+    // fix implicitly on published sites
+    generatedElement += `{${collectionDataValue}?.map?.((${collectionItemValue}: any, ${indexVariable}: number) =>\n`;
     generatedElement += `<Fragment key={${indexVariable}}>\n`;
     generatedElement += children;
     generatedElement += `</Fragment>\n`;