feat: support configuring custom endpoints in loader scripts

This is useful for advanced users who might upload images to e.g.
Firebase Storage and then want to proxy image URLs to augment with an
`Authorization` header.

Author: devversion

report-app/report-server.ts

@@ -13,7 +13,7 @@ import {
 } from '../runner/reporting/report-local-disk';
 
 const app = express();
-const reportsLoaderPromise = getReportLoader();
+const reportsLoader = await getReportLoader();
 const options = getOptions();
 const serverDistFolder = dirname(fileURLToPath(import.meta.url));
 const browserDistFolder = resolve(serverDistFolder, '../browser');
@@ -23,7 +23,7 @@ let localDataPromise: Promise<FetchedLocalReports> | null = null;
 // Endpoint for fetching all available report groups.
 app.get('/api/reports', async (_, res) => {
   const [remoteGroups, localData] = await Promise.all([
-    reportsLoaderPromise.then((loader) => loader.getGroupsList()),
+    reportsLoader.getGroupsList(),
     resolveLocalData(options.reportsRoot),
   ]);
   const results = remoteGroups.slice();
@@ -44,8 +44,7 @@ app.get('/api/reports/:id', async (req, res) => {
   if (localData.has(id)) {
     result = [localData.get(id)!.run];
   } else {
-    const loader = await reportsLoaderPromise;
-    result = await loader.getGroupedReports(id);
+    result = await reportsLoader.getGroupedReports(id);
   }
 
   res.json(result);
@@ -68,15 +67,21 @@ app.use('/**', (req, res, next) => {
     .catch(next);
 });
 
+// Support custom endpoints by advanced users.
+await reportsLoader.configureExtraEndpoints?.(app);
+
 if (isMainModule(import.meta.url)) {
-  app.listen(options.port);
+  app.listen(options.port, () => {
+    console.log(`Server listening on port: ${options.port}`);
+  });
 }
 
 export const reqHandler = createNodeRequestHandler(app);
 
 interface ReportLoader {
   getGroupedReports: (groupId: string) => Promise<{ group: string }[]>;
   getGroupsList: () => Promise<{ id: string }[]>;
+  configureExtraEndpoints?: (expressApp: typeof app) => Promise<void>;
 }
 
 /** Gets the server options from the command line. */

report-app/src/app/pages/report-viewer/report-viewer.ts

@@ -235,14 +235,7 @@ export class ReportViewer {
   });
 
   protected getScreenshotUrl(result: AssessmentResult): string | null {
-    for (let i = result.attemptDetails.length - 1; i > -1; i--) {
-      const screenshotUrl =
-        result.attemptDetails[i].buildResult.screenshotPngUrl;
-      if (screenshotUrl) {
-        return screenshotUrl;
-      }
-    }
-    return null;
+    return result.build.screenshotPngUrl ?? null;
   }
 
   protected isLoading = this.reportsFetcher.isLoadingSingleReport;

runner/report-cli.ts

@@ -59,19 +59,26 @@ async function handler(cliArgs: Arguments<Options>): Promise<void> {
     );
   }
 
-  console.log(
-    formatTitleCard(
-      [
-        `View your reports at http://localhost:${cliArgs.port}`,
-        `Reports are served from ${relative(process.cwd(), reportsDir)}`,
-      ].join('\n')
-    )
-  );
-
   await executeCommand(
     'node report-app/server/server.mjs',
     join(import.meta.dirname, '..'),
     environmentVariables,
-    { forwardStderrToParent: true, forwardStdoutToParent: true }
+    {
+      forwardStderrToParent: true,
+      forwardStdoutToParent: true,
+      notifyWhenMatchingStdout: {
+        pattern: /Server listening on port:/,
+        notifyFn: () => {
+          console.log(
+            formatTitleCard(
+              [
+                `View your reports at http://localhost:${cliArgs.port}`,
+                `Reports are served from ${relative(process.cwd(), reportsDir)}`,
+              ].join('\n')
+            )
+          );
+        },
+      },
+    }
   );
 }

runner/utils/exec.ts

@@ -13,6 +13,7 @@ export function executeCommand(
   opts: {
     forwardStderrToParent?: boolean;
     forwardStdoutToParent?: boolean;
+    notifyWhenMatchingStdout?: { notifyFn: () => void; pattern: RegExp };
     abortSignal?: AbortSignal;
   } = {}
 ): Promise<string> {
@@ -28,6 +29,7 @@ export function executeCommand(
 
     let stdout = '';
     let stderr = '';
+    let notifyWhenMatchingStdout = opts.notifyWhenMatchingStdout;
 
     proc.on('error', (err) => {
       reject(err);
@@ -38,6 +40,13 @@ export function executeCommand(
       if (opts.forwardStdoutToParent) {
         process.stdout.write(c);
       }
+      if (
+        notifyWhenMatchingStdout &&
+        notifyWhenMatchingStdout.pattern.test(stdout)
+      ) {
+        notifyWhenMatchingStdout.notifyFn();
+        notifyWhenMatchingStdout = undefined;
+      }
     });
     proc.stderr!.on('data', (c) => {
       stderr += c;