feat(error-handling): introduce unified and configurable error handling (#7761)

Refs #7778

test/unit/core/plugins/safe-render/index.jsx

@@ -0,0 +1,253 @@
+import React from "react"
+import { mount } from "enzyme"
+import sinon from "sinon"
+import { Provider } from "react-redux"
+import noop from "lodash/noop"
+
+import System from "core/system"
+import ViewPlugin from "core/plugins/view"
+import SafeRenderPlugin from "core/plugins/safe-render"
+
+describe("safe-render", function() {
+  const DisableComponentDidCatchPlugin = () => ({
+    fn: {
+      componentDidCatch: noop,
+    }
+  })
+
+  it("should catch errors thrown inside of React Component class render method", function() {
+    class BrokenComponent extends React.Component {
+      render() {
+        return null
+      }
+    }
+    const BrokenComponentPlugin = () => {
+      return {
+        components: {
+          BrokenComponent,
+        }
+      }
+    }
+
+    const system = new System({
+      plugins: [
+        ViewPlugin,
+        BrokenComponentPlugin,
+        SafeRenderPlugin({
+          fullOverride: true,
+          componentList: ["BrokenComponent"],
+        }),
+        DisableComponentDidCatchPlugin,
+      ]
+    })
+
+    const SafeBrokenComponent = system.getSystem().getComponent("BrokenComponent")
+    const wrapper = mount(<SafeBrokenComponent />)
+    wrapper.find(BrokenComponent).simulateError(new Error("error"))
+
+    expect(wrapper.text()).toEqual("😱 Could not render BrokenComponent, see the console.")
+  })
+
+  it("should catch errors thrown inside of PureComponent class render method", function() {
+    class BrokenComponent extends React.PureComponent {
+      render() {
+        return null
+      }
+    }
+    const BrokenComponentPlugin = () => {
+      return {
+        components: {
+          BrokenComponent,
+        }
+      }
+    }
+
+    const system = new System({
+      plugins: [
+        ViewPlugin,
+        BrokenComponentPlugin,
+        SafeRenderPlugin({
+          fullOverride: true,
+          componentList: ["BrokenComponent"],
+        }),
+        DisableComponentDidCatchPlugin,
+      ]
+    })
+
+    const SafeBrokenComponent = system.getSystem().getComponent("BrokenComponent")
+    const wrapper = mount(<SafeBrokenComponent />)
+    wrapper.find(BrokenComponent).simulateError(new Error("error"))
+
+    expect(wrapper.text()).toEqual("😱 Could not render BrokenComponent, see the console.")
+  })
+
+  it("should catch errors thrown inside of function component", function() {
+    const BrokenComponent = () => null
+    const BrokenComponentPlugin = () => {
+      return {
+        components: {
+          BrokenComponent,
+        }
+      }
+    }
+
+    const system = new System({
+      plugins: [
+        ViewPlugin,
+        BrokenComponentPlugin,
+        SafeRenderPlugin({
+          fullOverride: true,
+          componentList: ["BrokenComponent"],
+        }),
+        DisableComponentDidCatchPlugin,
+      ]
+    })
+
+    const SafeBrokenComponent = system.getSystem().getComponent("BrokenComponent")
+    const wrapper = mount(<SafeBrokenComponent />)
+    wrapper.find(BrokenComponent).simulateError(new Error("error"))
+
+    expect(wrapper.text()).toEqual("😱 Could not render BrokenComponent, see the console.")
+  })
+
+  it("should catch errors thrown inside of container created from React Component class", function() {
+    class BrokenComponent extends React.Component {
+      render() {
+        return null
+      }
+    }
+    const BrokenComponentPlugin = () => {
+      return {
+        components: {
+          BrokenComponent,
+        }
+      }
+    }
+
+    const system = new System({
+      plugins: [
+        ViewPlugin,
+        BrokenComponentPlugin,
+        SafeRenderPlugin({
+          fullOverride: true,
+          componentList: ["BrokenComponent"],
+        }),
+        DisableComponentDidCatchPlugin,
+      ]
+    })
+
+    const SafeBrokenComponent = system.getSystem().getComponent("BrokenComponent", true)
+    const wrapper = mount(
+      <Provider store={system.getStore()}>
+        <SafeBrokenComponent />
+      </Provider>
+    )
+    wrapper.find(BrokenComponent).simulateError(new Error("error"))
+
+    expect(wrapper.text()).toEqual("😱 Could not render BrokenComponent, see the console.")
+  })
+
+  it("should catch errors thrown inside of container created from function component", function() {
+    const BrokenComponent = () => null
+    const BrokenComponentPlugin = () => {
+      return {
+        components: {
+          BrokenComponent,
+        }
+      }
+    }
+
+    const system = new System({
+      plugins: [
+        ViewPlugin,
+        BrokenComponentPlugin,
+        SafeRenderPlugin({
+          fullOverride: true,
+          componentList: ["BrokenComponent"],
+        }),
+        DisableComponentDidCatchPlugin,
+      ]
+    })
+
+    const SafeBrokenComponent = system.getSystem().getComponent("BrokenComponent", true)
+    const wrapper = mount(
+      <Provider store={system.getStore()}>
+        <SafeBrokenComponent />
+      </Provider>
+    )
+    wrapper.find(BrokenComponent).simulateError(new Error("error"))
+
+    expect(wrapper.text()).toEqual("😱 Could not render BrokenComponent, see the console.")
+  })
+
+  it("should render custom Fallback component", function() {
+    const BrokenComponent = () => null
+    const BrokenComponentPlugin = () => {
+      return {
+        components: {
+          BrokenComponent,
+        }
+      }
+    }
+    const FallbackPlugin = () => ({
+      components: {
+        Fallback: () => "fallback component",
+      },
+    })
+
+    const system = new System({
+      plugins: [
+        ViewPlugin,
+        BrokenComponentPlugin,
+        SafeRenderPlugin({
+          fullOverride: true,
+          componentList: ["BrokenComponent"],
+        }),
+        FallbackPlugin,
+        DisableComponentDidCatchPlugin,
+      ]
+    })
+
+    const SafeBrokenComponent = system.getSystem().getComponent("BrokenComponent")
+    const wrapper = mount(<SafeBrokenComponent />)
+    wrapper.find(BrokenComponent).simulateError(new Error("error"))
+
+    expect(wrapper.text()).toEqual("fallback component")
+  })
+
+  it("should call custom componentDidCatch hook", function() {
+    const BrokenComponent = () => null
+    const componentDidCatch = sinon.spy()
+
+    const BrokenComponentPlugin = () => {
+      return {
+        components: {
+          BrokenComponent,
+        }
+      }
+    }
+    const ComponentDidCatchPlugin = () => ({
+      fn: {
+        componentDidCatch,
+      },
+    })
+
+    const system = new System({
+      plugins: [
+        ViewPlugin,
+        BrokenComponentPlugin,
+        SafeRenderPlugin({
+          fullOverride: true,
+          componentList: ["BrokenComponent"],
+        }),
+        ComponentDidCatchPlugin,
+      ]
+    })
+
+    const SafeBrokenComponent = system.getSystem().getComponent("BrokenComponent")
+    const wrapper = mount(<SafeBrokenComponent />)
+    wrapper.find(BrokenComponent).simulateError(new Error("error"))
+
+    expect(componentDidCatch.calledOnce).toBe(true)
+  })
+})