import提升导致Fundebug报错：“请配置apikey”

impig33 发布于2019-08-23 15:33 / 2013人阅读

摘要：摘要解释一下请配置报错的原因。命令具有提升效果，会提升到整个模块的头部，首先执行。自从年双十一正式上线，累计处理了亿错误事件，付费客户有金山软件百姓网等众多品牌企业。

摘要： 解释一下“请配置apikey”报错的原因。

部分Fundebug用户使用import来导入js文件时，出现了"请配置apikey"的报错，这是由于import提升导致的，下面我会详细解释一下这一点。

import提升

关于import提升，我们可以参考阮一峰的《ECMAScript 6 入门》。

import命令具有提升效果，会提升到整个模块的头部，首先执行。

foo();

import { foo } from "my_module";

上面的代码不会报错，因为import的执行早于foo的调用。这种行为的本质是，import命令是编译阶段执行的，在代码运行之前。

因此，即使我们把import语句写在后面，它仍然会在其他语句之前执行。

import提升为何导致Fundebug报错？

Fundebug用户应该清楚，在接入fundebug-javascript插件之后，需要配置apikey，如下：

import * as fundebug from "fundebug-javascript";
fundebug.apikey = "API-KEY";

假设我们还需要import一个test.js文件，这个文件会抛出一个Error，如下：

// test.js
throw new Error("test")

一切看起来没有问题：

// main.js
import * as fundebug from "fundebug-javascript";
fundebug.apikey = "API-KEY";
import "./test"

但是，根据import提升，代码的实际执行顺序如下：

// main.js
import * as fundebug from "fundebug-javascript";
import "./test"
fundebug.apikey = "API-KEY";

这种情况下，第二行代码就会抛出错误，导致apikey复制语句不会执行，从而导致报错：“请配置apikey”。

这个问题并不需要解决

出于测试的目的，用户会去import一个立即报错的js文件，类似于前文提到的test.js。但是实际开发中，我们不可能这样做，否则应用会立即崩溃，更谈不上部署了。

我们写这篇博客的目的仅仅是解释一下原因，并分享一个非常简单的知识点“import提升”。

如何规避这个问题?

仅供参考，实际上没有必要这样做。

新建一个配置文件config.js，在这个文件中配置apikey：

fundebug.apikey = "API-KEY";

import配置文件：

// main.js
import * as fundebug from "fundebug-javascript";
import "./config"
import "./test"

这种情况下，配置apikey的语句被import代替了，也就不存在所谓"import提升"的问题，Fundebug将可以正常报错。

最后，感谢Fundebug用户龙哥的反馈和协助！

参考

《ECMAScript 6 入门》

Fundebug文档 - JavaScript错误监控插件

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。自从2016年双十一正式上线，Fundebug累计处理了10亿+错误事件，付费客户有Google、360、金山软件、百姓网等众多品牌企业。欢迎大家免费试用！

转载时请注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2019/02/26/import-cause-fundebug-apikey-error/

云服务器 GPU云服务器 Fundebug important Imports Importer

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102220.html

Vue.js@2.6.10更新内置错误处机制，Fundebug同步支持相应错误监控

摘要：摘要的错误监控插件同步支持异步错误监控。此次更新，我们对的监控插件做了相应的更新，来更好地支持使用框架开发的应用错误的监控。程序运行后，成功捕获该错误总结更新到，对错误处理提供了更加强大的支持。摘要： Fundebug 的 JavaScript 错误监控插件同步支持 Vue.js 异步错误监控。 Vue.js 从诞生至今已经 5 年，尤大在今年 2 月份发布了重大更新，即Vue 2....

DC_er 2019-08-26 13:45 评论0 收藏0
Fundebug前端JavaScript插件更新至1.8.2，修复2个小BUG

摘要：前端异常监控插件更新至，修复了个小修复用户行为中重复记录请求的修复的为报错的这个都不会影响功能，不过为了避免造成困扰，请大家及时更新插件。摘要：修复2个BUG，请大家及时更新。 showImg(https://segmentfault.com/img/remote/1460000019373421?w=900&h=383); Fundebug前端异常监控服务 Fundebug是专业...

lifesimple 2019-08-23 18:12 评论0 收藏0
我是这样搞懂一个神奇的BUG

摘要：但是，不应该啊我们是事先有做检查的。一个请求成功返回，表示账户创建成功。自从年双十一正式上线，累计处理了亿错误事件，付费客户有阳光保险核桃编程荔枝掌门对微脉青团社等众多知名企业。摘要: 通过分析用户的行为，才想得到为什么会出现这种情况！前两天在BearyChat收到这样的一个报警消息: 409 ？Conflict ？平时很少遇到这样的错误，貌似很严重的样子，吓得我赶紧查看到底发生...

J4ck_Chan 2019-08-22 11:07 评论0 收藏0
详解JavaScript之神奇的Object.defineProperty

摘要：与当与同时为时，属性不能重新使用定义，严格模式下会报错示例云麒报错当或者为时，属性可以重新使用定义，这一点读者不妨自行测试。摘要： JavaScript有个很神奇的Object.defineProperty()，了解一下？ =与Object.defineProperty 为JavaScript对象新增或者修改属性，有两种不同方式：直接使用=赋值或者使用Object.definePro...

baishancloud 2019-08-26 17:40 评论0 收藏0
有浏览器的地方就有Fundebug

摘要：已经全面支持主流浏览器啦对于前端开发者，兼容各种浏览器是一件非常痛苦的事情。并且，同一个错误在不同浏览器下的，，，与都有可能不同。根据我们的初步估算，目前聚合算法能够将的重复错误成功聚合，这样极大地提高了用户分析错误的效率。 Fundebug已经全面支持主流浏览器啦！对于前端开发者，兼容各种浏览器是一件非常痛苦的事情。在搜索框中输入关键字JavaScript浏览器兼容，结果是这样的:...

DangoSky 2019-08-21 15:06 评论0 收藏0