Handle fetch and parse errors

src/components/Log.tsx

@@ -61,6 +61,8 @@ const Log = ({ ui, config }: { ui: UIState, config: Config }) => {
   const [fileSize, setFileSize] = useState<string>();
   const [parseElapsed, setParseElapsed] = useState<string>();
   const [samplesCount, setSamplesCount] = useState();
+  const [fetchError, setFetchError] = useState<Error>();
+  const [parseError, setParseError] = useState<Error>();
   const [step, setStep] = useState(0);
   const contentRef = useRef<HTMLDivElement | null>(null);
   const margin = 30;
@@ -92,10 +94,12 @@ const Log = ({ ui, config }: { ui: UIState, config: Config }) => {
     const controller = new AbortController();
     const { signal } = controller;
     const loadData = async () => {
+      try {
         const raw = await loadLogs((percent, total) => {
           setProgress(percent);
           setFileSize(formatBytes(total));
         }, signal);
+
         setFileSize(formatBytes(raw.byteLength));
 
         worker.postMessage(raw);
@@ -116,10 +120,16 @@ const Log = ({ ui, config }: { ui: UIState, config: Config }) => {
               setSamplesCount(data.records);
               setStep(2);
               break;
+            case 'error':
+              setParseError(data.error);
+              break;
             default:
               break;
           }
         };
+      } catch (error) {
+        setFetchError(error);
+      }
     };
 
     loadData();
@@ -176,19 +186,22 @@ const Log = ({ ui, config }: { ui: UIState, config: Config }) => {
                 <Progress
                   type="circle"
                   percent={progress}
+                  status={(fetchError || parseError) && 'exception'}
                   width={170}
                 />
                 <Divider />
                 <Steps current={step} direction={lg ? 'horizontal' : 'vertical'}>
                   <Step
                     title="Downloading"
-                    description="From the closest server"
                     subTitle={fileSize}
+                    description={fetchError ? fetchError!.message : 'Edge location: FRA53-C1'}
+                    status={fetchError && 'error'}
                   />
                   <Step
                     title="Decoding"
-                    description="Reading ones and zeros"
+                    description={parseError ? parseError!.message : 'Reading ones and zeros'}
                     subTitle={parseElapsed}
+                    status={parseError && 'error'}
                   />
                   <Step
                     title="Rendering"

src/workers/mlgParser.worker.ts

@@ -8,6 +8,7 @@ const ctx: Worker = self as any;
 ctx.addEventListener('message', ({ data }: { data: ArrayBuffer }) => {
   const t0 = performance.now();
 
+  try {
     const result = new Parser(data).parse((progress) => {
       ctx.postMessage({
         type: 'progress',
@@ -21,4 +22,7 @@ ctx.addEventListener('message', ({ data }: { data: ArrayBuffer }) => {
       records: result.records.length,
     });
     ctx.postMessage({ type: 'result', result });
+  } catch (error) {
+    ctx.postMessage({ type: 'error', error });
+  }
 });