Better error handling.

Author: kentwalters

dst/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-retool",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "private": false,
   "repository": {
     "type": "git",

src/App.js

@@ -3,7 +3,8 @@ import Retool from './components/Retool'
 
 function App() {
   return (
-    <Retool url="https://retoolin.tryretool.com/embedded/public/f7607e1f-670a-4ebf-9a09-be54cf17181e"/>
+    // <Retool/>
+    <Retool url="https://retoolin.tryretool.com/embedded/public/f7607e1f-670a-4ebf-9a09-be54cf17181e"></Retool>
   );
 }
 

src/components/Retool.js

@@ -4,6 +4,9 @@ import './retool.css';
 class Retool extends React.Component {
     constructor(props) {
         super(props);
+        
+        if (!this.props.url) throw new Error('Please pass a url into the Retool component.')
+        
         this.state = {
             url: props.url,
             elementWatchers: {}
@@ -16,7 +19,9 @@ class Retool extends React.Component {
     }
 
     startListening = () => {
-        window.addEventListener('message', (e) => this.handle(e) );
+        if (this.iframe) {
+            window.addEventListener('message', (e) => this.handle(e) );
+        }
     }
 
     startWatchers = () => {
@@ -96,15 +101,15 @@ class Retool extends React.Component {
 
     render() {
         return (
-            <iframe 
-                frameBorder="none" 
-                src={this.state.url}
-                ref = {e => {
-                    this.iframe = e
-                }}
-            >
-            </iframe>
-        );
+                <iframe 
+                    frameBorder="none" 
+                    src={this.state.url}
+                    ref = {e => {
+                        this.iframe = e
+                    }}
+                >
+                </iframe>
+            );
     }
 }