Add setCatchHandler option for routes

packages/workbox-routing/src/Route.ts

@@ -27,6 +27,7 @@ class Route {
   handler: RouteHandlerObject;
   match: RouteMatchCallback;
   method: HTTPMethod;
+  catchHandler?: RouteHandlerObject;
 
   /**
    * Constructor for Route class.
@@ -62,6 +63,15 @@ class Route {
     this.match = match;
     this.method = method;
   }
+
+  /**
+   * 
+   * @param {module:workbox-routing-handlerCallback} handler A callback
+   * function that returns a Promise resolving to a Response
+   */
+  setCatchHandler(handler: RouteHandler) {
+    this.catchHandler = normalizeHandler(handler)
+  }
 }
 
 export {Route};

packages/workbox-routing/src/Router.ts

@@ -244,18 +244,45 @@ class Router {
       responsePromise = Promise.reject(err);
     }
 
-    if (responsePromise instanceof Promise && this._catchHandler) {
-      responsePromise = responsePromise.catch((err) => {
-        if (process.env.NODE_ENV !== 'production') {
-          // Still include URL here as it will be async from the console group
-          // and may not make sense without the URL
-          logger.groupCollapsed(`Error thrown when responding to: ` +
-            ` ${getFriendlyURL(url)}. Falling back to Catch Handler.`);
-          logger.error(`Error thrown by:`, route);
-          logger.error(err);
-          logger.groupEnd();
+    // Get route's catch handler, if it exists
+    const catchHandler = route && route.catchHandler;
+
+    if (responsePromise instanceof Promise && (this._catchHandler || catchHandler)) {
+      responsePromise = responsePromise.catch(async (err) => {
+        // If there's a route catch handler, process that first
+        if (catchHandler) {
+          if (process.env.NODE_ENV !== 'production') {
+            // Still include URL here as it will be async from the console group
+            // and may not make sense without the URL
+            logger.groupCollapsed(`Error thrown when responding to: ` +
+              ` ${getFriendlyURL(url)}. Falling back to route's Catch Handler.`);
+            logger.error(`Error thrown by:`, route);
+            logger.error(err);
+            logger.groupEnd();
+          }
+
+          try {
+            return await catchHandler.handle({url, request, event, params});
+          } catch (catchErr) {
+            err = catchErr;
+          }
         }
-        return this._catchHandler!.handle({url, request, event});
+
+        if (this._catchHandler) {
+          if (process.env.NODE_ENV !== 'production') {
+            // Still include URL here as it will be async from the console group
+            // and may not make sense without the URL
+            logger.groupCollapsed(`Error thrown when responding to: ` +
+              ` ${getFriendlyURL(url)}. Falling back to global Catch Handler.`);
+            logger.error(`Error thrown by:`, route);
+            logger.error(err);
+            logger.groupEnd();
+          }
+
+          return this._catchHandler.handle({url, request, event});
+        }
+
+        return Promise.reject(err);
       });
     }
 

test/workbox-routing/sw/test-Router.mjs

@@ -471,6 +471,43 @@ describe(`Router`, function() {
       expect(responseBody).to.eql(EXPECTED_RESPONSE_BODY);
     });
 
+    it(`should fall back to the Route's catch handler if there's an error in the Route's handler, if set`, async function() {
+      const router = new Router();
+      const route = new Route(
+          () => true,
+          () => Promise.reject(new Error()),
+      );
+      route.setCatchHandler(() => new Response(EXPECTED_RESPONSE_BODY));
+      router.registerRoute(route);
+
+      // route.match() always returns true, so the Request details don't matter.
+      const request = new Request(location);
+      const event = new FetchEvent('fetch', {request});
+      const response = await router.handleRequest({request, event});
+      const responseBody = await response.text();
+
+      expect(responseBody).to.eql(EXPECTED_RESPONSE_BODY);
+    });
+
+    it(`should fall back to the global catch handler if there's an error in the Route's catch handler`, async function() {
+      const router = new Router();
+      const route = new Route(
+          () => true,
+          () => Promise.reject(new Error()),
+      );
+      route.setCatchHandler(() => Promise.reject(new Error()));
+      router.setCatchHandler(() => new Response(EXPECTED_RESPONSE_BODY));
+      router.registerRoute(route);
+
+      // route.match() always returns true, so the Request details don't matter.
+      const request = new Request(location);
+      const event = new FetchEvent('fetch', {request});
+      const response = await router.handleRequest({request, event});
+      const responseBody = await response.text();
+
+      expect(responseBody).to.eql(EXPECTED_RESPONSE_BODY);
+    });
+
     it(`should return a response from the first matching route when there are multiple potential matches`, async function() {
       const router = new Router();
       const response1 = 'response1';