How to Fix Performance Api Error in Vue

Encountering a performance api error while working with Vue? This guide covers the root cause, provides a working code example, and shows you how to prevent it from recurring.

Why This Happens

The Performance API error appears when your Vue code calls performance.mark(), performance.measure(), or similar methods in an environment where the performance global doesn't exist. This commonly happens during server-side rendering where browser APIs are unavailable.

The Solution

// Use mounted lifecycle hook in Vue
export default {{
  mounted() {{
    if (typeof performance !== "undefined") {{
      performance.mark("vue-component-ready");
    }}
  }},
  beforeUnmount() {{
    if (typeof performance !== "undefined") {{
      try {{
        performance.measure("vue-component-lifetime", "vue-component-ready");
      }} catch (e) {{
        // Mark might not exist if mounted was skipped
      }}
    }}
  }}
}};

Leverage Vue's mounted hook which only fires in the browser. Always wrap measure() in try-catch since the mark may not exist.

Additional Considerations

• The Performance API is browser-only — Node.js provides a separate perf_hooks module with a different import pattern
• Some older browsers have incomplete implementations of the Performance Timeline API
• Always wrap performance instrumentation in try-catch blocks so measurement failures never break your application
• Consider using the PerformanceObserver API for more robust measurement collection

Environment Detection Pattern

When writing isomorphic Vue code, create a utility function that safely wraps Performance API calls:

const safeMark = (name) => {
  if (typeof performance !== "undefined" && performance.mark) {
    performance.mark(name);
  }
};

[Bugsly](https://bugsly.dev) can track Performance API errors across your Vue deployment and help you identify exactly which environments and code paths trigger failures.