Webfunny前端监控接入指南

Webfunny前端监控接入指南

Webfunny是一款轻量级前端异常监控和前端性能监控系统，可以帮助前端工程师定位并解决各种线上问题，确保项目健康良好的运行。本文将介绍如何将Webfunny接入前端监控系统。

首先，需要创建一个团队来承载项目，便于管理。在Webfunny官网（www.webfunny.cn/home.html）上注册账号并创建团队。

接下来，需要在项目中集成Webfunny监控代码。具体步骤如下：

1. 在项目中找到需要监控的JavaScript文件，通常是index.html或app.js等入口文件。
2. 在需要监控的JavaScript文件中引入Webfunny的监控代码。可以通过将以下代码添加到文件的底部来实现：

<script src='http://www.webfunny.cn/js/webfunny.js'></script>

1. 确保在项目的配置文件中设置了正确的Webfunny配置信息。可以在项目的配置文件中添加以下代码：

window.__webfunny = {
  appId: 'your_app_id', // 替换为你在Webfunny上创建的应用ID
  projectId: 'your_project_id', // 替换为你在Webfunny上创建的项目ID
  notify: true, // 开启机器人通知功能
  monitor: true, // 开启HTTP请求监控功能
  timeout: 3000 // 设置接口请求超时时间（毫秒）
};

1. 重新加载页面，即可开启Webfunny前端监控。

Webfunny可以收集各种错误信息，包括jserror、on_error、console_error等类型。当发生错误时，Webfunny会自动记录错误信息并发送给服务器。同时，Webfunny还可以对HTTP请求进行监控，根据不同状态进行机器人通知，并对接口请求的超时时间进行预警设置。

此外，Webfunny还支持容器化部署。如果项目使用Docker进行容器化部署，可以将Webfunny监控代码打包到Docker镜像中。具体步骤如下：

1. 创建一个Dockerfile文件，并在其中添加以下内容：

FROM node:10.6.0-slim
RUN npm install pm2 -g
COPY . /app
WORKDIR /app
RUN npm install --registry=https://registry.npm.taobao.org
RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime
RUN echo 'Asia/Shanghai' >/etc/timezone
EXPOSE 8010
EXPOSE 8011
CMD npm run prd

1. 在项目的根目录下运行以下命令构建Docker镜像：

docker build -t your_image_name .

1. 运行Docker容器：

docker run -p 8010:8010 -p 8011:8011 your_image_name

1. 访问容器内的Webfunny监控页面（http://localhost:8010/webfunny/overview.html）。