Angular 5接入Fundebug日志监控

最新推荐文章于 2024-07-13 23:11:53 发布

Fundebug

最新推荐文章于 2024-07-13 23:11:53 发布

阅读量2.7k

点赞数

分类专栏： Fundebug

本文链接：https://blog.csdn.net/Fundebug/article/details/80769375

版权

Fundebug 专栏收录该内容

82 篇文章 0 订阅

订阅专栏

最近从移动开发转到使用Angular 5开发网页应用，在移动端我们都会使用友盟或则bugly做错误日志监控，所以转到网页应用之后，自然而然也考虑要给应用配上错误日志监控。

在知乎上看到了Fundebug，于是接入试用了一下。总得来说，还是很不错的。基本的报错堆栈信息都有，而且还附带记录了网络请求，用户点击等等。对于排错，可以说非常方便。

最值得点赞的是Fundebug对前端监控做得很完善，各大主流框架都有对应的接入支持。Angular 5是Angular 4的升级版，于是按照Angular 4的接入步骤来就可以了。这个不得不说是Angular的问题，版本更新太快，几年之内把版本已经从2升级到6了。

cli-quickstart

为了给大家演示如何使用，我从Angular的官网下载了cli-quickstart。(点击下载cli-quickstart)

下载解压后，进入cli-quickstart目录，使用npm install安装依赖模块。

如果你之前没有安装Angular CLI，那么需要在全局安装。使用npm install -g @angular/cli安装即可。

运行npm run start，项目就跑起来了。

接入Fundebug

在Fundebug官网创建团队后，新建一个Angular 4的项目，然后会有详细的接入指导。

这里写图片描述

推荐使用npm安装，毕竟现在都使用模块化管理了，用script引入让代码太分散。

要注意：定义FundebugErrorHandler一定要在@NgModule引用它之前。

我之前将定义放在了@NgModule后面，然后自动编译并没有报错，但是项目已经挂了，进入了白屏界面。我用ctrl+c关掉当前的命令，然后再次运行npm run start，就会发现编译失败：ERROR in Error: No NgModule metadata found for 'AppModule'.。

测试接入效果

在app.component.ts中，稍加修改，故意将substr拼写成subStr造一个错：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My First Angular App!'.subStr(0, 20);
}

立马就收到了报错，

这里写图片描述