赢得自定义新的遗物弹球机!只需将数据书呆子提交以注册Futureestack。 现在注册

使用新的遗物浏览器来源地图设置

4分钟阅读

经过edwin Knuth.

来源地图支持新的遗物浏览器现在通常可用。因此,当您想在使用新遗物监视的应用程序中开始看到JavaScript错误的原始源代码时,很容易开始。一般来说,你需要做三件事:

  1. 在捆绑过程中生成源映射。
  2. 设置唯一标识符。
  3. 将您的来源地图发布到新遗物。

1.生成源地图

生成源贴图的过程从一个构建系统到另一个构建系统。和网客例如,您的config.devtool应该为生产构建为“源代码映射”。(如果你使用Browserify,使用--debug和--source-map-include-sources选项在命令行上或在选项中启用debug。)下面的示例代码显示了如何在生产环境中构建时,如何使用WebPack创建源地图。

WebPack代码示例

2.设置唯一标识符

因为每次更新源代码时,源代码映射都会发生变化,所以知道是哪个版本导致了错误非常重要。最简单的方法是将源代码映射的发布集成到构建过程中。这样,每当你发布一个新版本的前端代码时,你就会向new Relic发送一个源地图,然后使用它来减少来自该特定版本的错误。

如果每次部署代码时JavaScript包的URL都不同,则不需要进一步的信息。我们推荐的最佳实践是将一个散列附加到文件名中,为每个构建创建一个唯一的文件名(例如,app-155567618f4367cd1cb8.js),这使得版本控制过程很简单。许多组织已经在URL中使用唯一的构建号、md5哈希或Git SHA校验和来实现缓存破坏的目的。此外,一些前端部署工具使用詹金斯构建号码或部署代码文件名中的Git提交SHA,足以唯一地确定导致错误的发布,并且是获得此设置的最简单方法。

但是,如果URL不是唯一可识别的情况下,新遗物还提供了用于唯一识别到浏览器代理的释放并将其连接到释放的源映射的API。

例如,一个新的遗物团队在其Jenkins CI服务器上使用脚本不仅构建前端资产,而且还从构建时的环境变量中拉动信息,以创建带有构建版本标识符的动态JavaScript文件,然后捆绑应用。此文件在用户的浏览器中运行并调用新遗物源地图API通过此版本的此唯一标识符。页面加载后尽快,newrelic.addrelease.被调用,因此代理看到的所有错误都将与该版本的JavaScript代码相关联。这也可以在环境变量的地方使用唯一的构建号码,MD5哈希或Git SHA校验和来完成。与我们推荐的唯一资产名称相比,此总体设置需要更多步骤,尽管我们构建了我们的API,以确保我们可以支持这些附加配置。

3.发布您的来源地图

使用我们的API方法来源地图支持公告博客帖子,您有许多不同的方法可以将源地图发布到新的遗物:使用我们的NPM模块或使用CURL命令。您可以灵活地使用您的构建系统使用的任何功能。如果您要查看javascript文件使用的网址,新的遗物浏览器会自动将所有捕获的错误与其始发URL关联,您可以看到每个JavaScript错误的一部分:

堆栈跟踪屏幕截图

您只需集成了源地图作为构建过程的一部分。做得好!

不要错过宣布为新Relic浏览器提供源代码地图支持请继续关注:即将发布的一篇文章将带领你了解New Relic的前端软件架构和Jenkins构建过程,以及我们如何将源图作为这个灵活的工作流程的一部分。