diff --git a/src/app/ui/renderer.js b/src/app/ui/renderer.js
index 0c15d32077..2ffa019dc2 100644
--- a/src/app/ui/renderer.js
+++ b/src/app/ui/renderer.js
@@ -76,43 +76,59 @@ function Renderer (appAPI) {
   }
 }
 
-Renderer.prototype.error = function (message, container, options) {
+/**
+ * format msg like error or warning,
+ *
+ * @param {String or DOMElement} message
+ * @param {DOMElement} container
+ * @param {Object} options {useSpan, noAnnotations, click:(Function), type:(warning, error), errFile, errLine, errCol}
+ */
+Renderer.prototype.error = function (message, container, opt) {
   if (container === undefined) return
-  var self = this
-  var opt = options || {}
+  opt = opt || {}
+
+  var text
+  if (typeof message === 'string') {
+    text = message
+    message = yo`<span>${message}</span>`
+  } else if (message.innerText) {
+    text = message.innerText
+  }
+
   if (!opt.type) {
-    opt.type = utils.errortype(message)
+    opt.type = utils.errortype(text)
   }
-  var $pre
-  if (opt.isHTML) {
-    $pre = $(opt.useSpan ? '<span />' : '<pre />').html(message)
-  } else {
-    $pre = $(opt.useSpan ? '<span />' : '<pre />').text(message)
+
+  var errLocation = text.match(/^([^:]*):([0-9]*):(([0-9]*):)? /)
+  if (errLocation) {
+    errLocation = parseRegExError(errLocation)
+    opt.errFile = errLocation.errFile
+    opt.errLine = errLocation.errLine
+    opt.errCol = errLocation.errCol
   }
-  var $error = $('<div class="sol ' + opt.type + '"><div class="close"><i class="fa fa-close"></i></div></div>').prepend($pre)
-  container.append($error)
-  var err = message.match(/^([^:]*):([0-9]*):(([0-9]*):)? /)
-  if (err) {
-    var errFile = err[1]
-    var errLine = parseInt(err[2], 10) - 1
-    var errCol = err[4] ? parseInt(err[4], 10) : 0
-    if (!opt.noAnnotations) {
-      self.appAPI.error(errFile, {
-        row: errLine,
-        column: errCol,
-        text: message,
-        type: opt.type
-      })
-    }
-    $error.click(function (ev) {
-      options && options.click ? options.click(errFile, errLine, errCol) : self.appAPI.errorClick(errFile, errLine, errCol)
-    })
-  } else if (options && options.click) {
-    $error.click(function (ev) {
-      options.click(message)
+
+  if (!opt.noAnnotations && errLocation) {
+    this.appAPI.error(errLocation.errFile, {
+      row: errLocation.errLine,
+      column: errLocation.errCol,
+      text: text,
+      type: opt.type
     })
   }
 
+  var $pre = $(opt.useSpan ? '<span />' : '<pre />').html(message)
+
+  var $error = $(yo`<div class="sol ${opt.type}"><div class="close"><i class="fa fa-close"></i></div></div>`).prepend($pre)
+  container.append($error)
+
+  $error.click((ev) => {
+    if (opt.errFile && opt.errLine) {
+      this.appAPI.errorClick(opt.errFile, opt.errLine, opt.errCol)
+    } else if (opt.click) {
+      opt.click(message)
+    }
+  })
+
   $error.find('.close').click(function (ev) {
     ev.preventDefault()
     $error.remove()
@@ -120,4 +136,12 @@ Renderer.prototype.error = function (message, container, options) {
   })
 }
 
+function parseRegExError (err) {
+  return {
+    errFile: err[1],
+    errLine: parseInt(err[2], 10) - 1,
+    errCol: err[4] ? parseInt(err[4], 10) : 0
+  }
+}
+
 module.exports = Renderer