Add ability to track browser errors

A recent incident on Finder Frontend saw the filters on search pages
malfunctioning due to an error loading an asset file (which hadn't been
uploaded correctly). We could write a specific e2e test exercising the
filters, but ideally this functionality should already be tested
extensively in the app's own integration/system tests.

Instead, this adds a helper to enhance a test suite by keeping track of
console errors, Javascript exceptions, and network issues, which should
be able to catch many sources of unexpected failures in our frontend
code.

- Add `trackBrowserErrors` helper library
- Use `trackBrowserErrors` in the Finder Frontend e2e tests to begin
  with (possibly with a view to other apps opting in to this behaviour
  too)

lib/track-browser-errors.js

@@ -0,0 +1,35 @@
+import { expect } from "@playwright/test";
+
+// trackBrowserErrors enhances a test suite with error tracking for Javascript errors, console
+// errors, and network errors. It keeps track of errors for every test, and will fail if any issues
+// are encountered.
+const trackBrowserErrors = (test) => {
+  let problems = [];
+
+  test.beforeEach(async ({ page }) => {
+    problems = [];
+
+    page.on("console", (msg) => {
+      if (msg.type() === "error") {
+        const location = msg.location();
+        const locationText = `${location.url}:${location.lineNumber}:${location.columnNumber}`;
+
+        problems.push(`${msg.text()}\n    at ${locationText}`);
+      }
+    });
+
+    page.on("pageerror", (error) => {
+      problems.push(error.message);
+    });
+
+    page.on("requestfailed", (request) => {
+      problems.push(request.failure().errorText);
+    });
+  });
+
+  test.afterEach(async () => {
+    expect(problems, "Encountered Javascript issues on page").toEqual([]);
+  });
+}
+
+export { trackBrowserErrors };

tests/finder-frontend.spec.js

@@ -1,7 +1,10 @@
 import { expect } from "@playwright/test";
 import { test } from "../lib/cachebust-test";
+import { trackBrowserErrors } from "../lib/track-browser-errors";
 
 test.describe("Finder frontend", { tag: ["@app-finder-frontend"] }, () => {
+  trackBrowserErrors(test);
+
   test("Can search for ministers and senior officials", async ({ page }) => {
     await page.goto("/government/people");
     await expect(page.getByRole("heading", { name: "All ministers and senior officials on GOV.UK" })).toBeVisible();