Angular 如果发生错误，Universal 会一直加载

Question

我有一个 Angular 通用应用程序运行，它工作正常，除了如果在渲染时 Angular 代码中出现错误，而不是只是吐出一个 500 响应，它将永远加载，直到服务器认为它足够并吐出一个 503。

失败页面的示例是 https://msp-navigator.com/company/BpQzpAHaSFWbXvsgt3gc/saaslio. This one fails because it's only accessible to Admins, but in the resolve, due to a mistake, if you're not logged in, the user is undefined and the check fails. (user.roles?.includes('Admin') => user?.roles?.includes('Admin'). An example of a page that doesn't fail is https://msp-navigator.com/company/FsAqspiNe7jPCyOsIhT7/saaslio

server.ts中的路由定义如下：

  server.get('*', async (req, res, next) => {
    const origin = 'https://' + req.header('host');

    let settings: any;
    try {
      settings = await axios.get(environment.config.apiUrl + '/settings', {headers: {origin}});
    } catch (e) {
      res.sendStatus(404);

      return;
    }

    const transaction = Sentry.startTransaction({ op: 'main', name: 'Main' });
    Sentry.configureScope(scope => scope.setSpan(transaction));

    try {
      console.log('test 1');
      res.render(indexHtml, {
          req,
          providers: [
            { provide: APP_BASE_HREF, useValue: req.baseUrl },
            { provide: SETTINGS, useValue: settings.data }
          ],
        });
    } catch (e) {
      console.log('test 2');
      res.send(500);
    }

    transaction.finish();
  });

如果出现错误“测试 1”，则会记录错误，但永远不会记录“测试 2”。

我不确定我可以分享哪些其他代码，但请询问。

关于如何解决这个问题的任何想法？

Answer 1

这是因为渲染是异步的，这意味着您的 try/catch 不会处理错误。但是您可以向 render

提供回调

res.render(indexHtml, {
      req,
      providers: [
        { provide: APP_BASE_HREF, useValue: req.baseUrl },
        { provide: SETTINGS, useValue: settings.data }
      ],
    }, (err: Error, html: string) =>
{

  if(!html)
  {
      res.status(500);
  }
  res.send(html || err.message);
});

Angular 如果发生错误，Universal 会一直加载

Angular Universal keeps loading forever if an error occurs

angular-universal

angular