部分逻辑不完善，可能导致的白屏问题

[SpringHgui]

前言

#497 有大瓜，都来看看，本贴只是证明问题确实存在发生的可能，供任不了任何有效的解决办法。

白屏bug

这段代码如果被try catch捕获到异常，也就是当出throw new Error("Can't build routes"); 被执行，则会发生白屏！

需要优化的点

1. 生产上任何错误不应该出现白屏，白屏时无任何有用信息提供，则很难定位缩写排查点。（虽然这只是个模板，但是估计不少人会在该模板上进行生产级别项目开发）

2. 白屏时由于缺少处理，顶部加载条还在继续慢慢向前走，给人一种是网络问题，迫使用户长时间等待，等待奇迹的发生，还不知直接给个白屏。

演示视频：

TDesign.Vue.Next.Starter.-.-.Microsoft.Edge.2023-05-11.18-59-54.mp4

关于态度问题比项目本身更重要

1. 提的问题和简单的处理办法，被视为多此一举
2. 想证明不是多次一举，被威胁后续不再合并我的pr！
3. 说态度差，被集体轰炸!

[SpringHgui]

@timi137137 多此一举吗？

[SpringHgui]

@uyarn 白屏能出现的不止上面那一种，还有一种就是后端返回的菜单数据buildAsyncRoutes没异常，但是这里循环插入路由时VueRouter可能会异常

复现方式

mock模式下，修改mock数据，去掉path前的斜杠

白屏效果

[Senorsen]

（看了一眼项目的 releases 和 pull requests ，应该是个中文社区，如果不对请指出，谢谢）

既然这里是讨论区，还是发个评论支持楼主一下，应该也不算是灌水。

尽管楼主发的 PR 可能不那么完美，比如可能文本介绍的没那么详细（指的是 PR 正文中的“需求背景和解决方案”和“更新日志”部分）；也许可能 @timi137137 曾面对过或正在面对大量灌水、无意义的 issue 和 pull request ，因此耐心很有限。

但楼主这个 PR 可以一眼看出来是确实遇到了实际问题，进行了 debug 并找到了一种可行的解决方式，并付出一定的时间精力无偿来提 pull request，我认为至少是值得尊重和平等沟通的。

在 #487 已经做了相关预防措施，请勿多此一举
如果你不熟读代码就来贡献的话，所有不合理的pr将被关闭

而从“多此一举”等其他言论中，让人感受到这个社区是极其不友好、不尊重开发者的。别人贡献付出的时间精力，在你的眼中只是“多此一举”。这不是一个社区该有的样子，这种行为会极大的损害楼主等其他开发者在你们社区甚至整个中文社区的热情和积极性。

哪怕这个 PR 不是你需要的，也请有一点礼貌和尊重，有一点包容。

[moreant]

老哥中肯

[SpringHgui]

没毛病啊，不给俺发工资，提个优化建议，得到无情打击，头回遇见这种开源态度~

[timi137137]

本人以个人身份仅代表个人言论和行为，请勿牵扯至任何组织，公司，团队
以下是我最后回复相关问题，包括 #497 #500

@Senorsen 首先我很感谢你总结出来了整个问题所在并且公平的看待所有情况，对此我表示很感谢。
其次，我对自己的回复部分用词不当过激行为向各位所有人道歉，对不起。
首先，我也是从题主这个时期走过来的，我在以往也被开源社区的核心贡献者“们”喷过，但是当我学的更多了，到达了现在这个水平，我回过头去看当初我发的issue，我顿时明白我为什么会被喷了。因此我在这里引用他们给我的一句话
XXX(某开源社区) 是开源社区一起维护起来的。靠的是大家的帮助和努力，如果你觉得 XXX 不好，你可以选择让他变得更好或者不要使用。你是 XXX 的用户，而不是客户，请不要摆出一副你是客户的姿态。
如果你觉得以你的知识不够解决或处理某些问题，那么就去学，而不是要求他人必须为你着想。社区没有这个义务和责任

我相信许多人看完就会理解一些我的行为了，不过在此我强调一点。我，只是个免费为爱发电的贡献者，并非腾讯员工，我并不是你口中说的

在这里，我再一次对我用词不当过激行为向各位所有人道歉。但是，题主你应该清楚地理解上面说的一句话
如果你觉得以你的知识不够解决或处理某些问题，那么就去学，而不是要求他人必须为你着想。社区没有这个义务和责任
我没有义务教会你什么，也没有义务为了你的问题去解决什么，这一点毋庸置疑。

关于上图所示，我已经明确给出回应，在代码中的store和request工具都已经为你提出了所有可行性方案，如果你认为不够稳定不够安全，你可以自行修改，毕竟这是模板，并没有限制任何人clone使用

后面你提出的问题

对此已经有其他贡献者为你回复了

按照设计来说，如果出现白屏那么就是在开发环境中并没有处理完所以必现的问题，当代码本身就有问题的时候，我并没有办法去处理，除非你们希望学习Thinkphp那样将所有报错track输出到外面，然后一部分人发生产环境不记得关闭的时候，就会引发一系列P0漏洞，这个时候被骂的不还是我吗？

何况模板中自带了许多错误页面，出错了使用router.push在request中拦截并跳转到错误页面不就能行的通吗？


我相信对于你问出的，接口正常但是数据有误的问题在注释中也写的很清楚了。如果你需要大家跟着你的想法去做，我觉得你需要一个外包团队。

以下我会对你有疑惑的地方进行排错

  // Token是否存在？如果不存在，跳转到登录页面强制登录
  if (token) {
    
    // 要前往的页面是登录页面？如果是，直接跳转到登录页面
    if (to.path === '/login') {
      next();
      return;
    }
    
    // 错误预处理
    try {
      // 尝试获取用户信息
      await userStore.getUserInfo();
    } catch (error) {
      // 如果获取用户信息失败，跳转到登录页面强制登录
      MessagePlugin.error(error);
      next({
        path: '/login',
        query: { redirect: encodeURIComponent(to.fullPath) },
      });
      NProgress.done();
    }

    // 如果获取用户信息成功，则认为用户已经登录，后端正常
    const { asyncRoutes } = permissionStore;

    // 如果没有动态路由，尝试获取动态路由
    if (asyncRoutes && asyncRoutes.length === 0) {
      // 获取动态路由表
      const routeList = await permissionStore.buildAsyncRoutes();
      
      // 遍历动态路由表，添加到路由器中
      routeList.forEach((item: RouteRecordRaw) => {
        // 此处不会出错，因为item强制规范为RouteRecordRaw类型，除非手动修改any
        router.addRoute(item);
      });

async initRoutes() {
      const accessedRouters = this.asyncRoutes;

      // 在菜单展示全部路由
      this.routers = [...homepageRouterList, ...accessedRouters, ...fixedRouterList];
      // 在菜单只展示动态路由和首页
      // this.routers = [...homepageRouterList, ...accessedRouters];
      // 在菜单只展示动态路由
      // this.routers = [...accessedRouters];
    },
    async buildAsyncRoutes() {
      // 错误预处理
      try {
        // 发起菜单权限请求 获取菜单列表
        const asyncRoutes: Array<RouteItem> = (await getMenuList()).list;

        // 转换菜单列表为路由列表
        this.asyncRoutes = transformObjectToRoute(asyncRoutes);

        // 初始化路由
        await this.initRoutes();

        // 返回路由列表
        return this.asyncRoutes;
      } catch (error) {
        // 如果在上面任何一步出现错误都将会在控制台打印错误信息
        // 当出现该情况时，证明代码不应该放到生产环境中，因为该错误会导致路由无法正常加载
        throw new Error("Can't build routes");
      }
    },

  // 处理请求数据。如果数据不是预期格式，可直接抛出错误
  transformRequestHook: (res, options) => {
    const { isTransformResponse, isReturnNativeResponse } = options;

    // 如果204无内容直接返回
    const method = res.config.method?.toLowerCase();
    if (res.status === 204 || method === 'put' || method === 'patch') {
      return res;
    }

    // 是否返回原生响应头 比如：需要获取响应头时使用该属性
    if (isReturnNativeResponse) {
      return res;
    }
    // 不进行任何处理，直接返回
    // 用于页面代码可能需要直接获取code，data，message这些信息时开启
    if (!isTransformResponse) {
      return res.data;
    }

    // 错误的时候返回
    const { data } = res;
    if (!data) {
      // router.push('/login'); 或者其他操作
      throw new Error('请求接口错误');
    }

    //  这里 code为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式
    const { code } = data;

    // 这里逻辑可以根据项目进行修改
    const hasSuccess = data && code === 0;
    if (hasSuccess) {
      return data.data;
    }

    throw new Error(`请求接口错误, 错误码: ${code}`);
  },

Error: Route paths should start with a " /": "list" should be "/list".
错误：路由路径应该用斜杠做为起始符，“list” 应该是 “/list”

该错误来自于Vue-Router4

在回答最后我再一次郑重地为自己过激的用词向各位道歉
最后，如果没有其他疑问，该讨论将于明天关闭

[SpringHgui]

你是为爱发电，我们是都不是。你可以觉得你技术牛逼，看不起别人的pr,你有权利关闭别人的pr,那是腾讯给你的权利，我也管不到。
这帖子是讨论白屏问题如何解决，你有认真看吗？也不是给你自己看的啊，你又有权利关闭了？是怕别人知道吗？还是社区只是腾讯这几个人的社区，不允许外面的人参与？那为什么不直接关闭所有社交功能？

最后，你是为爱发电的与腾讯无关人员，更不需要道歉，那也请不要随意关闭我的任何帖子？请正规腾讯项目人员来？

[SpringHgui]

_ 我也是从题主这个时期走过来的，我在以往也被开源社区的核心贡献者“们”喷过，但是当我学的更多了，到达了现在这个水平_

• 不知道人外有人 天外有天的道理吗？
  意思是别人都是当初处于菜鸟时期的你？而你已经是该领域的大佬了？你遭受过这种对待并且发扬这种行为，还是你觉得这样更像大佬？

@timi137137

[SpringHgui]

_ 如果你觉得以你的知识不够解决或处理某些问题，那么就去学，而不是要求他人必须为你着想。社区没有这个义务和责任_

我不是问问题，也不是提需求，这是pr，也不是白嫖，技术和业务不同观点不同，我们求同存异，怎么就成了社区为我个人定制开发似的，你为何总是一副高高在上的姿态？你只是贡献者之一，你一个打杂的怎么就那么看不起别人的，为何权利如此之大？

@timi137137

[SpringHgui]

那这里 #502 c89f434 进行了修复，可以理解为提的问题是合理的吗？这个处理只是扩大try范围也就是一个合格的PR了，还是就是嘴硬不承认？项目负责人也不出来说道说道，为什么差不多的处理，别人就是直接合并，而到我这里就是直接回复多此一举？ @uyarn @liweijie0812 既然处理了为何也不再此贴进行引用回复？

[uyarn]

@SpringHgui 抱歉 我昨天一直在处理其他仓库组件发版本的事情。
首先为什么要新开帖子，目的你也有提到的，是为了讨论这个时候出现白屏问题如何解决，因为那个PR出现了一些不应该出现的声音，毕竟也要写在CHANGELOG上，所以希望另外讨论或者开PR。我觉得有讨论是非常好的事情，社区才可以保持活力。@timi137137 参与了这个项目建设很长时间了，私下我和她交流的时候，她也偶尔会跟我用比较激烈的语气词汇讨论或者反驳一些问题合不合适，但她不是高高在上的心态。当然再次承认从昨天到今天，确实有一些用词不太合适的点，比如"多此一举"，可以用更合适的语言说清楚自己在当下的观点，我相信这个词是导致接下来言论过激的导火索，希望我们所有人接下来的讨论不要再出现这样让人不开心的词汇。
然后，回复到底有没有“多此一举”。我觉得不会多此一举，平时项目多少也会遇到类似的问题，不然也不会有这个讨论的存在了，我觉得争议的问题在于，是应该具体项目具体处理，还是应该项目本身携带一些默认的处理。合并了另外一个PR这个行为，也可以理解为@timi137137 对这个问题存在且应该更合适地处理的一些认同，也谢谢你提出这个问题并继续讨论下去。
最后，我又从头到尾重新看了一遍你的回复和PR，也是自己项目中遇到的觉得更合适的处理分享出来的希望被尊重，我很理解，也希望与问题本身无关的讨论到这里结束。我也非常希望以后如果有其他觉得项目可以改进的地方，可以提PR继续贡献或者讨论。
如果上面的回复有觉得不理解或者不妥的地方可以继续交流。

[SpringHgui]

首先，感谢大佬的理解。

1. 完全不是一种讨论问题的态度，没有去实践，直接否定别人从实践中发现的问题。
2. 只需要好好思考一下我对多此一举提出的质疑进行认真思考，确定这是不是一个应该被优化的点，而不是拍脑袋的认为这个问题已经被处理，我既然提出他会导致白屏，难不成我是睁眼说瞎话？
3. 原PR刚开始不乏一些反对我的意见，那些人不知道是不是你们团体的，也是一群不实践就来反驳的家伙。
4. 我发现的这个引起白屏的不完善之处如果是不合理的，就不应该被修复，而事实是很快就被修复了，这是不是证明不仅不多此一举，而且应该对发现这个问题表示感谢？
5. 上面@timi137137 为啥要进行道歉呢？你又不承认我提出的优化建议，甚至在道歉中把我们比成n年前初出茅庐的你？而你已是前端领域的绝对大佬，我等菜鸟的pr在你眼中就是前端小白提的垃圾代码？即使那是垃圾代码，那发现的问题本身是个问题，这部分不承认，要不然你为何通过后面的PR perf: 路由守卫获取菜单异常，跳转登录页并弹窗提示 #502 呢。
6. 还有多次说明这是个演示项目，演示项目难道不是官方给的最佳实践吗？我认为选择这个UI框架的绝大部分人都是直接使用该项目进行修改并投产，也就是这个演示项目应该当成企业级生产项目的级别态度去维护。
7. 我不明白你们眼中的社区成员都是哪些？是只要对这个项目有贡献的人都可以算是社区的一员，还是仅仅是核心开发者才是社区成员，以封闭的姿态进行开源吗，还是只是专家级别的大佬才配给项目PR，骨子里透漏着对别人的蔑视是藏不住的。