[tfjs-core] do not hang on invalid browser files (#8517)

`tf.io.browserFiles` doesn't fail when loading invalid files. or rather, it fails, but never rejects the promise, making the `IOHandler.load` hang forever.

wrapping the `JSON.parse` call in a try/catch and rejecting accordingly did the trick. and a small test to try it out.

note: `FileReader.readAsText()` is a callback way to go around reading files. the promise-based `Blob.text()` would make `BrowserFile.load` simpler and safer (but felt ouf-of-scope here).

Author: tharvik

tfjs-core/src/io/browser_files.ts

@@ -139,8 +139,15 @@ class BrowserFiles implements IOHandler {
     return new Promise((resolve, reject) => {
       const jsonReader = new FileReader();
       jsonReader.onload = (event: Event) => {
-        // tslint:disable-next-line:no-any
-        const modelJSON = JSON.parse((event.target as any).result) as ModelJSON;
+        let modelJSON: ModelJSON;
+        try {
+          // tslint:disable-next-line:no-any
+          modelJSON = JSON.parse((event.target as any).result);
+        } catch {
+          reject(new Error(`Failed to parse file ${
+            this.jsonFile.name}: {e.message}`));
+          return;
+        }
 
         const modelTopology = modelJSON.modelTopology;
         if (modelTopology == null) {

tfjs-core/src/io/browser_files_test.ts

@@ -677,4 +677,12 @@ describeWithFlags('browserFiles', BROWSER_ENVS, () => {
     expect(() => tf.io.browserFiles(null)).toThrowError(/at least 1 file/);
     expect(() => tf.io.browserFiles([])).toThrowError(/at least 1 file/);
   });
+
+  it('Invalid JSON leads to Error', async () => {
+    const file = new File(['invalid'], 'model.json', {
+      type: 'application/json',
+    });
+    const filesHandler = tf.io.browserFiles([file]);
+    await expectAsync(filesHandler.load()).toBeRejectedWithError(/parse file/);
+  });
 });