@vforcity/logger

时间线前端异常监控工具包。封装了以下工具：

• 网页异常监控
• 微信小程序异常监控

安装

包安装

# yarn
yarn add @vforcity/logger

# or, npm
npm install @vforcity/logger --save

手动下载引入

若项目基于各种原因不能使用包安装，你可进入这个链接下载相应的包并在项目中手动引入：

https://unpkg.com/@vforcity/logger/lib/

其中：

• web.js 为网页项目对应的包；
• weapp.js 为微信小程序对应的包。

使用

网页异常监控

在项目的入口处（如：index.js、App.tsx 等，需置于最顶部）引入以下代码即可：

import { logger } from '@vforcity/logger/lib/web'

logger.init({
  // 如何获取 DSN：
  // 进入项目 -> settings -> Client Keys (DSN)
  dsn: 'https://******@sentry.weidingzhi.net/*',
})

微信小程序异常监控

重要：请先将域名 sentry.weidingzhi.net 加入小程序后台的 request 合法域名！

在项目的入口处（一般是 app.js，需置于最顶部）引入以下代码即可：

import { logger } from '@vforcity/logger/lib/weapp'
// 若是手动下载的包：
// import { logger } from 'path/to/weapp.js'

logger.init({
  // 如何获取 DSN：
  // 进入项目 -> settings -> Client Keys (DSN)
  dsn: 'https://******@sentry.weidingzhi.net/*',
})

进阶

源码映射

对于网页项目，得益于工程化，最终线上的代码经过压缩混淆后几乎无法正常阅读，这对于减小代码体积和代码保护有一定好处。

但也导致异常监控系统在复原现场时无法给出源码级别的报错信息，即它给我们的报错信息取自于压缩混淆后的代码，这就增加了排错的成本。

因此，我们需要一种手段将压缩混淆后的代码和源代码做一个映射，如此我们看到报错信息即可直接去源代码中定位。这种手段叫 Source Map，可理解为源码映射。它会为每一个压缩混淆后的文件生成一个 文件名.map 的映射文件，通过映射文件可还原出源代码。

以上，如果你的项目是基于 webpack 或者其他建立在 webpack 之上的工具进行的工程化，你可使用封装好的 webpack 插件自动将 Source Maps 文件上传至 Sentry，以便于 Sentry 根据它帮我们映射出源代码：

// 以下是对于原生 webpack 的配置，
// 对于其他工具，请自行查阅其文档，
// 首先开启生产模式时生成 Source Maps 的功能，
// 再将 `getLoggerPlugins` 合并入其 webpack 的插件选项。

// webpack.config.js
const { getLoggerPlugins } = require('@vforcity/logger/lib/webpack')

module.exports = env => ({
  // ...其他配置项...
  devtool: env.production ? 'source-map' : 'eval-source-map', // 生成 Source Maps
  plugins: [
    // ...其他插件...
    ...getLoggerPlugins({
      // 是否处于生产模式
      isProduction: env.production,
      // 上传去 Sentry 时出示的认证令牌
      // 获取地址：https://sentry.weidingzhi.net/settings/account/api/auth-tokens/
      // 若没有则点击 `Create New Token` 按钮，然后点击 `Create Token` 按钮
      authToken: 'xxxxxxxx',
      // 项目在 Sentry 上的 ID
      projectId: 'demo',
      // 正式环境上静态资源的存放路径
      assetsBaseUrl: 'https://spark.jiantui.net/signH5/Appointment',
    })
  ]
})

同时，对引入的监控代码做下修改以将报错信息和特定的版本代码联系起来：

import { logger } from '@vforcity/logger/lib/web'

logger.init({
  // 如何获取 DSN：
  // 进入项目 -> settings -> Client Keys (DSN)
  dsn: 'https://******@sentry.weidingzhi.net/*',
  // 相关联发布的版本号
  // process.env.RELEASE_VERSION 会被上面引入的 webpack 插件替换
  release: process.env.RELEASE_VERSION,
})

记录用户信息

在获取到用户信息后，我们可以告诉 logger 现在的用户是谁，那么，我们在 Sentry 上也能看到是哪个用户产生的问题：

getUserInfo().then(userInfo => {
  // userInfo 的数据格式不固定
  logger.setUser(userInfo)
})

手动记录信息

有时，我们想在某些重要操作失败时记录下来以供审查发现潜在的问题，譬如：

• 用户登录失败
• 手机号绑定失败
• 发帖失败

publishPost(postData)
  .then(/* ... */)
  .catch(() => {
    logger.log(
      // 记录文本
      '发帖失败',
      // 额外信息（可选）
      postData,
    )
  })

作者

方剑成