如何在Docker Nginx部署的VueJS项目中配置错误日志？

针对你的场景（Vue项目通过Nginx Docker部署），要把前端的潜在错误记录到服务器的日志文件，需要从前端错误捕获、错误上报、Nginx日志配置和Docker持久化这几个环节入手，下面是具体的步骤：

一、前端Vue项目添加全局错误捕获 #

首先得在Vue项目里捕获所有可能的前端错误，包括组件内错误、全局JS错误和未处理的Promise拒绝，然后把这些错误信息上报到服务器。

在你的Vue项目的main.js（或入口文件）中添加以下代码：

// 捕获Vue组件内的错误
Vue.config.errorHandler = function (err, vm, info) {
  const errorInfo = {
    type: 'Vue Component Error',
    message: err.message,
    stack: err.stack,
    component: vm.$options.name || 'Unknown Component',
    info: info,
    timestamp: new Date().toISOString()
  };
  reportError(errorInfo);
};

// 捕获全局JS错误
window.onerror = function (message, source, lineno, colno, error) {
  const errorInfo = {
    type: 'Global JS Error',
    message: message,
    source: source,
    line: lineno,
    column: colno,
    stack: error?.stack,
    timestamp: new Date().toISOString()
  };
  reportError(errorInfo);
};

// 捕获未处理的Promise拒绝
window.addEventListener('unhandledrejection', function (event) {
  const errorInfo = {
    type: 'Unhandled Promise Rejection',
    reason: event.reason?.message || 'Unknown reason',
    stack: event.reason?.stack,
    timestamp: new Date().toISOString()
  };
  reportError(errorInfo);
});

// 错误上报函数：发送POST请求到Nginx的指定接口
function reportError(errorInfo) {
  fetch('/api/report-error', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(errorInfo),
    keepalive: true // 确保页面卸载时也能发送请求
  }).catch(err => {
    // 如果上报失败，至少在控制台输出（开发阶段方便调试）
    console.error('Failed to report error:', err);
  });
}

这段代码会把所有前端错误打包成JSON格式，发送到/api/report-error接口，接下来需要在Nginx里配置这个接口。

二、配置Nginx接收错误上报并记录到日志 #

修改你的nginx.conf，添加一个专门处理错误上报的location，同时自定义日志格式来记录错误内容：

# 自定义错误日志格式，记录上报的JSON内容
log_format vue_error_log '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$request_body"';

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    root /usr/share/nginx/html;
    index index.html;

    # 处理Vue路由的History模式
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 处理错误上报接口
    location /api/report-error {
        # 允许跨域（如果是同域可以省略，这里保险起见加上）
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods POST;
        add_header Access-Control-Allow-Headers Content-Type;

        # 预检请求直接返回200
        if ($request_method = OPTIONS) {
            return 200;
        }

        # 将请求体（错误信息）记录到自定义日志文件
        access_log /var/log/nginx/vue_errors.log vue_error_log;
        # 不需要返回内容，直接返回204 No Content
        return 204;
    }
}

这里做了几件事：

• 定义了vue_error_log格式，会记录客户端IP、时间、请求信息以及最重要的$request_body（也就是前端发送的错误JSON）
• 新增/api/report-error的location，接收POST请求，把错误信息写入/var/log/nginx/vue_errors.log
• 处理了OPTIONS预检请求，确保跨域场景下上报能正常工作

三、调整Docker配置，持久化日志文件 #

因为你的Nginx是运行在Docker容器里的，容器内的日志文件默认不会持久化到宿主机，所以需要修改Docker运行命令或者docker-compose.yml，把容器内的日志目录挂载到宿主机：

方式1：使用docker run命令 #

docker run -d \
  -p 80:80 \
  -v /your/host/path/nginx/logs:/var/log/nginx \  # 挂载日志目录到宿主机
  --name vue-nginx \
  your-vue-image-name

把/your/host/path/nginx/logs替换成你宿主机上想要存放日志的实际路径，比如/opt/nginx/vue-logs。

方式2：使用docker-compose.yml #

如果用docker-compose，修改配置文件：

version: '3'
services:
  vue-nginx:
    build: .
    ports:
      - "80:80"
    volumes:
      - /your/host/path/nginx/logs:/var/log/nginx  # 挂载日志目录

这样容器内的/var/log/nginx/vue_errors.log就会同步到宿主机的对应目录，即使容器重启，日志也不会丢失。

四、验证日志是否正常记录 #

部署修改后的项目后，可以故意在前端制造一个错误（比如在某个组件里写undefined()），然后查看宿主机上的vue_errors.log文件，应该能看到类似这样的日志条目：

172.17.0.1 - - [10/Oct/2024:12:34:56 +0000] "POST /api/report-error HTTP/1.1" 204 0 "http://your-domain.com/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36" "{"type":"Vue Component Error","message":"undefined is not a function","stack":"TypeError: undefined is not a function\n    at VueComponent.mounted (app.js:1234:15)\n    ...","component":"Home","info":"mounted hook","timestamp":"2024-10-10T12:34:56.789Z"}"

额外优化建议 #

• 日志轮转：如果日志文件太大，可以配置Nginx的日志轮转（或者在宿主机上用logrotate工具），避免占用过多磁盘空间。
• 敏感信息过滤：如果错误信息里包含用户敏感数据（比如token、个人信息），在前端上报前要先过滤掉，避免泄露。
• 开发/生产环境区分：可以在前端代码中判断环境，开发环境下直接输出到控制台，生产环境才上报到服务器。

内容的提问来源于stack exchange，提问作者delux