Allow users to opt-in to "compatibility mode" if uncaught JS errors occur

.dockerignore

@@ -17,6 +17,7 @@ frontend/static/frontend/*.js
 frontend/static/frontend/*.css
 frontend/static/frontend/*.map
 frontend/static/frontend/report.html
+frontend/safe_mode/safe-mode.min.js
 staticfiles/
 frontend/lib/queries/__generated__/
 querybuilder.js

.gitignore

@@ -16,6 +16,7 @@ frontend/static/frontend/*.js
 frontend/static/frontend/*.css
 frontend/static/frontend/*.map
 frontend/static/frontend/report.html
+frontend/safe_mode/safe-mode.min.js
 staticfiles/
 frontend/lib/queries/__generated__/
 querybuilder.js

frontend/context_processors.py

@@ -0,0 +1,19 @@
+from typing import Dict, Any
+from project.util.js_snippet import JsSnippetContextProcessor
+import frontend.safe_mode
+
+
+class SafeModeJsSnippet(JsSnippetContextProcessor):
+    @property
+    def template(self) -> str:
+        return frontend.safe_mode.SAFE_MODE_JS.read_text()
+
+    var_name = 'SAFE_MODE_SNIPPET'
+
+
+def safe_mode(request):
+    is_enabled = frontend.safe_mode.is_enabled(request)
+    ctx: Dict[str, Any] = {'is_safe_mode_enabled': is_enabled}
+    if not is_enabled:
+        ctx.update(SafeModeJsSnippet()(request))
+    return ctx

frontend/lib/app.tsx

@@ -194,10 +194,6 @@ export class AppWithoutRouter extends React.Component<AppPropsWithRouter, AppSta
                 }} />
                 </div>
               </div>
-              <div className="hero-foot">
-                {/* This is a no-JS fallback. */}
-                <Navbar />
-              </div>
             </section>
           </AriaAnnouncer>
         </AppContext.Provider>

frontend/lib/main.ts

@@ -21,7 +21,5 @@ window.addEventListener('load', () => {
   // Since JS is now loaded, let's remove that restriction.
   div.removeAttribute('hidden');
 
-  document.documentElement.classList.remove('jf-no-js');
-
   startApp(div, initialProps);
 });

frontend/lib/navbar.tsx

@@ -4,25 +4,28 @@ import { Link } from 'react-router-dom';
 import autobind from 'autobind-decorator';
 import { AriaExpandableButton } from './aria';
 import { bulmaClasses } from './bulma';
-import { AppContext, AppContextType } from './app-context';
+import { AppContextType, withAppContext } from './app-context';
 import Routes from './routes';
 
-type Dropdown = 'developer';
+type Dropdown = 'developer'|'all';
 
-export interface NavbarProps {
-}
+export type NavbarProps = AppContextType;
 
 interface NavbarState {
   currentDropdown: Dropdown|null;
   isHamburgerOpen: boolean;
 }
 
-export default class Navbar extends React.Component<NavbarProps, NavbarState> {
+class NavbarWithoutAppContext extends React.Component<NavbarProps, NavbarState> {
   navbarRef: React.RefObject<HTMLDivElement>;
 
   constructor(props: NavbarProps) {
     super(props);
-    this.state = { currentDropdown: null, isHamburgerOpen: false };
+    if (props.session.isSafeModeEnabled) {
+      this.state = { currentDropdown: 'all', isHamburgerOpen: true };
+    } else {
+      this.state = { currentDropdown: null, isHamburgerOpen: false };
+    }
     this.navbarRef = React.createRef();
   }
 
@@ -56,13 +59,33 @@ export default class Navbar extends React.Component<NavbarProps, NavbarState> {
 
   componentDidMount() {
     window.addEventListener('focus', this.handleFocus, true);
+    window.addEventListener('resize', this.handleResize, false);
   }
 
   componentWillUnmount() {
     window.removeEventListener('focus', this.handleFocus, true);
+    window.removeEventListener('resize', this.handleResize, false);
+  }
+
+  isDropdownActive(dropdown: Dropdown) {
+    return this.state.currentDropdown === dropdown || this.state.currentDropdown === 'all';
+  }
+
+  @autobind
+  handleResize() {
+    this.setState({
+      currentDropdown: null,
+      isHamburgerOpen: false
+    });
   }
 
-  renderDevMenu({ server }: AppContextType): JSX.Element|null {
+  @autobind
+  handleShowSafeModeUI() {
+    window.SafeMode.showUI();
+  }
+
+  renderDevMenu(): JSX.Element|null {
+    const { server, session } = this.props;
     const { state } = this;
 
     if (!server.debug) return null;
@@ -71,18 +94,21 @@ export default class Navbar extends React.Component<NavbarProps, NavbarState> {
       <NavbarDropdown
         name="Developer"
         isHamburgerOpen={state.isHamburgerOpen}
-        isActive={state.currentDropdown === 'developer'}
+        isActive={this.isDropdownActive('developer')}
         onToggle={() => this.toggleDropdown('developer')}
       >
         <a className="navbar-item" href={`${server.staticURL}frontend/report.html`}>Webpack analysis</a>
         <a className="navbar-item" href="/graphiql">GraphiQL</a>
         <a className="navbar-item" href="/loc/example.pdf">Example PDF</a>
         <a className="navbar-item" href="https://github.com/JustFixNYC/tenants2">GitHub</a>
+        {!session.isSafeModeEnabled &&
+          <a className="navbar-item" href="#" onClick={this.handleShowSafeModeUI}>Show safe mode UI</a>}
       </NavbarDropdown>
     );
   }
 
-  renderNavbarBrand({ server }: AppContextType): JSX.Element {
+  renderNavbarBrand(): JSX.Element {
+    const { server } = this.props;
     const { state } = this;
 
     return (
@@ -106,30 +132,31 @@ export default class Navbar extends React.Component<NavbarProps, NavbarState> {
 
   render() {
     const { state } = this;
+    const { session, server } = this.props;
 
     return (
-      <AppContext.Consumer>
-        {appContext => (
-          <nav className="navbar" ref={this.navbarRef}>
-            <div className="container">
-              {this.renderNavbarBrand(appContext)}
-              <div className={bulmaClasses('navbar-menu', state.isHamburgerOpen && 'is-active')}>
-                <div className="navbar-end">
-                  {appContext.session.isStaff && <a className="navbar-item" href={appContext.server.adminIndexURL}>Admin</a>}
-                  {appContext.session.phoneNumber
-                    ? <Link className="navbar-item" to={Routes.logout}>Sign out</Link>
-                    : <Link className="navbar-item" to={Routes.login}>Sign in</Link> }
-                  {this.renderDevMenu(appContext)}
-                </div>
-              </div>
+      <nav className="navbar" ref={this.navbarRef}>
+        <div className="container">
+          {this.renderNavbarBrand()}
+          <div className={bulmaClasses('navbar-menu', state.isHamburgerOpen && 'is-active')}>
+            <div className="navbar-end">
+              {session.isStaff && <a className="navbar-item" href={server.adminIndexURL}>Admin</a>}
+              {session.phoneNumber
+                ? <Link className="navbar-item" to={Routes.logout}>Sign out</Link>
+                : <Link className="navbar-item" to={Routes.login}>Sign in</Link> }
+              {this.renderDevMenu()}
             </div>
-          </nav>
-        )}
-      </AppContext.Consumer>
+          </div>
+        </div>
+      </nav>
     );
   }
 }
 
+const Navbar = withAppContext(NavbarWithoutAppContext);
+
+export default Navbar;
+
 interface NavbarDropdownProps {
   name: string;
   children: any;

frontend/lib/progressive-enhancement.tsx

@@ -77,6 +77,9 @@ export class ProgressiveEnhancement extends React.Component<ProgressiveEnhanceme
   componentDidCatch(error: Error) {
     if (this.isEnhanced()) {
       this.setState({ hasCaughtError: true });
+      if (window.SafeMode) {
+        window.SafeMode.ignoreError(error);
+      }
     } else {
       throw error;
     }

frontend/lib/queries/AllSessionInfo.graphql

@@ -2,6 +2,7 @@ fragment AllSessionInfo on SessionInfo {
     phoneNumber
     csrfToken
     isStaff
+    isSafeModeEnabled
     onboardingStep1 {
         name
         address

frontend/lib/queries/AllSessionInfo.ts

@@ -93,6 +93,10 @@ export interface AllSessionInfo {
    * Whether or not the currently logged-in user is a staff member.
    */
   isStaff: boolean;
+  /**
+   * Whether or not the current session has safe/compatibility mode compatibility mode) enabled.
+   */
+  isSafeModeEnabled: boolean;
   onboardingStep1: AllSessionInfo_onboardingStep1 | null;
   onboardingStep2: AllSessionInfo_onboardingStep2 | null;
   onboardingStep3: AllSessionInfo_onboardingStep3 | null;
@@ -107,6 +111,7 @@ export const graphQL = `fragment AllSessionInfo on SessionInfo {
     phoneNumber
     csrfToken
     isStaff
+    isSafeModeEnabled
     onboardingStep1 {
         name
         address

frontend/lib/queries/LoginMutation.ts

@@ -105,6 +105,10 @@ export interface LoginMutation_output_session {
    * Whether or not the currently logged-in user is a staff member.
    */
   isStaff: boolean;
+  /**
+   * Whether or not the current session has safe/compatibility mode compatibility mode) enabled.
+   */
+  isSafeModeEnabled: boolean;
   onboardingStep1: LoginMutation_output_session_onboardingStep1 | null;
   onboardingStep2: LoginMutation_output_session_onboardingStep2 | null;
   onboardingStep3: LoginMutation_output_session_onboardingStep3 | null;

frontend/lib/queries/LogoutMutation.ts

@@ -105,6 +105,10 @@ export interface LogoutMutation_output_session {
    * Whether or not the currently logged-in user is a staff member.
    */
   isStaff: boolean;
+  /**
+   * Whether or not the current session has safe/compatibility mode compatibility mode) enabled.
+   */
+  isSafeModeEnabled: boolean;
   onboardingStep1: LogoutMutation_output_session_onboardingStep1 | null;
   onboardingStep2: LogoutMutation_output_session_onboardingStep2 | null;
   onboardingStep3: LogoutMutation_output_session_onboardingStep3 | null;

frontend/lib/queries/OnboardingStep4Mutation.ts

@@ -105,6 +105,10 @@ export interface OnboardingStep4Mutation_output_session {
    * Whether or not the currently logged-in user is a staff member.
    */
   isStaff: boolean;
+  /**
+   * Whether or not the current session has safe/compatibility mode compatibility mode) enabled.
+   */
+  isSafeModeEnabled: boolean;
   onboardingStep1: OnboardingStep4Mutation_output_session_onboardingStep1 | null;
   onboardingStep2: OnboardingStep4Mutation_output_session_onboardingStep2 | null;
   onboardingStep3: OnboardingStep4Mutation_output_session_onboardingStep3 | null;

frontend/lib/tests/util.tsx

@@ -85,7 +85,8 @@ export const FakeSessionInfo: Readonly<AllSessionInfo> = {
   customIssues: [],
   accessDates: [],
   landlordDetails: null,
-  letterRequest: null
+  letterRequest: null,
+  isSafeModeEnabled: false
 };
 
 export const FakeAppContext: AppContextType = {

frontend/safe_mode/__init__.py

@@ -0,0 +1 @@
+from .safe_mode import *  # noqa

frontend/safe_mode/safe-mode-globals.d.ts

@@ -0,0 +1,23 @@
+interface Window {
+  SafeMode: {
+    /**
+     * Let safe mode know that an error has been handled, so it
+     * shouldn't show its UI if it sees the error.
+     */
+    ignoreError(e: Error): void;
+
+    /**
+     * Report an error to safe mode. Normally safe mode
+     * automatically detects these via an error event
+     * listener, so this is only really intended to be
+     * used by tests.
+     */
+    reportError(e: Error): void;
+
+     /**
+     * Show the safe-mode opt-in UI. This is intended primarily
+     * for manual testing, but client code can use it too.
+     */
+    showUI(): void;
+  }
+}