如何将哨兵与 Angular2-webpack-starter 集成

Question

在 Sentry documentation thera are instructions to integrate sentry with Angular2 CLI, but there is a lack of instructions to integrate sentry with Angrular2-webpack-starter。如何正确操作？

Answer 1

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

首先进入项目目录和控制台运行:

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

} 
...

仅此而已:)

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

如何将哨兵与 Angular2-webpack-starter 集成

How to integrate Sentry with Angular2-webpack-starter

angular

integration

sentry

angular2-webpack-starter