Merge pull request #3137 from overleaf/msm-react-error-boundary

Add react-error-boundary to handle react errors in scope

GitOrigin-RevId: 9bd8261057122fce08d8cea3b19b2c71e1d949f4

services/web/frontend/js/features/outline/components/outline-pane.js

@@ -6,6 +6,7 @@ import { useTranslation, Trans } from 'react-i18next'
 
 import OutlineRoot from './outline-root'
 import localStorage from '../../../modules/localStorage'
+import withErrorBoundary from '../../../infrastructure/error-boundary'
 
 function OutlinePane({
   isTexFile,
@@ -108,4 +109,4 @@ OutlinePane.propTypes = {
   highlightedLine: PropTypes.number
 }
 
-export default OutlinePane
+export default withErrorBoundary(OutlinePane)

services/web/frontend/js/infrastructure/error-boundary.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import { ErrorBoundary } from 'react-error-boundary'
+
+function errorHandler(error, componentStack) {
+  if (window.Raven) {
+    Raven.captureException(error, {
+      extra: { componentStack },
+      tags: { mechanism: 'react-error-boundary' }
+    })
+  }
+}
+
+function withErrorBoundary(WrappedComponent, FallbackComponent) {
+  function ErrorBoundaryWrapper(props) {
+    return (
+      <ErrorBoundary
+        fallbackRender={FallbackComponent || null}
+        onError={errorHandler}
+      >
+        <WrappedComponent {...props} />
+      </ErrorBoundary>
+    )
+  }
+  ErrorBoundaryWrapper.propTypes = WrappedComponent.propTypes
+  ErrorBoundaryWrapper.displayName = `WithErrorBoundaryWrapper${WrappedComponent.displayName ||
+    WrappedComponent.name ||
+    'Component'}`
+  return ErrorBoundaryWrapper
+}
+
+export default withErrorBoundary

services/web/package-lock.json

@@ -20174,6 +20174,29 @@
         "scheduler": "^0.19.1"
       }
     },
+    "react-error-boundary": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-2.3.1.tgz",
+      "integrity": "sha512-w1i++MM5GV6WTnM3MtLdw9CNXxqydkZwbwNDT9GBFBaWs0sp21z27DGIevb3fism1T+LGfdWgTFlhaq7G1pIMA==",
+      "requires": {
+        "@babel/runtime": "^7.10.5"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.11.2",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz",
+          "integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.7",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
+          "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
+        }
+      }
+    },
     "react-i18next": {
       "version": "11.7.1",
       "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.7.1.tgz",

services/web/package.json

@@ -122,6 +122,7 @@
     "react": "^16.13.1",
     "react-bootstrap": "^0.33.1",
     "react-dom": "^16.13.1",
+    "react-error-boundary": "^2.3.1",
     "react-i18next": "^11.7.1",
     "react2angular": "^4.0.6",
     "redis-sharelatex": "^1.0.13",