Design and Implementation of Front‑End Error Monitoring for a Real‑Estate Web Platform

Front‑end error monitoring is no longer a novelty, but its importance for site quality control is undeniable; this article uses a real‑estate broker web site case to re‑highlight front‑end exception monitoring and introduce a simple error‑information collection scheme.

Background : During a routine release, the number of JavaScript errors surged unexpectedly. Errors originated from a UI library with deep call stacks, but the default Error.stackTraceLimit only captured ten frames, making root‑cause identification difficult. Source‑map usage was mentioned for de‑obfuscating stack traces.

Pain points : The existing monitoring only handled window.onerror (runtime errors) and missed promise, resource, and XHR errors; intermittent errors lacked reproduction capability; cross‑origin script errors were lost; there was no self‑check ability; and data analysis, reporting, and alerting were insufficient.

Analysis & Design : After evaluating Sentry, ARMS, and Fundebug, a transitional solution was chosen that leverages the current error‑collector backend while extending front‑end data capture and keeping extensibility for future Sentry integration. Adjustments included adding listeners and event hijacking to cover missed scenarios, introducing a lint rule for missing crossdomain attributes, designing a scene‑reconstruction mechanism, adding a self‑check switch via a URL flag, and wrapping listeners for third‑party compatibility.

Vue error‑handler wrapper implementation :

function wrapErrorHandler(ErrorDetector, Vue) {
  Vue = Vue || window.Vue;
  if (!Vue || !Vue.config) return;
  var _oldOnError = Vue.config.errorHandler;
  Vue.config.errorHandler = function VueErrorHandler(error, vm, info) {
    var metaData = {};
    // vm and lifecycleHook are not always available
    if (Object.prototype.toString.call(vm) === '[object Object]') {
      metaData.componentName = formatComponentName(vm);
      metaData.propsData = vm.$options.propsData;
    }
    if (typeof info !== 'undefined') {
      metaData.lifecycleHook = info;
    }
    ErrorDetector.captureError(error, { extra: metaData });
    if (typeof _oldOnError === 'function') {
      _oldOnError.call(this, error, vm, info);
    }
  };
}

Scene reconstruction data includes terminal info (OS, user‑agent), request info (URL, method, session ID), error info (message, stack), behavior info (mouse/keyboard event queue), and screen snapshot. The screenshot is captured using html2canvas :

function captureScreen() {
  var targetDom = document.querySelector("body");
  html2canvas(targetDom, {
    useCORS: true,
    allowTaint: false,
    height: targetDom.scrollHeight,
    width: targetDom.scrollWidth,
  }).then(function (canvas) {
    var context = canvas.getContext('2d');
    context.mozImageSmoothingEnabled = false;
    context.webkitImageSmoothingEnabled = false;
    context.msImageSmoothingEnabled = false;
    context.imageSmoothingEnabled = false;
    var quality = 0.92;
    var base64Image = canvas.toDataURL('image/png', quality).substring(22);
    ErrorDetector.accidentScene.img = base64Image;
  })
}

Error reporting strategy : No throttling is applied because the backend can handle the current volume, but the increased payload (up to ~460 KB per error) requires size reduction. Deduplication is performed using a unique key derived from the stack trace MD5; client‑side storage initially used IndexedDB but was switched to localStorage with a map that is persisted in window.beforeunload . A URL flag (e.g., /user/brokerhomeV2?xxx_trace=true ) enables self‑check mode that loads a test script and logs the report.

Adjustments after testing : The unique identifier was changed from message+source+lineno+colno to the MD5 of the expanded stack trace; IndexedDB was replaced by a batch‑update localStorage map to avoid compatibility issues with older browsers.

Outcome : The new monitoring scheme significantly reduces the time to locate intermittent issues from hours to minutes, provides richer assets (screenshot logic, stack‑trace limit control), and prepares the system for future integration with a central monitoring platform.

References and author information are listed at the end of the original article.