From 41088029f4e6454eed534ce77f37942c184aa56b Mon Sep 17 00:00:00 2001
From: Dmitry Gozman <dgozman@gmail.com>
Date: Wed, 8 Sep 2021 14:21:11 -0700
Subject: [PATCH] fix(html reporter): show fetch error message and use no-cache
 (#8788)

---
 src/web/htmlReport/htmlReport.css |  8 +++++++-
 src/web/htmlReport/htmlReport.tsx | 18 ++++++++++++------
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/web/htmlReport/htmlReport.css b/src/web/htmlReport/htmlReport.css
index b1edcc1c8a..542bf70197 100644
--- a/src/web/htmlReport/htmlReport.css
+++ b/src/web/htmlReport/htmlReport.css
@@ -94,7 +94,13 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 100%;
+  height: calc(100% - 40px);
+  flex-direction: column;
+  line-height: 40px;
+}
+
+.awesome.small {
+  font-size: 20px;
 }
 
 .image-preview img {
diff --git a/src/web/htmlReport/htmlReport.tsx b/src/web/htmlReport/htmlReport.tsx
index a70c60b56e..292adc624d 100644
--- a/src/web/htmlReport/htmlReport.tsx
+++ b/src/web/htmlReport/htmlReport.tsx
@@ -28,13 +28,18 @@ type Filter = 'Failing' | 'All';
 
 export const Report: React.FC = () => {
   const [report, setReport] = React.useState<JsonReport | undefined>();
+  const [fetchError, setFetchError] = React.useState<string | undefined>();
   const [selectedTest, setSelectedTest] = React.useState<JsonTestCase | undefined>();
 
   React.useEffect(() => {
     (async () => {
-      const result = await fetch('report.json');
-      const json = (await result.json()) as JsonReport;
-      setReport(json);
+      try {
+        const result = await fetch('report.json', { cache: 'no-cache' });
+        const json = (await result.json()) as JsonReport;
+        setReport(json);
+      } catch (e) {
+        setFetchError(e.message);
+      }
     })();
   }, []);
   const [filter, setFilter] = React.useState<Filter>('Failing');
@@ -62,12 +67,13 @@ export const Report: React.FC = () => {
             }}>{item}</div>;
           })
         }</div>
-        {filter === 'All' && report?.suites.map((s, i) => <ProjectTreeItem key={i} suite={s} setSelectedTest={setSelectedTest} selectedTest={selectedTest}></ProjectTreeItem>)}
-        {filter === 'Failing' && !!unexpectedTestCount && report?.suites.map((s, i) => {
+        {!fetchError && filter === 'All' && report?.suites.map((s, i) => <ProjectTreeItem key={i} suite={s} setSelectedTest={setSelectedTest} selectedTest={selectedTest}></ProjectTreeItem>)}
+        {!fetchError && filter === 'Failing' && !!unexpectedTestCount && report?.suites.map((s, i) => {
           const hasUnexpectedOutcomes = !!unexpectedTests.get(s)?.length;
           return hasUnexpectedOutcomes && <ProjectFlatTreeItem key={i} suite={s} setSelectedTest={setSelectedTest} selectedTest={selectedTest} unexpectedTests={unexpectedTests.get(s)!}></ProjectFlatTreeItem>;
         })}
-        {filter === 'Failing' && !unexpectedTestCount && <div className='awesome'>You are awesome!</div>}
+        {!fetchError && filter === 'Failing' && !unexpectedTestCount && <div className='awesome'>You are awesome!</div>}
+        {fetchError && <div className='awesome small'><div>Failed to load report</div><div>Are you using npx playwright?</div></div>}
       </div>
     </SplitView>
   </div>;