import提升導致Fundebug報錯：“請配置apikey”

impig33 發布于2019-08-23 15:33 / 2053人閱讀

摘要：摘要解釋一下請配置報錯的原因。命令具有提升效果，會提升到整個模塊的頭部，首先執行。自從年雙十一正式上線，累計處理了億錯誤事件，付費客戶有金山軟件百姓網等眾多品牌企業。

摘要： 解釋一下“請配置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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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