Implement naive html element prettify function for breadcrumbs

getsentry · Apr 1, 2016 · 132898e · 132898e
1 parent f1c6c38
commit 132898e
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 2 deletions.
diff --git a/src/raven.js b/src/raven.js
@@ -17,6 +17,7 @@ var objectMerge = utils.objectMerge;
 var truncate = utils.truncate;
 var urlencode = utils.urlencode;
 var uuid4 = utils.uuid4;
+var htmlElementAsString = utils.htmlElementAsString;
 
 var dsnKeys = 'source protocol user pass host port path'.split(' '),
     dsnPattern = /^(?:(\w+):)?\/\/(?:(\w+)(:\w+)?@)?([\w\.-]+)(?::(\d+))?(\/.*)/;
@@ -623,7 +624,7 @@ Raven.prototype = {
                 type: 'ui_event',
                 data: {
                     type: evt,
-                    target: elem.outerHTML
+                    target: htmlElementAsString(elem)
                 }
             });
             return fn.apply(this, arguments);

diff --git a/src/utils.js b/src/utils.js
@@ -140,6 +140,25 @@ function uuid4() {
     }
 }
 
+/**
+ * Returns a simple, child-less string representation of a DOM element
+ * e.g. [HTMLElement] => <input class="btn" />
+ * @param HTMLElement
+ */
+function htmlElementAsString(elem) {
+    var out = ['<'];
+    out.push(elem.tagName.toLowerCase());
+    var attrWhitelist = ['id', 'type', 'name', 'value', 'class', 'placeholder', 'title', 'alt'];
+    each(attrWhitelist, function(index, key) {
+        var attr = elem.getAttribute(key);
+        if (attr) {
+            out.push(' ' + key + '="' + attr + '"');
+        }
+    });
+    out.push(' />');
+    return out.join('');
+}
+
 module.exports = {
     isUndefined: isUndefined,
     isFunction: isFunction,
@@ -153,5 +172,6 @@ module.exports = {
     hasKey: hasKey,
     joinRegExp: joinRegExp,
     urlencode: urlencode,
-    uuid4: uuid4
+    uuid4: uuid4,
+    htmlElementAsString: htmlElementAsString
 };
diff --git a/test/utils.test.js b/test/utils.test.js
@@ -16,6 +16,7 @@ var joinRegExp = utils.joinRegExp;
 var objectMerge = utils.objectMerge;
 var truncate = utils.truncate;
 var urlencode = utils.urlencode;
+var htmlElementAsString = utils.htmlElementAsString;
 
 describe('utils', function () {
     describe('isUndefined', function() {
@@ -118,4 +119,33 @@ describe('utils', function () {
             assert.equal(urlencode({'foo': 'bar', 'baz': '1 2'}), 'foo=bar&baz=1%202');
         });
     });
+
+    describe('htmlElementAsString', function () {
+        it('should work', function () {
+            assert.equal(htmlElementAsString({
+                tagName: 'INPUT',
+                getAttribute: function (key){
+                    return {
+                        id: 'the-username',
+                        name: 'username',
+                        class: 'form-control',
+                        placeholder: 'Enter your username'
+                    }[key];
+                }
+            }), '<input id="the-username" name="username" class="form-control" placeholder="Enter your username" />');
+
+            assert.equal(htmlElementAsString({
+                tagName: 'IMG',
+                getAttribute: function (key){
+                    return {
+                        id: 'image-3',
+                        title: 'A picture of an apple',
+                        'data-something': 'This should be ignored' // skipping data-* attributes in first implementation
+                    }[key];
+                }
+            }), '<img id="image-3" title="A picture of an apple" />');
+        });
+
+        it
+    });
 });