How do I get a better stack trace on Angular errors

问题

Currently, when I get an error in my production Angular (v7) app, I get a stack trace like this. But this is virtually impossible to get any meaningful information from. How can I get a better stack trace, so that I could narrow down where this elusive error is coming from? Right now, I'm living with this error in prod because it never happens on my development machine, and I have no idea how to isolate it because the stacktrace is virtually useless to me. I am used to languages like C#, where you get a very concise stacktrace that gives you a map down to the function in error. This stack trace has no meaning.

TypeError: Cannot read property 'appendChild' of null
at create_dom_structure (eval at  (:15:1), :1:16231)
at load_map (eval at  (:15:1), :1:101028)
at Object.load (eval at  (:15:1), :1:107834)
at eval (eval at  (:15:1), :1:108251)
at t.invokeTask (https://mywebsite.com/polyfills.d8680adf69e7ebd1de57.js:1:8844)
at Object.onInvokeTask (https://mywebsite.com/main.25a9fda6ea42f4308b79.js:1:467756)
at t.invokeTask (https://mywebsite.com/polyfills.d8680adf69e7ebd1de57.js:1:8765)
at e.runTask (https://mywebsite.com/polyfills.d8680adf69e7ebd1de57.js:1:4026)
at e.invokeTask (https://mywebsite.com/polyfills.d8680adf69e7ebd1de57.js:1:9927)
at invoke (https://mywebsite.com/polyfills.d8680adf69e7ebd1de57.js:1:9818)

My error handler:

export class AppErrorHandler extends ErrorHandler {

constructor(
    private _http: Http,
    private injector: Injector,
) {
    super();
}

public handleError(error: any): void {
    if (error.status === '401') {
        alert('You are not logged in, please log in and come back!');
    } else {
        const router = this.injector.get(Router);

        const reportOject = {
            status: error.status,
            name: error.name,
            message: error.message,
            httpErrorCode: error.httpErrorCode,
            stack: error.stack,
            url: location.href,
            route: router.url,
        };
        this._http.post(`${Endpoint.APIRoot}Errors/AngularError`, reportOject)
            .toPromise()
            .catch((respError: any) => {
                Utils.formatError(respError, `AppErrorHandler()`);
            });
    }
    super.handleError(error);
}
}

回答1:

Generally Javascript stack traces are more useful. Unfortunately, in a production application you generally turn on minification, which is why you get such an unreadable mess.

If you can afford a larger Javascript bundle, it may be useful to turn off the minification just to get a better stack trace in production.

How to do this will vary depending on which version of the Angular CLI you're using. For the v7 CLI:

In the file angular.json, set the following properties

{
  ...
  "projects": {
    "my-project": {
      ...
      "architect": {
        "build": {
          ...
          "configurations": {
            "production": {
              "optimization": false,
              "buildOptimizer": false,
              ...
            }
    ...
}

Alternative solutions in this question

来源：https://stackoverflow.com/questions/55171139/how-do-i-get-a-better-stack-trace-on-angular-errors

标签

angular

error-handling

stack-trace