Add error boundary to ProgressiveCodeBlock

Author: andrewbranch

src/components/ErrorCatcher.tsx

@@ -0,0 +1,23 @@
+import React, { ErrorInfo } from 'react';
+
+export interface ErrorCatcherProps {
+  renderFallback: () => React.ReactNode;
+}
+
+export class ErrorCatcher extends React.Component<ErrorCatcherProps, { error: boolean }> {
+  public state = { error: false };
+
+  public componentDidCatch(error: Error, info: ErrorInfo) {
+    try {
+      ga('send', 'event', 'error', {
+        message: error.message,
+        componentStack: info.componentStack,
+      });
+    } catch { /**/ }
+    this.setState({ error: true });
+  }
+
+  public render() {
+    return this.state.error ? this.props.renderFallback() : this.props.children;
+  }
+}

src/components/InteractiveCodeBlock/InteractiveCodeBlock.tsx

@@ -261,7 +261,7 @@ const buttonStyles = css([resets.unbutton], {
   top: rhythm(0.5),
   right: 0,
   background: 'var(--background)',
-  ...minWidth(variables.sizes.bigEnough, padding(1, Side.Right)),
+  ...minWidth(variables.sizes.bigEnough, { right: rhythm(1) }),
 });
 
 function Button(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {

src/templates/Post.tsx

@@ -12,6 +12,7 @@ import { TypeScriptDiagnosticToken } from '../components/InteractiveCodeBlock/Ty
 import 'katex/dist/katex.min.css';
 import { shallowClone } from '../utils/shallowClone';
 import SEO from '../components/SEO';
+import { ErrorCatcher } from '../components/ErrorCatcher';
 
 const renderAst = new RehypeReact({
   createElement: React.createElement,
@@ -157,7 +158,11 @@ function ProgressiveCodeBlock(props: { children: [React.ReactElement<HTMLAttribu
     />
   ), { timeout: 1000 });
 
-  return deferredCodeBlock || <CheapCodeBlock>{text}</CheapCodeBlock>;
+  return (
+    <ErrorCatcher renderFallback={() => <CheapCodeBlock>{text}</CheapCodeBlock>}>
+      {deferredCodeBlock || <CheapCodeBlock>{text}</CheapCodeBlock>}
+    </ErrorCatcher>
+  );
 }
 
 type VirtualTypeScriptEnvironment = import('../utils/typescript/services').VirtualTypeScriptEnvironment;