sentry 之线上监控，你会吗？

588 05-12

陌陌今天试了下这套题，感觉还不错，感兴趣的猿可以试一试：前端开发工程师

前言

如果线上出现报错，不是后端的问题而是前端的问题，请问如何定位？

这是我们目前项目中比较尴尬的一个点，有几次线上排查问题，问题定位到前端这个环节，因为没有日志的原因，很难确定bug的出处。

于是我决定使用一个工具能打印出线上报错的日志。

调研了一番，最后决定使用sentry。

什么是sentry？

无论测试如何完善的程序，bug总是免不了会存在的，有些bug不是每次都会出现，测试时运行好好的代码可能在某个用户使用时就歇菜了，可是当程序在用户面前崩溃时，你是看不到错误的，当然你会说:”Hey, 我有记日志呢”。但是说实话，程序每天每时都在产生大量的日志，而且分布在各个服务器上，并且如果你有多个服务在维护的话，日志的数量之多你是看不过来的吧。等到某天某个用户实在受不了了，打电话来咆哮的时候，你再去找日志你又会发现日志其实没什么用：缺少上下文，不知道用户什么操作导致的异常，异常太多（从不看日志的缘故）不知如何下手等等。

Sentry就是来帮我们解决这个问题的，它是一款精致的Django应用，目的在于帮助开发人员从散落在多个不同服务器上毫无头绪的日志文件里发掘活跃的异常，继而找到潜在的臭虫。

Sentry是一个日志平台, 它分为客户端和服务端，客户端(目前客户端有Python, PHP,C#, Ruby, Javascript等多种语言)就嵌入在你的应用程序中间，程序出现异常就向服务端发送消息，服务端将消息记录到数据库中并提供一个web节目方便查看。

JS中使用

安装：

# Using yarn
yarn add @sentry/browser @sentry/tracing
# Using npm
npm install --save @sentry/browser @sentry/tracing

配置：

{
  modules: [
    '@nuxtjs/sentry'
  ],
  sentry: { // dsn需要在sentry网站注册一个项目得到其唯一值
    dsn: '', // Enter your project's DSN here
    // Additional Module Options go here
    // https://sentry.nuxtjs.org/sentry/options
    config: {
      // Add native Sentry config here
      // https://docs.sentry.io/platforms/javascript/guides/vue/configuration/options/
    },
  }
}

Nuxt项目中使用

使用nuxt/sentry：官方文档

安装：

yarn add @nuxtjs/sentry

配置：

添加@nuxtjs/sentry到的nuxt.config.js文件：

// nuxt.config.js
{
  modules: [
    '@nuxtjs/sentry'
  ],
  sentry: {
    dsn: '', // Enter your project's DSN here
    // Additional Module Options go here
    // https://sentry.nuxtjs.org/sentry/options
    config: {
      // Add native Sentry config here
      // https://docs.sentry.io/platforms/javascript/guides/vue/configuration/options/
    },
  }
}

具体详细的配置可参考文档。

sentry 之 线上监控，你会吗？

前言

JS中使用

Nuxt项目中使用

sentry 之线上监控，你会吗？