Question

Sentry文档上的

是instructions以将Sentry与Angular2 CLI集成，但缺少将Sentry与Angrular2-webpack-starter集成的说明。怎么做得好？

Answer 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发布此解决方案，但我不确定它们是否包含在哨兵文档中。

如何将Sentry与Angulra2-webpack-starter集成

1 个答案: