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

宣布为新Relic浏览器提供源代码地图支持

读了5分钟

生产Javascript已急剧发生变化transpilation捆绑,缩小作为处理前端代码的新标准出现。我们之前已经宣布了对source map的支持新的遗物浏览器在我们最近的平台更新,我们很高兴地告诉大家,它现在已经普遍可用了。

我们的来源地图支持旨在通过将问题的位置映射在原始源代码中,帮助您在前源中查找并更快地修复正面的问题来更轻松地解决JavaScript错误。此新版本包括新的遗物浏览器仪表板中的直观拖放选项,可快速且轻松地映射,以及强大的API,以集成到您的构建系统中,以实现自动化和无缝JavaScript故障排除。

JavaScript处理的演变

对于所有的谈话前端疲劳而且令人沮丧地与大量构建系统,现在是写JavaScript的好时机。语言中的新功能是功能强大的,并且由于“魔术”的转运“,它们在几乎任何浏览器中都可以使用。但是,转发和捆绑和缩小的常见做法可以混淆前部代码,并使难以确定原始源代码中发生错误的位置。

当您没有明确的方法来修复它时,将遇到JavaScript错误可能是痛苦的。幸运的是,即使使用最新的前端技术,我们也有一种方法可以使这些错误是可操作的。

Source map支持New Relic浏览器

JavaScript构建系统可以生成源映射,它就像用于转帐或缩小代码的魔术解码器。您的本地Dev工具有能力阅读这些地图并自动解除JavaScript,允许您在浏览器调试器中看到原始代码。

现在你可以用这些来源地图在新的遗物。在查看错误的详细信息时,我们可以应用源映射并在原始源代码的上下文中显示错误,就像工程师写道一样。这使得调试客户错误更容易。我们已经使该过程尽可能简单地将JavaScript错误拖动到新的遗物浏览器屏幕中,并且该功能可以恰好显示原始源的位置发生错误,包括语法突出显示!

源地图GIF示例

在构建管道中自动化源地图

虽然拖放很适合实时排除JavaScript错误,但多次将代码部署到多个应用程序的DevOps团队可能希望有一种更自动化的方式来处理每次运行构建时生成的大量源映射。我们的来源地图API.使它很容易发布源代码映射到New Relic浏览器每次一个新的构建被部署。将其作为构建系统的一部分,当你在New Relic浏览器中打开它们时,你的JavaScript错误将自动被预先映射。

为了发布源映射,你需要一些信息:

  • 帐户的一个新的遗物管理API密钥,可以在这里(——nrAdminKey)
  • 已部署应用程序的新遗物应用程序ID(--applicationId)
  • 包含在页面中的JavaScript的URL (javascriptUrl)
  • 如果URL在每次部署时都不是唯一的,可以选择释放名称和标识符。

发布来源地图的最简单方法是使用我们的新手@newrelic / publish-sourcemapNPM模块。它提供了一个命令行工具和旨在完成此任务的JavaScript API,并且可以使用更多文档纳米页面

使用NPM模块从命令行发布:

npm install -g @newrelic/publish-sourcemap publish-sourcemap ./dist/overview_page.min.js https://bam-ui.nr-assets.net/overview-64.min.js——nrAdminKey=[APIKEY]——applicationId=1441

使用NPM模块从JavaScript发布:

var publishSourcemap = require(‘@newrelic/publish-sourcemap’) publishSourcemap({ sourcemapPath: ‘./dist/bundle.min.js.map’, javascriptUrl: 'https://bam-ui.nr-assets.net/overview-64.min.js' applicationId: 518867, nrAdminKey: 'dkdkx03l' }, function (err) { console.log(err || 'Sourcemap upload done')})

还可以使用curl命令直接发布源映射:

curl -H " newrel - api - key: " -F "sourcemap=@./dist/overview_page- 152 .min.js. zip "map" -F "javascriptUrl=https://bam.nr-assets.net/overview_page-142.min.js" -F "releaseId=142" \ -F "releaseName=overview_page" \

更好的JavaScript错误疑难解答

New Relic Browser的全部内容都是关于暴露你的软件的最终用户体验,而JavaScript错误是它暴露的最可操作的数据类型之一。减少客户端错误可以对最终用户体验产生直接、直接和可量化的影响。New Relic浏览器的源地图支持是我们正在进行的投资的一部分,以确保你有可视性和简化的工作流程,你需要确保你的应用顺利运行为你的客户。

额外资源:

在伴侣博客中得到的东西设置与新的Relic浏览器源代码地图- 我们浏览了如何将源映射集成到构建管道中,这样您就可以自动映射JavaScript错误详细信息。