前端监控进阶篇 ——Sentry 监控 Next.js 项目实践

上一篇相关文章介绍了 Sentry 的基础篇 —— 本地安装，本篇文章以实际项目出发使用 Sentry 进行前端监控实践。实践案例选择 Next.js 项目，具体项目地址next-sentry-easy。
上一篇：前端监控基础篇 —— Docker + Sentry 搭建前端监控系统

开源社区存在很多搭建 Sentry 的文章，但是关于相关细节配置使用的实践文章其实并不多，对于新手来说不是很友好，Next.js 相关的就更少之又少了。 Next.js 国内社区并不算庞大，关于 Next.js 的监控说实话我也没找到太完美的方案，所以自己也尝试做了几个方案，Sentry 就是其中的一个选择。写这篇文章的原因还有如下的原因：

Next.js 官方示例仓库里有两个关于 sentry 的 Demo，这两个 Demo 都存在一些问题。

第一个with-sentry-simple是一个最基础的简单示例，但是此 Demo 存在 bug —— 只在客户端可以正常上报，而服务端并没有成功上报。

第二个with-sentry是一个比较复杂的案例，问题呢就是太复杂了，不适合新手上手学习。

所以，这里就综合一下，弄一个比较适合新手又比较完整的 Demo。
新建 Sentry 项目
新创建一个 Node.js 的项目，新建好之后 Sentry 就会为项目分配一个 DSN 地址。如下图所示：

初始化项目

package.json

“@sentry/browser”: “^5.11.0”,
“@sentry/node”: “^5.11.0”,
复制代码
next.config.js

const withSourceMaps = require(’@zeit/next-source-maps’)

module.exports = withSourceMaps({
env: {
SENTRY_DSN: ‘http://e69fa8afd38e43e59fc3baf48ec0c681@localhost:9000/11’
},
webpack: (config, options) => {
if (!options.isServer) {
config.resolve.alias[’@sentry/node’] = ‘@sentry/browser’
}
return config
},
})

复制代码上面这么配置是因为 Next.js 的特殊性，服务端渲染框架，既存在服务端也存在客户端场景，项目里引入的只能是一种，通用引入@sentry/node，所以当客户端的时候，要替换成@sentry/browser。

_app.js

import * as Sentry from ‘@sentry/node’

Sentry.init({
// Replace with your project’s Sentry DSN
dsn: process.env.SENTRY_DSN,
});

static async getInitialProps ({ Component, ctx }) {
let pageProps = {};
try {
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps({ ctx })
}
return { pageProps }
} catch (err) {
// This will work on both client and server sides.
console.log('The Error happened in: ', typeof window === ‘undefined’ ? ‘Server’ : ‘Client’);
Sentry.captureException(err)
return { pageProps };
}
}
复制代码在 _app.js 里对 Sentry 进行初始化配置，这里简单只配置了 dsn 参数。另外，在 ge