Handling "Cannot match any routes " in express engine

🐞 Bug report

What modules are related to this issue?

• aspnetcore-engine
• builders
• common
• express-engine
• hapi-engine

Is this a regression?

No

Description

When an error occurs in the express engine, there seems to be no way to catch it and allow express to respond with a 500 error. Instead, the browser keeps waiting for a response that never comes.

A good example is provided by ticket #1630. If you navigate to a url that doesn’t exist, the browser keeps waiting for a response that never comes. The server console shows an error, ie.:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'CCC'
Error: Cannot match any routes. URL Segment: 'CCC'
    at ApplyRedirects.noMatchError (/Users/mathieu/Projects/zimmo/v3-universal/dist/v3-universal/server/main.js:136824:16)
    at CatchSubscriber.selector (/Users/mathieu/Projects/zimmo/v3-universal/dist/v3-universal/server/main.js:136808:28)

While there is a specific solution for the given error in #1630, I’m looking for a more generic solution in case “something breaks” inside Angular. The end game is to not let the express app crash and/or return a 500 response to the browser.

I tried a few things to catch the given error in server.ts.

Example 1 - Generic Express error middleware:

  server.use(function (err, req, res, next) {
    // this is never called
    res.status(404).send("Sorry can't find that!")
  })

Example 2 - res.render callback

  server.get('*', (req, res) => {
    res.render('index.html', { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] }, function (err, html) {
        // this is never called
        if (err) { throw err; };
        res.send(html);
     });
  });

Example 3 - try/catch for res.render

  server.get('*', (req, res) => {
    try {
    res.render('index.html', { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
    } catch (err) {
       // this is never called
       throw err;
    }
  });

🔬 Minimal Reproduction

#1630 covers a straight-forward scenario.

🌍 Your Environment

Angular CLI: 10.2.3
Node: 12.16.2
OS: darwin x64

Angular: 10.2.5
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1002.3
@angular-devkit/build-angular   0.1002.3
@angular-devkit/core            10.2.3
@angular-devkit/schematics      10.2.3
@angular/cli                    10.2.3
@nguniversal/builders           10.1.0
@nguniversal/express-engine     10.1.0
@schematics/angular             10.2.3
@schematics/update              0.1002.3
rxjs                            6.6.7
typescript                      4.0.7

[webberig]

I’ve come to realise this is not really a Universal bug/problem.

My mistake was to approach these errors from the Universal point-of-view, not realising they would prove problematic even without Universal. Even without Universal engine, Angular will behave odd when given examples in my previous posts occur.

Angular offers different options to handle errors, but does not implement them by default when you create a new application:

• Adding the fallback route (easiest solution for 404’s)
• Provide your own ErrorHandler class (https://angular.io/api/core/ErrorHandler)
• Listen to NavigationError events (more advanced)

Developers should address given scenarios and add error handling to the Angular application. After that, Universal should land on its feet.

[lindsaylevine]

hello! i’m experiencing the exact same issue. like @webberig, i have tried error middleware, try catch, promise catching, res.render callback. no matter what, this error never gets caught, and causes the serverless function that wraps it to time out.

i challenge this comment in the issue @webberig linked. this has been consistently reported across several angular repos. and as we’ve pointed out, try catch does not handle a res.render that never resolves or rejects because it is infinitely stuck. cc @CaerusKaru

related issues ive found:

1. https://github.com/angular/angular/issues/17073#issuecomment-316864447 – this is an older one but seems very relevant to the underlying cause here. says fixed but the issue definitely still persists.
2. https://github.com/angular/universal/issues/1810
3. https://github.com/angular/universal/issues/1425