Node.js项目点击新增用户按钮触发报错问题排查

问题描述 #

点击主站新增用户按钮后，预期打开新标签页展示新增用户表单，实际触发报错无法加载，涉及3张错误截图。
项目中add_user.ejs代码如下：

<!--include header-->
<%- include('include/_header')%>
<!--/include header-->

<!-- Main Site -->
<main id="site-main">
    <div class="container">
       <div class="box-nav d-flex justify-between">
        <div class="filter">
            <a href="/"><i class="fas fa-backward"></i>Visi Naudotjai</a>
        </div>
       </div>
       <div class="form-title text-center">
           <h2 class="text-dark">Naujas naudotojas</h2>
           <span class="text-light">Naudokitės apačioja pateikta forma susikuriant nauja naudotojas</span>
       </div>
       
       <!-- add user form -->
       <%- include('include/_form')%>
    </div>
</main>
 <!-- /Main Site -->

<!--include footer-->
<%- include('include/_footer')%>
<!--/include footer-->

排查步骤 #

1. 优先校验服务端路由配置 #

• 确认新增用户按钮跳转的路由地址，和后端框架（Express/Koa等）中注册的渲染add_user.ejs的路由完全匹配，包括请求方法（必须为GET才能渲染页面）、路径大小写、是否存在多余/缺失的斜杠
• 检查路由处理函数是否正确调用了渲染方法，以Express为例应为res.render('add_user')，确认模板文件名没有拼写错误，同时确认所有模板（包括子模板）需要的变量都已正确传入，子模板依赖的变量缺失是EJS渲染报错最常见的原因

2. 检查子模板路径合法性 #

确认add_user.ejs中引用的三个子模板_header.ejs、_form.ejs、_footer.ejs均存放在views/include/目录下，文件名大小写、前后缀完全匹配。注意Windows环境不区分路径大小写，Linux部署环境区分，极易在此处踩坑。

3. 缩小问题范围定位错误点 #

可以先注释掉add_user.ejs中<%- include('include/_form')%>这一行，替换为静态测试文本，启动服务访问路由：

• 如果页面能正常打开，说明问题完全出在_form.ejs子模板中，直接排查该文件的EJS语法是否正确、变量引用是否合法即可
• 如果仍然报错，再依次注释头部、尾部子模板的引用，定位到具体报错的文件

4. 校验静态资源配置 #

如果控制台报404类错误，检查服务端配置的静态资源目录下是否存放了模板引用的css、Font Awesome字体、js等资源，资源引用路径是否和静态目录配置匹配。

内容的提问来源于stack exchange，提问作者Sidas Vidūnas