手摸手教你搭建前端报错收集系统Sentry（下）

好的，以下是您的文章草稿。

手摸手教你搭建前端报错收集系统Sentry(下)

限制开发环境报错收集

上回说到，上传了 sourseMap 后还存在一些问题，比如开发调试的时候，报错也会被收集，那么多错，我看的岂不是头都大了，同时开发时报错不会再显示，就会为开发造成困扰，这次我们着重解决这些问题。 至此我们就已经做到了只有正式环境会生成.map 文件并上传至服务器上。但此时有一个问题……

大多数情况下我们都是通过 npm 或 yarn 安装 Sentry，这样是全局安装，在开发环境也可以引用到 Sentry，这时候收集到的信息除了用户相关信息外还有本地调试信息，比如报错的文件路径是在本地，样式也都是本地的样式，并且因为本地没有 sourceMap，会导致代码的堆栈信息错误，影响线上问题的定位。

一种做法是在开发环境下禁用 Sentry。

import * as Sentry from "@sentry/browser";

if (process.env.NODE_ENV !== "production") {
  Sentry.init({
    dsn: "YOUR_DSN",
    enabled: false,
  });
}

但这样做的缺点是仍然会引入 sentry.js，增加项目体积。

一种更好的做法是参考 sentry 官方文档，在项目根目录下的 .sentryclirc 文件里做一些配置。具体配置如下：

[defaults]
# 这是要排除的源文件或目录
# 开发者在开发时所使用的文件或目录
#排除路径需要用正则表达式
exclude_paths_list = .yarn\build/\S+,lib/\S+,src/\S+

通过此配置，在开发环境下不会引入 Sentry.js。

那么 exclude_paths_list = .yarn\build/\S+,lib/\S+,src/\S+ 这行是什么意思？

• .yarn\build/\S+，S+ 表示匹配任意字符，此处表示 .yarn/build/ 目录及其以下的所有文件；
• lib/\S+，此处表示 lib/ 目录及其以下的所有文件；
• src/\S+，此处表示 src/ 目录及其以下的所有文件。

这样就排除掉我们想要排除的所有文件，不会收集其中的报错。

恢复开发调试器的正常工作

前面为了让 Sentry 能准确定位到错误位置，我们修改了 webpack 配置，让 sourceMap 生成的路径指向了服务端。这样做有个问题，在本地开发时，开发者调试错误位置就无法直接点击了，虽然可以在浏览器的 Network 面板里看到对应的文件和行数，但是点击是不会跳转的，对于习惯了调试的开发者来说，这很痛苦。

修改 Sentry 的配置可以解决这个问题。

首先，你需要明确在你的项目中 .map 文件是如何生成的。假如你是用 webpack，那么 webpack 生成的 .map 文件和最终打包的 js 文件是同级的，假设最终打包的 js 文件路径为 main.js，那么 main.js.map 文件就会放在和 main.js 同级的目录下。

在 Sentry 中，我们提供了 main.js 对应的 sourcemap 文件的上传，只要给定 main.js 路径，Sentry 就能自动上传它同级的 main.js.map 文件。而现在我们并没有上传这个文件。

下面是 Sentry 提供的两种解决方案：

• 如果你的网站使用的是 webpack，可以使用 webpack 插件将 .map 文件上传到 Sentry，详细的配置可以参考 Sentry 文档；
• 如果你不使用 webpack，可以使用 Sentry CLI 来上传 .map 文件，详细的配置可以参考 Sentry 文档。

本文实例：https://github.com/tswwl/sentry-cli-example

调整 CSS 报错

打开 Sentry 后端可以发现，CSS 报错也会收集到。实际生产中我们并不需要这些 CSS 报错，我们可以通过修改 .sentryclirc 文件来解决。

[defaults]
# 排除 CSS 文件的报错
# 数组的元素可以是正则表达式
# 此处正则表达式的意思是后缀名为 .css 的文件
exclude_types_list = ^text\/css

这样，Sentry 就会自动排除 CSS 报错了。

经过以上配置，Sentry 已经能够完美地运行了，它不会在开发环境下收集错误，不会影响开发环境的调试，也不会收集到 CSS 错误。现在，它就成为了一个高效的前端报错收集利器，为项目保驾护航。

备注 ：本文为作者原创，转载请注明出处。