如何在 Angular Universal 中捕获服务器上的组件错误？

Question

这是我的服务器代码，下一个片段渲染角度home.comnponent：

app.get("*", (req, res) => {
    res.render(
        `../${CLIENT_DIST_DIR}/index`,
        {
            req: req,
            res: res,
            providers: [
                {
                    provide: REQUEST, useValue: (req)
                },
                {
                    provide: RESPONSE, useValue: (res)
                },
                {
                    provide: "ORIGIN_URL",
                    useValue: (`${http}://${req.headers.host}`)
                }
            ]
        },
        (err, html) => {
            if (err) {
                Log.error("NG render error", err);
                throw err;
            }
            res.send(html);
        }
    );
});

这是我的home.component 错误：

@Component({
    selector: "app-home",
    templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {
    constructor(private http: TransferHttpService,
                @Inject(AppStorage) private appStorage: Storage) {
    }

    ngOnInit(): void {
         let t = null;
         console.log(t["sd"]["sd"]["sd"]);
    }
}

在控制台我得到错误，没关系：

ERROR TypeError: Cannot read property 'sd' of undefined
    at HomeComponent.ngOnInit (nodejs\dist\proxy\server.js:1402:58876)
    at checkAndUpdateDirectiveInline (nodejs\dist\proxy\server.js:47324:19)
    at checkAndUpdateNodeInline (nodejs\dist\proxy\server.js:48588:20)
    at checkAndUpdateNode (nodejs\dist\proxy\server.js:48550:16)

但是在回调中这个条件不起作用：

.....
(err, html) => {
                if (err) {
                    Log.error("NG render error", err);
                    throw err;
                }
                res.send(html);
            }
.....

在这里，err == null。为什么？

我想在服务器上记录此类错误并将它们写入文件。

怎么做？

Answer 1

我不确定为什么它不起作用，但作为一种解决方法，您可以尝试实现一个自定义错误处理程序，它会捕获这种错误并将其分配给服务器端提供的变量

角度错误处理程序

import {Optional, Injectable, ErrorHandler } from '@angular/core';

@Injectable()
export class CustomErrorHandlerService extends ErrorHandler{

  constructor( @Optional() @Inject('ERROR_WRAPPER') private errorWrapper: any ) { 

  }

  handleError(error: Error) {

    console.log('Custom Error Handler error: ' + error.toString());
    if(this.errorWrapper)//serverSide
    {
        this.errorWrapper.error = error;
    }
  }

}

应用模块

  providers: [
  //...
  {
    provide: ErrorHandler, useClass:
    CustomErrorHandlerService
  }] 

通用服务器

app.get("*", (req, res) => {

    let errorWrapper = {
    error: any;
    }

    res.render(
        `../${CLIENT_DIST_DIR}/index`,
        {
            req: req,
            res: res,
            providers: [
                {
                    provide: REQUEST, useValue: (req)
                },
                {
                    provide: RESPONSE, useValue: (res)
                },
                { 
                    provide: ERROR_WRAPPER, useValue: (errorWrapper)
                },
                {
                    provide: "ORIGIN_URL",
                    useValue: (`${http}://${req.headers.host}`)
                }
            ]
        },
        (err, html) => {
            if (err) {
                Log.error("NG render error", err);
                throw err;
            }
            if(errorWrapper.error)
            {
                //handle your error here
            }
            res.send(html);
        }
    );
});

如果您只想按原样抛出错误，您可以直接使用RESPONSE 令牌并在错误处理程序中设置正确的状态码和正文