@honeybadger-io/js 4.8.2 → 4.9.0

package/dist/browser/honeybadger-feedback-form.js

@@ -0,0 +1,278 @@
+(function (window, document) {
+  // eslint-disable-next-line quotes
+  const TEMPLATE = `<style>
+    #honeybadger-feedback-wrapper {
+        display: block;
+        outline: none;
+        position: fixed;
+        z-index: 999;
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        top: 0;
+        left: 0;
+        background: rgba(0, 0, 0, 0.6);
+        overflow: auto;
+    }
+
+    #honeybadger-feedback {
+        font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+        padding: 1em 3em 1em 2em;
+        max-width: 400px;
+        max-height: 80%;
+        margin: 4% auto 0;
+        text-align: left;
+        background: #1a202c;
+        color: #9CA3AF;
+        border-radius: 5px;
+    }
+    #honeybadger-feedback-name, #honeybadger-feedback-email, #honeybadger-feedback-comment { width: 100%; padding: 0.5em; }
+    #honeybadger-feedback-comment {
+        font-family: inherit;
+        height: 10em;
+    }
+
+    #honeybadger-feedback-error {
+        color: #cc0000;
+    }
+
+    #honeybadger-feedback-error-detail {
+        font-size: small;
+    }
+
+    .honeybadger-feedback-button {
+        color: initial;
+        padding: 0.5em 1em;
+        cursor: pointer;
+    }
+
+    .honeybadger-feedback-button.plain {
+        text-decoration: underline;
+        border: none;
+        background: none;
+        color: #9CA3AF;
+    }
+
+    #honeybadger-feedback-close {
+        padding-left: 0;
+    }
+
+    #honeybadger-feedback-footer {
+        text-align: right;
+    }
+    #honeybadger-feedback-footer img {
+        vertical-align: middle;
+    }
+    #honeybadger-feedback-link {
+        text-decoration: underline;
+        color: #9CA3AF;
+    }
+
+    @media screen and (max-height: 570px) {
+        #honeybadger-feedback {
+            max-height: none;
+            margin-top: 0;
+        }
+    }
+
+    @media screen and (max-height: 660px) {
+        #honeybadger-feedback {
+            max-width: none;
+        }
+    }
+</style>
+
+<div id="honeybadger-feedback">
+
+    <h2 id="honeybadger-feedback-heading">
+        Care to help us fix this?
+    </h2>
+
+    <p id="honeybadger-feedback-explanation">
+        Any information you can provide will help our technical team get to the bottom of this issue.
+    </p>
+
+    <div id="honeybadger-feedback-thanks" style="display:none;">
+        <p><strong>Thanks for the feedback!</strong></p>
+        <input type="button" class="honeybadger-feedback-button plain" id="honeybadger-feedback-close" value="Close">
+    </div>
+
+    <form id="honeybadger-feedback-form">
+        <p>
+            <label for="honeybadger-feedback-name" id="honeybadger-feedback-label-name">
+                Name
+            </label><br>
+            <input type="text" name="name" id="honeybadger-feedback-name">
+        </p>
+
+        <p>
+            <label for="honeybadger-feedback-email" id="honeybadger-feedback-label-email">
+                Your email address
+            </label><br>
+            <input type="email" name="email" id="honeybadger-feedback-email" value="">
+        </p>
+
+        <p>
+            <label for="honeybadger-feedback-comment" id="honeybadger-feedback-label-comment">
+                Comment (required)
+            </label><br>
+            <textarea name="comment" id="honeybadger-feedback-comment" cols="50" rows="6" required></textarea>
+        </p>
+
+        <p id="honeybadger-feedback-error" style="display: none">
+            There was an error. Please try again later.
+            <br/>
+            <span id="honeybadger-feedback-error-detail"></span>
+        </p>
+
+        <p>
+            <input type="submit" class="honeybadger-feedback-button" id="honeybadger-feedback-submit" value="Send">
+            <input type="button" class="honeybadger-feedback-button plain" id="honeybadger-feedback-cancel" value="Cancel">
+        </p>
+    </form>
+
+    <p id="honeybadger-feedback-footer">
+        <a id="honeybadger-feedback-link" href="https://www.honeybadger.io/" target="_blank" title="Exception, uptime, and performance monitoring for PHP.">
+            Powered by
+            <img src="https://www.honeybadger.io/images/navbar_logo.svg?1670031500" width="100"/>
+        </a>
+    </p>
+</div>
+`
+  const OPTIONS_KEY = 'honeybadgerUserFeedbackOptions'
+
+  const HoneybadgerUserFeedbackForm = function () {};
+  HoneybadgerUserFeedbackForm.prototype.build = function () {
+    const self = this
+    self.element = document.createElement('div')
+    self.element.id = 'honeybadger-feedback-wrapper'
+    self.element.innerHTML = TEMPLATE
+    self.element.onclick = function (e) {
+      if (e.target !== self.element) return;
+      self.close();
+    }
+
+    document.body.appendChild(self.element)
+
+    self.form = self.element.getElementsByTagName('form')[0]
+    self.form.addEventListener('submit', function (e) {
+      e.preventDefault()
+      self.submit()
+    })
+
+    const cancelButton = document.getElementById('honeybadger-feedback-cancel')
+    cancelButton.onclick = (e) => {
+      e.preventDefault()
+      self.close()
+    }
+    const closeButton = document.getElementById('honeybadger-feedback-close')
+    closeButton.onclick = (e) => {
+      e.preventDefault()
+      self.close()
+    }
+
+    self.applyLabelsFromOptions()
+  };
+
+  HoneybadgerUserFeedbackForm.prototype.applyLabelsFromOptions = function () {
+    const self = this
+
+    const formOptions = self.getOptions()
+    const { messages = {}, buttons = {}, labels = {} } = formOptions
+    for (let key in messages) {
+      const element = document.getElementById(`honeybadger-feedback-${key}`)
+      if (element) {
+        element.innerText = messages[key]
+      }
+    }
+    for (let key in labels) {
+      const element = document.getElementById(`honeybadger-feedback-label-${key}`)
+      if (element) {
+        element.innerText = labels[key]
+      }
+    }
+    for (let key in buttons) {
+      const element = document.getElementById(`honeybadger-feedback-${key}`)
+      if (element) {
+        element.value = buttons[key]
+      }
+    }
+  };
+
+  HoneybadgerUserFeedbackForm.prototype.close = function () {
+    const self = this
+    self.element.parentNode.removeChild(self.element);
+  };
+
+  HoneybadgerUserFeedbackForm.prototype.submit = function () {
+    const self = this
+    if (self.loading) return
+
+    self.loading = true
+    document.getElementById('honeybadger-feedback-error').style.display = 'none'
+    document.getElementById('honeybadger-feedback-submit').disabled = true
+
+    const script = document.createElement('script')
+    const form = document.getElementById('honeybadger-feedback-form')
+    script.src = self.getEndpoint() +
+        '?format=js' +
+        `&api_key=${self.getApiKey()}` +
+        `&token=${self.getLastNoticeId()}` +
+        `&name=${encodeURIComponent(self.form.name.value)}` +
+        `&email=${encodeURIComponent(self.form.email.value)}` +
+        `&comment=${encodeURIComponent(self.form.comment.value)}`
+    script.onerror = function () {
+      self.loading = false
+      // unfortunately we don't get any info here about the error (i.e. HTTP 403)
+      self.onFormError('')
+      // remove script so that user can try again
+      form.removeChild(script)
+    }
+    form.appendChild(script);
+  };
+
+  HoneybadgerUserFeedbackForm.prototype.onSuccess = function () {
+    document.getElementById('honeybadger-feedback-thanks').style.display = 'block'
+    document.getElementById('honeybadger-feedback-form').style.display = 'none'
+    document.getElementById('honeybadger-feedback-submit').disabled = false
+  };
+
+  HoneybadgerUserFeedbackForm.prototype.onFormError = function (message) {
+    document.getElementById('honeybadger-feedback-error').style.display = 'block'
+    document.getElementById('honeybadger-feedback-error-detail').innerText = message
+    document.getElementById('honeybadger-feedback-submit').disabled = false
+  };
+
+  HoneybadgerUserFeedbackForm.prototype.getOptions = function () {
+    return window[OPTIONS_KEY]
+  }
+
+  HoneybadgerUserFeedbackForm.prototype.getApiKey = function () {
+    return this.getOptions().apiKey
+  }
+
+  HoneybadgerUserFeedbackForm.prototype.getLastNoticeId = function () {
+    return this.getOptions().noticeId
+  }
+
+  HoneybadgerUserFeedbackForm.prototype.getEndpoint = function () {
+    return this.getOptions().endpoint
+  }
+
+  const form = new HoneybadgerUserFeedbackForm()
+  form.build()
+
+  // this function needs to be defined and will be called from the feedback script submission
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  window['honeybadgerFeedbackResponse'] = function honeybadgerFeedbackResponse(data) {
+    form.loading = false
+
+    if (data['result'] === 'OK') {
+      form.onSuccess()
+
+      return
+    }
+
+    form.onFormError(data['error'] || 'An unknown error occurred.')
+  }
+})(window, document)

package/dist/browser/honeybadger.d.ts

@@ -1,11 +1,16 @@
 import { Types, Client } from '@honeybadger-io/core';
+export declare const getUserFeedbackScriptUrl: (version: string) => string;
 declare class Honeybadger extends Client {
     config: Types.BrowserConfig;
+    protected __afterNotifyHandlers: Types.AfterNotifyHandler[];
     constructor(opts?: Partial<Types.BrowserConfig>);
     configure(opts?: Partial<Types.BrowserConfig>): this;
     resetMaxErrors(): number;
     factory(opts?: Partial<Types.BrowserConfig>): this;
     checkIn(_id: string): Promise<void>;
+    showUserFeedbackForm(options?: Types.UserFeedbackFormOptions): Promise<void>;
+    private isUserFeedbackScriptUrlAlreadyVisible;
+    private getUserFeedbackSubmitUrl;
 }
 export { Types } from '@honeybadger-io/core';
 declare const _default: Honeybadger;

package/dist/browser/honeybadger.js

@@ -798,7 +798,7 @@
 	var notifier = {
 	    name: 'honeybadger-js',
 	    url: 'https://github.com/honeybadger-io/honeybadger-js',
-	    version: '4.8.2'
+	    version: '4.9.0'
 	};
 	// Split at commas and spaces
 	var TAG_SEPARATOR = /,|\s+/;
@@ -1941,11 +1941,47 @@
 		    };
 		    return __assign.apply(this, arguments);
 		};
+		var __awaiter = (commonjsGlobal && commonjsGlobal.__awaiter) || function (thisArg, _arguments, P, generator) {
+		    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+		    return new (P || (P = Promise))(function (resolve, reject) {
+		        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+		        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+		        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+		        step((generator = generator.apply(thisArg, _arguments || [])).next());
+		    });
+		};
+		var __generator = (commonjsGlobal && commonjsGlobal.__generator) || function (thisArg, body) {
+		    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+		    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+		    function verb(n) { return function (v) { return step([n, v]); }; }
+		    function step(op) {
+		        if (f) throw new TypeError("Generator is already executing.");
+		        while (_) try {
+		            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+		            if (y = 0, t) op = [op[0] & 2, t.value];
+		            switch (op[0]) {
+		                case 0: case 1: t = op; break;
+		                case 4: _.label++; return { value: op[1], done: false };
+		                case 5: _.label++; y = op[1]; op = [0]; continue;
+		                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+		                default:
+		                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+		                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+		                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+		                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+		                    if (t[2]) _.ops.pop();
+		                    _.trys.pop(); continue;
+		            }
+		            op = body.call(thisArg, _);
+		        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+		        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+		    }
+		};
 		var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
 		    return (mod && mod.__esModule) ? mod : { "default": mod };
 		};
 		Object.defineProperty(exports, "__esModule", { value: true });
-		exports.Types = void 0;
+		exports.Types = exports.getUserFeedbackScriptUrl = void 0;
 		var core_1 = src;
 		var util_1 = util;
 		var onerror_1 = onerror;
@@ -1955,23 +1991,32 @@
 		var event_listeners_1 = __importDefault(event_listeners);
 		var transport_1 = transport;
 		var merge = core_1.Util.merge, filter = core_1.Util.filter, objectIsExtensible = core_1.Util.objectIsExtensible;
+		var getProjectRoot = function () {
+		    var global = (0, util_1.globalThisOrWindow)();
+		    var projectRoot = '';
+		    // Cloudflare workers do not have access to location API.
+		    if (global.location != null) {
+		        projectRoot = global.location.protocol + '//' + global.location.host;
+		    }
+		    return projectRoot;
+		};
+		var getUserFeedbackScriptUrl = function (version) {
+		    var majorMinorVersion = version.split('.').slice(0, 2).join('.');
+		    return "https://js.honeybadger.io/v".concat(majorMinorVersion, "/honeybadger-feedback-form.js");
+		};
+		exports.getUserFeedbackScriptUrl = getUserFeedbackScriptUrl;
 		var Honeybadger = /** @class */ (function (_super) {
 		    __extends(Honeybadger, _super);
 		    function Honeybadger(opts) {
 		        if (opts === void 0) { opts = {}; }
-		        var _this = this;
-		        var global = (0, util_1.globalThisOrWindow)();
-		        var projectRoot = '';
-		        // Cloudflare workers do not have access to location API.
-		        if (global.location != null) {
-		            projectRoot = global.location.protocol + '//' + global.location.host;
-		        }
-		        _this = _super.call(this, __assign({ async: true, maxErrors: null, projectRoot: projectRoot }, opts), new transport_1.BrowserTransport()) || this;
+		        var _this = _super.call(this, __assign({ userFeedbackEndpoint: 'https://api.honeybadger.io/v2/feedback', async: true, maxErrors: null, projectRoot: getProjectRoot() }, opts), new transport_1.BrowserTransport()) || this;
 		        /** @internal */
 		        _this.__errorsSent = 0;
 		        /** @internal */
 		        _this.__lastWrapErr = undefined;
 		        /** @internal */
+		        _this.__lastNoticeId = undefined;
+		        /** @internal */
 		        _this.__beforeNotifyHandlers = [
 		            function (notice) {
 		                if (_this.__exceedsMaxErrors()) {
@@ -1985,6 +2030,14 @@
 		                return true;
 		            }
 		        ];
+		        _this.__afterNotifyHandlers = [
+		            function (_error, notice) {
+		                if (notice) {
+		                    _this.__lastNoticeId = notice.id;
+		                }
+		                return true;
+		            }
+		        ];
 		        return _this;
 		    }
 		    Honeybadger.prototype.configure = function (opts) {
@@ -2001,6 +2054,54 @@
 		    Honeybadger.prototype.checkIn = function (_id) {
 		        throw new Error('Honeybadger.checkIn() is not supported on the browser');
 		    };
+		    Honeybadger.prototype.showUserFeedbackForm = function (options) {
+		        if (options === void 0) { options = {}; }
+		        return __awaiter(this, void 0, void 0, function () {
+		            var global, script;
+		            return __generator(this, function (_a) {
+		                if (!this.config || !this.config.apiKey) {
+		                    this.logger.debug('Client not initialized');
+		                    return [2 /*return*/];
+		                }
+		                if (!this.__lastNoticeId) {
+		                    this.logger.debug("Can't show user feedback form without a notice already reported");
+		                    return [2 /*return*/];
+		                }
+		                global = (0, util_1.globalThisOrWindow)();
+		                if (typeof global.document === 'undefined') {
+		                    this.logger.debug('global.document is undefined. Cannot attach script');
+		                    return [2 /*return*/];
+		                }
+		                if (this.isUserFeedbackScriptUrlAlreadyVisible()) {
+		                    this.logger.debug('User feedback form is already visible');
+		                    return [2 /*return*/];
+		                }
+		                global['honeybadgerUserFeedbackOptions'] = __assign(__assign({}, options), { apiKey: this.config.apiKey, endpoint: this.config.userFeedbackEndpoint, noticeId: this.__lastNoticeId });
+		                script = global.document.createElement('script');
+		                script.setAttribute('src', this.getUserFeedbackSubmitUrl());
+		                script.setAttribute('async', 'true');
+		                if (options.onLoad) {
+		                    script.onload = options.onLoad;
+		                }
+		                (global.document.head || global.document.body).appendChild(script);
+		                return [2 /*return*/];
+		            });
+		        });
+		    };
+		    Honeybadger.prototype.isUserFeedbackScriptUrlAlreadyVisible = function () {
+		        var global = (0, util_1.globalThisOrWindow)();
+		        var feedbackScriptUrl = this.getUserFeedbackSubmitUrl();
+		        for (var i = 0; i < global.document.scripts.length; i++) {
+		            var script = global.document.scripts[i];
+		            if (script.src === feedbackScriptUrl) {
+		                return true;
+		            }
+		        }
+		        return false;
+		    };
+		    Honeybadger.prototype.getUserFeedbackSubmitUrl = function () {
+		        return (0, exports.getUserFeedbackScriptUrl)(this.getVersion());
+		    };
 		    /** @internal */
 		    Honeybadger.prototype.__buildPayload = function (notice) {
 		        var cgiData = {