@embeddable.com/sdk-react 2.2.3 → 2.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@embeddable.com/sdk-react",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "description": "Embeddable SDK React plugin responsible for React components bundling.",
   "keywords": [
     "embeddable",

package/templates/embeddable-entry-point.jsx.template

@@ -1,4 +1,5 @@
 import 'vite/modulepreload-polyfill';
+{{ERROR_FALLBACK_COMPONENT_IMPORT}}
 
 import React from 'react';
 import ReactDOM from 'react-dom/client';
@@ -15,9 +16,32 @@ export default (rootEl, componentName, props) => {
         rootEl.removeEventListener('EMBEDDABLE_COMPONENT:UNMOUNT', unmountHandler);
     };
     root.render(
+    <ErrorBoundary fallback={{{ERROR_FALLBACK_COMPONENT}}}>
         <React.Suspense fallback={<div/>}>
             <Component {...props} propsUpdateListener={rootEl} />
         </React.Suspense>
+    </ErrorBoundary>
     );
     rootEl.addEventListener('EMBEDDABLE_COMPONENT:UNMOUNT', unmountHandler);
+}
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true, error };
+  }
+
+  render() {
+    if (this.state.hasError && this.props.fallback) {
+      const FallbackComponent = this.props.fallback;
+      return <FallbackComponent error={this.state.error} />
+    }
+
+    return this.props.children;
+  }
 }