experimental: Error support on components level (#5136)

## Description

Error toasts in components instead of failing

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: istarkov

.github/workflows/main.yml

@@ -133,7 +133,7 @@ jobs:
               }
             }
             const results = [
-              await assertSize('./fixtures/ssg/dist/client', 352),
+              await assertSize('./fixtures/ssg/dist/client', 356),
               await assertSize('./fixtures/react-router-netlify/build/client', 368),
               await assertSize('./fixtures/webstudio-features/build/client', 1052),
             ]

apps/builder/app/canvas/canvas.tsx

@@ -77,6 +77,7 @@ import { createInstanceElement } from "./elements";
 import { Body } from "./shared/body";
 import { subscribeScrollbarSize } from "./scrollbar-width";
 import { compareMedia } from "@webstudio-is/css-engine";
+import { builderApi } from "~/shared/builder-api";
 
 registerContainers();
 
@@ -98,6 +99,16 @@ const FallbackComponent = ({ error, resetErrorBoundary }: FallbackProps) => {
   );
 };
 
+const handleError = (error: unknown) => {
+  if (error instanceof Error) {
+    builderApi.toast.error(error.message);
+    return;
+  }
+
+  builderApi.toast.error(`Unknown error: ${String(error)}`);
+  console.error(error);
+};
+
 const useElementsTree = (components: Components, instances: Instances) => {
   const page = useStore($selectedPage);
   const isPreviewMode = useStore($isPreviewMode);
@@ -128,6 +139,8 @@ const useElementsTree = (components: Components, instances: Instances) => {
           imageLoader: wsImageLoader,
           resources: {},
           breakpoints,
+          // error reporting
+          onError: handleError,
         }}
       >
         {createInstanceElement({

fixtures/react-router-docker/app/routes/[another-page]._index.tsx

@@ -274,6 +274,7 @@ const Outlet = () => {
         assetBaseUrl,
         resources,
         breakpoints,
+        onError: console.error,
       }}
     >
       {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}

fixtures/react-router-docker/app/routes/_index.tsx

@@ -274,6 +274,7 @@ const Outlet = () => {
         assetBaseUrl,
         resources,
         breakpoints,
+        onError: console.error,
       }}
     >
       {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}

fixtures/react-router-netlify/app/routes/[another-page]._index.tsx

@@ -274,6 +274,7 @@ const Outlet = () => {
         assetBaseUrl,
         resources,
         breakpoints,
+        onError: console.error,
       }}
     >
       {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}

fixtures/react-router-netlify/app/routes/_index.tsx

@@ -274,6 +274,7 @@ const Outlet = () => {
         assetBaseUrl,
         resources,
         breakpoints,
+        onError: console.error,
       }}
     >
       {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}

fixtures/react-router-vercel/app/routes/[another-page]._index.tsx

@@ -274,6 +274,7 @@ const Outlet = () => {
         assetBaseUrl,
         resources,
         breakpoints,
+        onError: console.error,
       }}
     >
       {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}

fixtures/react-router-vercel/app/routes/_index.tsx

@@ -274,6 +274,7 @@ const Outlet = () => {
         assetBaseUrl,
         resources,
         breakpoints,
+        onError: console.error,
       }}
     >
       {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}

fixtures/ssg-netlify-by-project-id/pages/index/+Page.tsx

@@ -12,6 +12,7 @@ const PageComponent = ({ data }: { data: PageContext["data"] }) => {
         assetBaseUrl,
         resources,
         breakpoints,
+        onError: console.error,
       }}
     >
       {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}

fixtures/ssg/pages/another-page/+Page.tsx

@@ -15,6 +15,7 @@ const PageComponent = ({ data }: { data: PageContext["data"] }) => {
         assetBaseUrl,
         resources,
         breakpoints,
+        onError: console.error,
       }}
     >
       {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}