add error state to profile page

app/actions/game.js

@@ -34,10 +34,16 @@ async function loadGame(gameOrPath) {
     gameToLoad = new SlippiGame(gameOrPath);
   }
 
+  let settings, stats;
+
   // Generate data here so that maybe we can add a loading state
-  const settings = gameToLoad.getSettings();
-  const stats = gameToLoad.getStats();
-  gameToLoad.getMetadata();
+  try {
+    settings = gameToLoad.getSettings();
+    stats = gameToLoad.getStats();
+    gameToLoad.getMetadata();
+  } catch {
+    return null;
+  }
 
   // This is jank and I shouldn't do this... but the rest of the app kind of relies on these being
   // set on the object which was legacy behavior. Preferably all of the places where this is used

app/components/stats/GameProfile.js

@@ -75,6 +75,11 @@ export default class GameProfile extends Component {
       return this.renderLoading();
     }
 
+    const game = _.get(this.props, ['store', 'game']) || null;
+    if (!game) {
+      return this.renderError();
+    }
+
     const gameSettings = _.get(this.props.store, ['game', 'settings']) || {};
     const players = gameSettings.players || [];
     if (players.length !== 2) {
@@ -116,12 +121,32 @@ export default class GameProfile extends Component {
     );
   }
 
+  renderError() {
+    return (
+      <Header
+        color="red"
+        inverted={true}
+        as="h1"
+        textAlign="center"
+        icon={true}
+      >
+        <Icon name="exclamation circle" />
+        Error loading file
+      </Header>
+    );
+  }
+
   renderGameProfileHeader() {
     const isLoading = _.get(this.props.store, 'isLoading') || false;
     if (isLoading) {
       return null;
     }
 
+    const game = _.get(this.props, ['store', 'game']) || null;
+    if (!game) {
+      return null;
+    }
+
     return (
       <div className={styles['stats-player-header']}>
         {this.renderMatchupDisplay()}
@@ -174,7 +199,7 @@ export default class GameProfile extends Component {
           <Label size="large" className={labelClasses}>
             {playerCode}
           </Label>
-        ) : null }
+        ) : null}
         <Header inverted={true} textAlign="center" as="h2">
           {playerNamesByIndex[player.playerIndex]}
         </Header>