如何将 Sentry 与 Angular2-webpack-starter 集成答案

【问题标题】：How to integrate Sentry with Angular2-webpack-starter如何将 Sentry 与 Angular2-webpack-starter 集成
【发布时间】：2017-08-10 04:47:18
【问题描述】：

在Sentry 文档中，instructions 将哨兵与 Angular2 CLI 集成，但缺少将哨兵与Angrular2-webpack-starter 集成的说明。怎么做才合适？

【问题讨论】：

标签： angular integration sentry angular2-webpack-starter

【解决方案1】：

我从8 March 2017 [55d4325] 给出了最新版本的 angular2-webpack-starter 的答案。在此解决方案中，Sentry 将仅在生产构建（正常和 AoT）中启用，它也会在控制台中引发异常（但不会像开发构建那样引发“全功能”异常）。说明：

首先进入项目目录，在控制台运行：

npm install raven-js --save

二、创建文件：./src/app/app.sentry.ts

import * as Raven from 'raven-js'; // http://sentry.io
import { ErrorHandler } from '@angular/core';

// below 'if' is needed to activate sentry ONLY in production mode.  
// (without this, import statement in environment.ts initialize sentry in dev)
if ('production' === ENV) 
{
    Raven // Sentry configuration http://sentry.io
        .config('https://xxxxxxxxxxxxxxxxxxxxxxxxxx@sentry.io/yyyyyy')
        .install(); // where xxx..xxx= your sentry key, yyyy= sentry project id
}

export class RavenErrorHandler implements ErrorHandler {
  public handleError(err: any): void {
    Raven.captureException(err.originalError);
    console.error(err);     // show err in browser console for production build
  }
}

export const SENTRY_PROVIDER =  { provide: ErrorHandler, useClass: RavenErrorHandler };

最后一步：编辑文件 ./src/app/environment.ts 并添加 2 行代码 - 最上面一行是我们在上面创建的导入文件

import * as Sentry from './app.sentry';
...

if ('production'==ENV) 语句中文件中上部的一行：

...
let _decorateModuleRef = <T>(value: T): T => { return value; };

if ('production' === ENV) {
  enableProdMode();

  PROVIDERS.push(Sentry.SENTRY_PROVIDER); // !!!-> SENTRY NEW SECOND CODE LINE

  // Production
  _decorateModuleRef = (modRef: any) => {
    disableDebugTools();

    return modRef;
  };

  PROVIDERS = [
    ...PROVIDERS,
    // custom providers in production
  ];

} 
...

仅此而已:)

我也在sentry github 中发布了这个解决方案，但我不确定他们是否将其包含在哨兵文档中。

【讨论】：