Javascript 如何在angular universal中捕获服务器上的组件错误？

这是我的服务器代码，下一个片段

home.comnpont

：

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);
        }
    );
});

这是my

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"]);
    }
}

在控制台中，我得到错误，这是正常的：

但在回调中使用此条件不起作用：

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

在这里，

err==null

。为什么?

我想在服务器上记录这些错误，并将它们写入一个文件

---

如何做？

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

角度误差处理程序

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;
    }
  }

}

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);
        }
    );
});

应用程序模块

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

通用服务器

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;
    }
  }

}

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);
        }
    );
});

---

如果您只是想按原样抛出错误，您可以直接使用

响应

令牌，并在错误处理程序中设置正确的状态代码和主体

如果您检查了服务器运行的终端，我想它正在终端中打印。可能是express呈现引擎生成html时出错而不提供error@RaviSevta是的，它在本地工作。问题是

err

总是

null

。我这样设置视图引擎：

app.set（“视图引擎”、“html”）；应用程序集（“视图”，客户端应用程序目录）

ERROR\u WRAPPER来自哪里？您可以使用您想要的名称（只要提供者和组件使用相同的名称），但最好是创建一个注入令牌，但是当我在service.ts调用

ERROR\u WRAPPER

时，

ERROR\u WRAPPER

需要使用

server.ts

中的引号导入引用，例如

provide:'ERROR\u WRAPPER'，