Add onError prop to LiveProvider

README.md

@@ -156,6 +156,8 @@ 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
+|onError|PropTypes.func|Called with `Error` object when render fails. Allows you to listen for errors and implement custom logic.|
+|onRender|PropTypes.func|Called when component is rendered successfully. Can be used alongside `onError` to clear own error state.|
 |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 +245,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,8 @@ export default class LiveProvider extends Component {
     disabled: PropTypes.bool,
     language: PropTypes.string,
     noInline: PropTypes.bool,
+    onError: PropTypes.func,
+    onRender: PropTypes.func,
     scope: PropTypes.object,
     theme: PropTypes.object,
     transformCode: PropTypes.node
@@ -54,6 +56,9 @@ export default class LiveProvider extends Component {
 
   onError = error => {
     this.setState({ error: error.toString() });
+    if (this.props.onError) {
+      this.props.onError(error);
+    }
   };
 
   transpile = ({ code, scope, transformCode, noInline = false }) => {
@@ -63,9 +68,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.onError) {
+        this.props.onError(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 +93,9 @@ export default class LiveProvider extends Component {
       }
     } catch (error) {
       this.setState({ ...state, error: error.toString() });
+      if (this.props.onError) {
+        this.props.onError();
+      }
     }
   };
 

typings/react-live.d.ts

@@ -9,14 +9,16 @@ type DivProps = HTMLProps<HTMLDivElement>
 type PreProps = HTMLProps<HTMLPreElement>
 
 // LiveProvider
-export type LiveProviderProps = Omit<DivProps, 'scope'> & {
+export type LiveProviderProps = Omit<DivProps, 'scope' | 'onError'> & {
   scope?: { [key: string]: any };
   code?: string;
   noInline?: boolean;
   transformCode?: (code: string) => string;
   language?: Language;
   disabled?: boolean;
   theme?: PrismTheme;
+  onError?: (error: Error) => void;
+  onRender?: () => void;
 }
 
 export const LiveProvider: ComponentClass<LiveProviderProps>