Add onError prop to LiveProvider

README.md

@@ -156,6 +156,7 @@ It supports these props, while passing any others through to the `children`:
 |scope|PropTypes.object|Accepts custom globals that the `code` can use
 |noInline|PropTypes.bool|Doesn’t evaluate and mount the inline code (Default: `false`). Note: when using `noInline` whatever code you write must be a single expression (function, class component or some `jsx`) that can be returned immediately. If you'd like to render multiple components, use `noInline={true}`
 |transformCode|PropTypes.func|Accepts and returns the code to be transpiled, affording an opportunity to first transform it
+|onRender|PropTypes.func|Called when component is rendered (un)successfully. In the case of an unsuccessful render, an `Error` object is passed as the only argument.|
 |language|PropTypes.string|What language you're writing for correct syntax highlighting. (Default: `jsx`)
 |disabled|PropTypes.bool|Disable editing on the `<LiveEditor />` (Default: `false`)
 |theme|PropTypes.object|A `prism-react-renderer` theme object. See more [here](https://github.com/FormidableLabs/prism-react-renderer#theming)
@@ -243,5 +244,5 @@ Here are the various factors at play:
 
 ## Maintenance Status
 
-**Active:** Formidable is actively working on this project, and we expect to continue for work for the foreseeable future. Bug reports, feature requests and pull requests are welcome. 
+**Active:** Formidable is actively working on this project, and we expect to continue for work for the foreseeable future. Bug reports, feature requests and pull requests are welcome.
 

src/components/Live/LiveProvider.js

@@ -18,6 +18,7 @@ export default class LiveProvider extends Component {
     disabled: PropTypes.bool,
     language: PropTypes.string,
     noInline: PropTypes.bool,
+    onRender: PropTypes.func,
     scope: PropTypes.object,
     theme: PropTypes.object,
     transformCode: PropTypes.node
@@ -54,6 +55,9 @@ export default class LiveProvider extends Component {
 
   onError = error => {
     this.setState({ error: error.toString() });
+    if (this.props.onRender) {
+      this.props.onRender(error);
+    }
   };
 
   transpile = ({ code, scope, transformCode, noInline = false }) => {
@@ -63,9 +67,18 @@ export default class LiveProvider extends Component {
       scope
     };
 
-    const errorCallback = err =>
+    const errorCallback = err => {
       this.setState({ element: undefined, error: err.toString() });
-    const renderElement = element => this.setState({ ...state, element });
+      if (this.props.onRender) {
+        this.props.onRender(err);
+      }
+    };
+    const renderElement = element => {
+      this.setState({ ...state, element });
+      if (this.props.onRender) {
+        this.props.onRender();
+      }
+    };
 
     // State reset object
     const state = { unsafeWrapperError: undefined, error: undefined };
@@ -79,6 +92,9 @@ export default class LiveProvider extends Component {
       }
     } catch (error) {
       this.setState({ ...state, error: error.toString() });
+      if (this.props.onRender) {
+        this.props.onRender(error);
+      }
     }
   };
 

typings/react-live.d.ts

@@ -17,6 +17,7 @@ export type LiveProviderProps = Omit<DivProps, 'scope'> & {
   language?: Language;
   disabled?: boolean;
   theme?: PrismTheme;
+  onRender?: (error?: Error) => void;
 }
 
 export const LiveProvider: ComponentClass<LiveProviderProps>