Browse Source

fix(ui): Prevent error boundary setting state after unmount (#20271)

Scott Cooper 4 years ago
parent
commit
d32e37e0b6
1 changed files with 11 additions and 5 deletions
  1. 11 5
      src/sentry/static/sentry/app/components/errorBoundary.tsx

+ 11 - 5
src/sentry/static/sentry/app/components/errorBoundary.tsx

@@ -49,10 +49,15 @@ class ErrorBoundary extends React.Component<Props, State> {
   };
 
   componentDidMount() {
+    this._isMounted = true;
     // Listen for route changes so we can clear error
-    this.unlistenBrowserHistory = browserHistory.listen(() =>
-      this.setState({error: null})
-    );
+    this.unlistenBrowserHistory = browserHistory.listen(() => {
+      // Prevent race between component unmount and browserHistory change
+      // Setting state on a component that is being unmounted throws an error
+      if (this._isMounted) {
+        this.setState({error: null});
+      }
+    });
   }
 
   componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
@@ -70,13 +75,14 @@ class ErrorBoundary extends React.Component<Props, State> {
   }
 
   componentWillUnmount() {
+    this._isMounted = false;
     if (this.unlistenBrowserHistory) {
       this.unlistenBrowserHistory();
     }
   }
 
-  // XXX: browserHistory.listen does not have a correct return type.
-  unlistenBrowserHistory: any;
+  private unlistenBrowserHistory?: ReturnType<typeof browserHistory.listen>;
+  private _isMounted = false;
 
   render() {
     const {error} = this.state;