[update] Display error when mime type is set up correctly but missing actual worker files to load a document (#104)

Author: ZhijieZhang

src/helpers/fireEvent.js

@@ -0,0 +1,18 @@
+import { isIE11 } from 'helpers/device';
+
+const fireEvent = (eventName, data) => {
+  let event;
+  if (CustomEvent && !isIE11) {
+    event = new CustomEvent(eventName, { detail: data, bubbles: true, cancelable: true });
+  } else {
+    event = document.createEvent('Event');
+    event.initEvent(eventName, true, true);
+    event.detail = data;
+  }
+  window.dispatchEvent(event);
+};
+
+export default fireEvent;
+export const fireError = message => {
+  fireEvent('loaderror', message);
+};

src/helpers/loadDocument.js

@@ -2,7 +2,7 @@ import i18next from 'i18next';
 
 import core from 'core';
 import getBackendPromise from 'helpers/getBackendPromise';
-import { isIE11 } from 'helpers/device';
+import { fireError } from 'helpers/fireEvent';
 import { engineTypes, documentTypes } from 'constants/types';
 import { supportedPDFExtensions, supportedOfficeExtensions, supportedBlackboxExtensions } from 'constants/supportedFiles';
 import actions from 'actions';
@@ -227,7 +227,7 @@ const getEngineType = state => {
   }
 };
 
-const getDocumentExtension = doc => {
+export const getDocumentExtension = doc => {
   let extension;
   if (doc) {
     const pdfExtensions = supportedPDFExtensions.join('|');
@@ -245,7 +245,7 @@ const getDocumentExtension = doc => {
   return extension;
 };
 
-const getDocName = state => {
+export const getDocName = state => {
   // if the filename is specified then use that for checking the extension instead of the doc path
   const { path, filename, initialDoc } = state.document;
   return filename || path || initialDoc;
@@ -255,11 +255,11 @@ const isPDFNetJSExtension = extension => {
   return isOfficeExtension(extension) || isPDFExtension(extension);
 };
 
-const isOfficeExtension = extension => {
+export const isOfficeExtension = extension => {
   return supportedOfficeExtensions.indexOf(extension) !== -1;
 };
 
-const isPDFExtension = extension => {
+export const isPDFExtension = extension => {
   return supportedPDFExtensions.indexOf(extension) !== -1;
 };
 
@@ -296,25 +296,9 @@ const getDocTypeData = ({ docName, pdfBackendType, officeBackendType, engineType
   return { type, extension, workerTransportPromise };
 };
 
-const fireError = message => {
-  fireEvent('loaderror', message);
-};
-
 const isLocalFile = state => {
   const path = selectors.getDocumentPath(state);
-
+  
   return !/https?:\/\//.test(path);
 };
 
-export const fireEvent = (eventName, data) => {
-  let event;
-  if (CustomEvent && !isIE11) {
-    event = new CustomEvent(eventName, { detail: data, bubbles: true, cancelable: true });
-  } else {
-    event = document.createEvent('Event');
-    event.initEvent(eventName, true, true);
-    event.detail = data;
-  }
-  window.dispatchEvent(event);
-};
-

src/helpers/setupMIMETypeTest.js

@@ -1,41 +1,93 @@
-export default () => {
+import { fireError } from 'helpers/fireEvent';
+import { getDocName, getDocumentExtension, isOfficeExtension, isPDFExtension } from 'helpers/loadDocument';
+
+export default store => {
   window.addEventListener('error', e => {
     const { src } = e.target;
-    
+
     if (!src) {
       // in Safari, an error occurred in web workers will also trigger this event
       // since we handle worker error in loaderror event, we just return here
       return;
     }
 
+    const docExtension =   getDocumentExtension(getDocName(store.getState()));
     if (src.endsWith('nmf')) {
-      testMIMEType(['nmf']);
+      testMIMEType(['nmf'])
+        .then(() => {
+          // when the server has correct setup for MIME type but SimpleWorker.nmf is missing 
+          // we don't want to fire error since in this case we will fallback to use other worker files and can still load the document successfully
+          if (src.indexOf('SimpleWorker.nmf') === -1) {
+            errorMissingWorkerFiles(docExtension);
+          }
+        })
+        .catch(errorMIMEType);
     }
     if (src.endsWith('pexe')) {
-      testMIMEType(['pexe']);
+      testMIMEType(['pexe'])
+        .then(() => {
+          if (src.indexOf('SimpleWorker.pexe') === -1) {
+            errorMissingWorkerFiles(docExtension);
+          }
+        })
+        .catch(errorMIMEType);
     }
   }, true);
 
-  window.addEventListener('loaderror', e => {
-    if (missFilesToLoad(e)) {
-      testMIMEType(['res', 'mem', 'wasm', 'xod']);
+  window.addEventListener('loaderror', ({ detail }) => {
+    const docExtension = getDocumentExtension(getDocName(store.getState()));
+
+    if (detail.startsWith('Error retrieving file:') && detail.includes('.xod')) {
+      testMIMEType(['xod'])
+      .then(() => errorMissingWorkerFiles(docExtension))
+      .catch(errorMIMEType);
+    }
+    if (detail === 'The worker has encountered an error') {
+      testMIMEType(['mem', 'wasm'])
+      .then(() => errorMissingWorkerFiles(docExtension))
+      .catch(errorMIMEType);
+    }
+    if (detail === `Couldn't fetch resource file.`) {
+      testMIMEType(['res'])
+      .then(() => errorMissingWorkerFiles(docExtension))
+      .catch(errorMIMEType);
     }
   });
 };
 
 const testMIMEType = fileExtensions => {
-  fileExtensions.forEach(extension => {
-    fetch(`${window.CoreControls.getWorkerPath()}/assets/mime-types/test.${extension}`)
-      .then(({ status }) => {
+  const fetchingTestFiles = fileExtensions.map(extension => {
+    return new Promise((resolve, reject) => {
+      const URL = `${window.CoreControls.getWorkerPath()}/assets/mime-types/test.${extension}`; 
+      
+      fetch(URL).then(({ status }) => {
         if (status === 404) {
-          console.error(`Your server does not have a MIME type set for extension ${extension}. Please see https://www.pdftron.com/documentation/web/guides/basics/troubleshooting-document-loading/#mime-types for more information.`);
+          reject(extension);
+        } else {
+          resolve();
         }
       });
+    });
   });
+
+  return Promise.all(fetchingTestFiles);
+};
+
+const errorMissingWorkerFiles = docExtension => {
+  let errorMessage;
+
+  if (isOfficeExtension(docExtension)) {
+    errorMessage = 'Failed to find Office worker files. This project is not set up to work with Office files.';  
+  } 
+  if (isPDFExtension(docExtension)) {
+    errorMessage = 'Failed to find PDF worker files. This project is not set up to work with PDF files.';
+  }
+
+  fireError(errorMessage);
+  console.error(errorMessage);
 };
 
-const missFilesToLoad = ({ detail }) => {
-  return detail === `Couldn't fetch resource file.` 
-      || detail === 'The worker has encountered an error'
-      || (detail.startsWith('Error retrieving file:') && detail.includes('.xod'));
+const errorMIMEType = fileExtension => {
+  fireError(`Your server does not have a MIME type set for extension ${fileExtension}. Open developer console to see the link for correct MIME type setup`);
+  console.error(`Your server does not have a MIME type set for extension ${fileExtension}. Please see https://www.pdftron.com/documentation/web/guides/basics/troubleshooting-document-loading/#mime-types for more information.`);
 };

src/index.js

@@ -112,7 +112,7 @@ if (window.CanvasRenderingContext2D) {
     setupPDFTron();
     setupDocViewer();
     setupI18n(state);
-    setupMIMETypeTest();
+    setupMIMETypeTest(store);
     setUserPermission(state);
     setAutoSwitch();
     setDefaultToolColor();

src/redux/actions/exposedActions.js

@@ -1,6 +1,6 @@
 import isDataElementPanel from 'helpers/isDataElementPanel';
 import core from 'core';
-import { fireEvent } from 'helpers/loadDocument';
+import fireEvent from 'helpers/fireEvent';
 
 // viewer
 export const enableAllElements = () => ({ type: 'ENABLE_ALL_ELEMENTS', payload: {} });