# Understanding the error-log.js Utility in Vue-Element-Admin: Error Capture, Storage, and Reporting
> Learn how vue element admin's error-log.js captures, stores, and reports application errors using a global Vue error handler for faster debugging.
- Repository: [花裤衩/vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
- Tags: internals
- Published: 2026-02-27
---
**The [`error-log.js`](https://github.com/PanJiaChen/vue-element-admin/blob/main/error-log.js) utility registers a global Vue error handler that intercepts runtime exceptions, dispatches them to a Vuex store with contextual metadata, and outputs them to the browser console for immediate debugging.**
In the **PanJiaChen/vue-element-admin** repository, the [`error-log.js`](https://github.com/PanJiaChen/vue-element-admin/blob/main/error-log.js) utility serves as a centralized bridge between Vue's native error handling and application-level error management. Located at [`src/utils/error-log.js`](https://github.com/PanJiaChen/vue-element-admin/blob/main/src/utils/error-log.js), this module automatically captures uncaught exceptions from Vue component lifecycles, persists them in the Vuex store, and provides developers with detailed debugging context including the component instance, error information, and current URL.
## Environment-Based Activation and Configuration
The utility employs environment-gated activation to ensure error logging only occurs in specified contexts, preventing development noise while capturing production issues.
### The checkNeed() Helper Function
At lines 10-18 of [`src/utils/error-log.js`](https://github.com/PanJiaChen/vue-element-admin/blob/main/src/utils/error-log.js), the `checkNeed()` function determines whether logging should activate by comparing the current `process.env.NODE_ENV` against the `errorLog` configuration array【/src/utils/error-log.js#L10-L18】.
```javascript
// src/utils/error-log.js (simplified)
function checkNeed() {
const { errorLog } = require('@/settings')
const env = process.env.NODE_ENV
if (typeof errorLog === 'string') {
return env === errorLog
}
if (Array.isArray(errorLog)) {
return errorLog.includes(env)
}
return false
}
```
### Configuring errorLog in settings.js
The activation criteria are defined in [`src/settings.js`](https://github.com/PanJiaChen/vue-element-admin/blob/main/src/settings.js), where the `errorLog` property accepts either a string (single environment) or an array of environment names.
```javascript
// src/settings.js
module.exports = {
// Enable only in production
errorLog: 'production',
// Or enable in multiple environments
// errorLog: ['production', 'development']
}
```
## Global Error Handler Implementation
When `checkNeed()` returns true, the utility registers a global error handler that intercepts all uncaught Vue component errors before they reach the browser's default error handling.
### Registering Vue.config.errorHandler
Lines 21-34 of [`src/utils/error-log.js`](https://github.com/PanJiaChen/vue-element-admin/blob/main/src/utils/error-log.js) assign a custom function to `Vue.config.errorHandler`, receiving the error object (`err`), the Vue instance (`vm`), and an informational string (`info`) describing the error context【/src/utils/error-log.js#L21-L34】.
### Deferring Execution with Vue.nextTick
The handler wraps its dispatch logic inside `Vue.nextTick` (line 25) to circumvent Vue's dispatch problem during error handling, ensuring the error state mutation occurs after the current synchronous execution completes【/src/utils/error-log.js#L24-L27】.
### Dispatching Errors to Vuex
Inside the deferred execution, the handler dispatches the `errorLog/addErrorLog` action with a structured payload containing the error, component instance, context info, and current URL.
```javascript
// src/utils/error-log.js (handler implementation)
if (checkNeed()) {
Vue.config.errorHandler = function(err, vm, info) {
Vue.nextTick(() => {
store.dispatch('errorLog/addErrorLog', {
err: err,
vm: vm,
info: info,
url: window.location.href
})
console.error(err, info)
})
}
}
```
## Error Storage and Reporting Pipeline
Once dispatched, errors flow through a dedicated Vuex module that maintains a persistent state log, while a separate UI component provides visualization capabilities for developers.
### Vuex Module Structure (errorLog.js)
The [`src/store/modules/errorLog.js`](https://github.com/PanJiaChen/vue-element-admin/blob/main/src/store/modules/errorLog.js) module defines state, mutations, and actions to manage the error collection. The `addErrorLog` action commits an `ADD_ERROR_LOG` mutation that appends the error object to the state array.
```javascript
// src/store/modules/errorLog.js
const state = {
logs: []
}
const mutations = {
ADD_ERROR_LOG: (state, log) => {
state.logs.push(log)
}
}
const actions = {
addErrorLog({ commit }, log) {
commit('ADD_ERROR_LOG', log)
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
```
### UI Rendering in ErrorLog Component
The [`src/views/errorLog/index.vue`](https://github.com/PanJiaChen/vue-element-admin/blob/main/src/views/errorLog/index.vue) component connects to the Vuex store and renders error details in an Element UI table, displaying the message, URL, and contextual information for debugging.
```vue
```
## Summary
The [`error-log.js`](https://github.com/PanJiaChen/vue-element-admin/blob/main/error-log.js) utility in vue-element-admin provides a robust, environment-aware mechanism for capturing runtime Vue errors. Key implementation details include:
- **Environment gating** via `checkNeed()` ensures logging only occurs in configured contexts (production by default)
- **Global interception** through `Vue.config.errorHandler` captures all uncaught component errors
- **Deferred dispatch** using `Vue.nextTick` prevents mutation timing issues during error handling
- **Structured persistence** via the `errorLog/addErrorLog` Vuex action maintains a queryable error history
- **Visual debugging** through the dedicated `errorLog` view component renders error details in a sortable table
## Frequently Asked Questions
### How do I enable error logging in development mode?
To capture errors during development, modify [`src/settings.js`](https://github.com/PanJiaChen/vue-element-admin/blob/main/src/settings.js) and set `errorLog` to include `'development'` in the array: `errorLog: ['production', 'development']`. This bypasses the default production-only restriction and activates the global handler in your local environment.
### What information is captured when an error occurs?
The utility captures four key data points: the **Error object** itself (including stack trace), the **Vue component instance** where the error originated, a string describing the **lifecycle hook or context** where it occurred, and the **current page URL**. This metadata enables precise reproduction of production issues.
### Where are the error logs stored and how long do they persist?
Error logs are stored in the **Vuex state** under the `errorLog.logs` array. Because vue-element-admin uses an in-memory store by default, logs persist only for the duration of the browser session unless you implement additional persistence logic (such as syncing to localStorage or a backend API) in the Vuex module.
### Can I customize the error handler to send logs to a remote server?
Yes. You can extend the `addErrorLog` action in [`src/store/modules/errorLog.js`](https://github.com/PanJiaChen/vue-element-admin/blob/main/src/store/modules/errorLog.js) to include an API call alongside the state mutation. For example, add an HTTP request to your logging endpoint within the action before or after committing the mutation, ensuring errors are reported to your monitoring service while still being available in the UI.