Skip to content

Clicking a hyperlink in a chart block results in a white screen in the interface #9991

Closed
@2234839

Description

@2234839
Member

graph 块内链接可导致思源笔记崩溃

Is there an existing issue for this?

  • I have searched the existing issues

Can the issue be reproduced with the default theme (daylight/midnight)?

  • I was able to reproduce the issue with the default theme

Could the issue be due to extensions?

  • I've ruled out the possibility that the extension is causing the problem.

Describe the problem

例如此代码

strict digraph "dependency-cruiser output"{
    rankdir="LR" splines="true" overlap="false" nodesep="0.16" ranksep="0.18" fontname="Helvetica-bold" fontsize="9" style="rounded,bold,filled" fillcolor="#ffffff" compound="true"
    node [shape="box" style="rounded, filled" height="0.2" color="black" fillcolor="#ffffcc" fontcolor="black" fontname="Helvetica" fontsize="9"]
    edge [arrowhead="normal" arrowsize="0.6" penwidth="2.0" color="#00000033" fontname="Helvetica" fontsize="9"]

    subgraph "cluster_src" {label="src" "src/cli.ts" [label=<cli.ts> tooltip="cli.ts" URL="src/cli.ts" fillcolor="#ddfeff"] }
    "src/cli.ts" -> "src/config/index.ts"
    "src/cli.ts" -> "src/core/build.ts"
    "src/cli.ts" -> "src/core/cache.ts"
    "src/cli.ts" -> "src/server.ts"
    "src/cli.ts" -> "src/core/render.api.dep.ts"
    "src/cli.ts" -> "src/util/store.node.dep.ts"
    subgraph "cluster_src" {label="src" subgraph "cluster_src/components" {label="components" subgraph "cluster_src/components/data_promise" {label="data_promise" "src/components/data_promise/index.ts" [label=<index.ts> tooltip="index.ts" URL="src/components/data_promise/index.ts" fillcolor="#ddfeff"] } } }
    subgraph "cluster_src" {label="src" subgraph "cluster_src/components" {label="components" subgraph "cluster_src/components/web-custom" {label="web-custom" "src/components/web-custom/Test_c.vue" [label=<Test_c.vue> tooltip="Test_c.vue" URL="src/components/web-custom/Test_c.vue" fillcolor="#41f083"] } } }
    subgraph "cluster_src" {label="src" subgraph "cluster_src/components" {label="components" subgraph "cluster_src/components/web-custom" {label="web-custom" "src/components/web-custom/flow.ts" [label=<flow.ts> tooltip="flow.ts" URL="src/components/web-custom/flow.ts" fillcolor="#ddfeff"] } } }
    "src/components/web-custom/flow.ts" -> "src/components/web-custom/store.ts"
    "src/components/web-custom/flow.ts" -> "src/components/web-custom/Test_c.vue"
    subgraph "cluster_src" {label="src" subgraph "cluster_src/components" {label="components" subgraph "cluster_src/components/web-custom" {label="web-custom" "src/components/web-custom/store.ts" [label=<store.ts> tooltip="store.ts" URL="src/components/web-custom/store.ts" fillcolor="#ddfeff"] } } }
    subgraph "cluster_src" {label="src" subgraph "cluster_src/config" {label="config" "src/config/index.ts" [label=<index.ts> tooltip="index.ts" URL="src/config/index.ts" fillcolor="#ddfeff"] } }
    "src/config/index.ts" -> "src/core/siyuan_type.ts"
    "src/config/index.ts" -> "src/core/dependency.ts"
    "src/config/index.ts" -> "src/util/deep_assign.ts"
    subgraph "cluster_src" {label="src" subgraph "cluster_src/core" {label="core" "src/core/build.ts" [label=<build.ts> tooltip="build.ts" URL="src/core/build.ts" fillcolor="#ddfeff"] } }
    "src/core/build.ts" -> "src/core/cache.ts"
    "src/core/build.ts" -> "src/core/htmlTemplate.ts"
    "src/core/build.ts" -> "src/core/render.ts"
    "src/core/build.ts" -> "src/core/siyuan_api.ts"
    "src/core/build.ts" -> "src/core/siyuan_type.ts"
    "src/core/build.ts" -> "src/config/index.ts"
    "src/core/build.ts" -> "src/util/deep_assign.ts"
    subgraph "cluster_src" {label="src" subgraph "cluster_src/core" {label="core" "src/core/cache.ts" [label=<cache.ts> tooltip="cache.ts" URL="src/core/cache.ts" fillcolor="#ddfeff"] } }
    "src/core/cache.ts" -> "src/core/node.ts"
    "src/core/cache.ts" -> "src/core/siyuan_api.ts"
    "src/core/cache.ts" -> "src/core/siyuan_type.ts"
    subgraph "cluster_src" {label="src" subgraph "cluster_src/core" {label="core" "src/core/dependency.ts" [label=<dependency.ts> tooltip="dependency.ts" URL="src/core/dependency.ts" fillcolor="#ddfeff"] } }
    "src/core/dependency.ts" -> "src/core/siyuan_type.ts"
    subgraph "cluster_src" {label="src" subgraph "cluster_src/core" {label="core" "src/core/htmlTemplate.ts" [label=<htmlTemplate.ts> tooltip="htmlTemplate.ts" URL="src/core/htmlTemplate.ts" fillcolor="#ddfeff"] } }
    subgraph "cluster_src" {label="src" subgraph "cluster_src/core" {label="core" "src/core/node.ts" [label=<node.ts> tooltip="node.ts" URL="src/core/node.ts" fillcolor="#ddfeff"] } }
    "src/core/node.ts" -> "src/core/siyuan_type.ts"
    subgraph "cluster_src" {label="src" subgraph "cluster_src/core" {label="core" "src/core/render.api.dep.ts" [label=<render.api.dep.ts> tooltip="render.api.dep.ts" URL="src/core/render.api.dep.ts" fillcolor="#ddfeff"] } }
    "src/core/render.api.dep.ts" -> "src/core/cache.ts"
    "src/core/render.api.dep.ts" -> "src/core/siyuan_type.ts"
    "src/core/render.api.dep.ts" -> "src/core/dependency.ts"
    subgraph "cluster_src" {label="src" subgraph "cluster_src/core" {label="core" "src/core/render.ts" [label=<render.ts> tooltip="render.ts" URL="src/core/render.ts" fillcolor="#ddfeff"] } }
    "src/core/render.ts" -> "src/core/cache.ts"
    "src/core/render.ts" -> "src/core/siyuan_api.ts"
    "src/core/render.ts" -> "src/core/siyuan_type.ts"
    "src/core/render.ts" -> "src/core/dependency.ts"
    "src/core/render.ts" -> "src/util/escaping.ts"
    subgraph "cluster_src" {label="src" subgraph "cluster_src/core" {label="core" "src/core/siyuan_api.ts" [label=<siyuan_api.ts> tooltip="siyuan_api.ts" URL="src/core/siyuan_api.ts" fillcolor="#ddfeff"] } }
    "src/core/siyuan_api.ts" -> "src/components/data_promise/index.ts"
    "src/core/siyuan_api.ts" -> "src/core/siyuan_type.ts"
    "src/core/siyuan_api.ts" -> "src/config/index.ts"
    subgraph "cluster_src" {label="src" subgraph "cluster_src/core" {label="core" "src/core/siyuan_type.ts" [label=<siyuan_type.ts> tooltip="siyuan_type.ts" URL="src/core/siyuan_type.ts" fillcolor="#ddfeff"] } }
    subgraph "cluster_src" {label="src" subgraph "cluster_src/pages" {label="pages" "src/pages/App.vue" [label=<App.vue> tooltip="App.vue" URL="src/pages/App.vue" fillcolor="#41f083"] } }
    subgraph "cluster_src" {label="src" subgraph "cluster_src/pages" {label="pages" subgraph "cluster_src/pages/steps" {label="steps" "src/pages/steps/steps.vue" [label=<steps.vue> tooltip="steps.vue" URL="src/pages/steps/steps.vue" fillcolor="#41f083"] } } }
    subgraph "cluster_src" {label="src" subgraph "cluster_src/pages" {label="pages" "src/pages/test.vue" [label=<test.vue> tooltip="test.vue" URL="src/pages/test.vue" fillcolor="#41f083"] } }
    subgraph "cluster_src" {label="src" subgraph "cluster_src/publish" {label="publish" "src/publish/github.ts" [label=<github.ts> tooltip="no-orphans" URL="src/publish/github.ts" fillcolor="#ccffcc" fontcolor="orange" color="orange"] } }
    subgraph "cluster_src" {label="src" subgraph "cluster_src/publish" {label="publish" "src/publish/interface.ts" [label=<interface.ts> tooltip="interface.ts" URL="src/publish/interface.ts" fillcolor="#ddfeff"] } }
    "src/publish/interface.ts" -> "src/config/index.ts"
    "src/publish/interface.ts" -> "src/core/build.ts"
    subgraph "cluster_src" {label="src" subgraph "cluster_src/publish" {label="publish" "src/publish/s3.ts" [label=<s3.ts> tooltip="s3.ts" URL="src/publish/s3.ts" fillcolor="#ddfeff"] } }
    "src/publish/s3.ts" -> "src/publish/interface.ts"
    subgraph "cluster_src" {label="src" "src/server.ts" [label=<server.ts> tooltip="server.ts" URL="src/server.ts" fillcolor="#ddfeff"] }
    "src/server.ts" -> "src/config/index.ts"
    "src/server.ts" -> "src/core/cache.ts"
    "src/server.ts" -> "src/core/htmlTemplate.ts"
    "src/server.ts" -> "src/core/render.ts"
    subgraph "cluster_src" {label="src" subgraph "cluster_src/util" {label="util" "src/util/custom_error.ts" [label=<custom_error.ts> tooltip="no-orphans" URL="src/util/custom_error.ts" fillcolor="#ccffcc" fontcolor="orange" color="orange"] } }
    subgraph "cluster_src" {label="src" subgraph "cluster_src/util" {label="util" "src/util/deep_assign.ts" [label=<deep_assign.ts> tooltip="deep_assign.ts" URL="src/util/deep_assign.ts" fillcolor="#ddfeff"] } }
    subgraph "cluster_src" {label="src" subgraph "cluster_src/util" {label="util" "src/util/escaping.ts" [label=<escaping.ts> tooltip="escaping.ts" URL="src/util/escaping.ts" fillcolor="#ddfeff"] } }
    subgraph "cluster_src" {label="src" subgraph "cluster_src/util" {label="util" "src/util/setTime.ts" [label=<setTime.ts> tooltip="no-orphans" URL="src/util/setTime.ts" fillcolor="#ccffcc" fontcolor="orange" color="orange"] } }
    subgraph "cluster_src" {label="src" subgraph "cluster_src/util" {label="util" "src/util/store.bower.dep.ts" [label=<store.bower.dep.ts> tooltip="store.bower.dep.ts" URL="src/util/store.bower.dep.ts" fillcolor="#ddfeff"] } }
    "src/util/store.bower.dep.ts" -> "src/core/dependency.ts"
    subgraph "cluster_src" {label="src" subgraph "cluster_src/util" {label="util" "src/util/store.node.dep.ts" [label=<store.node.dep.ts> tooltip="store.node.dep.ts" URL="src/util/store.node.dep.ts" fillcolor="#ddfeff"] } }
    "src/util/store.node.dep.ts" -> "src/core/dependency.ts"
    subgraph "cluster_src" {label="src" subgraph "cluster_src/util" {label="util" "src/util/writeFile.ts" [label=<writeFile.ts> tooltip="no-orphans" URL="src/util/writeFile.ts" fillcolor="#ccffcc" fontcolor="orange" color="orange"] } }
    subgraph "cluster_src" {label="src" "src/vite-env.d.ts" [label=<vite-env.d.ts> tooltip="vite-env.d.ts" URL="src/vite-env.d.ts" fillcolor="#ccffcc"] }
    subgraph "cluster_src" {label="src" "src/webpage.ts" [label=<webpage.ts> tooltip="webpage.ts" URL="src/webpage.ts" fillcolor="#ddfeff"] }
    "src/webpage.ts" -> "src/core/render.api.dep.ts"
    "src/webpage.ts" -> "src/pages/App.vue"
    "src/webpage.ts" -> "src/pages/steps/steps.vue"
    "src/webpage.ts" -> "src/pages/test.vue"
    "src/webpage.ts" -> "src/util/store.bower.dep.ts"
}

点击该块中的链接思源就会崩溃

Expected result

无响应,或打开文件管理器

Screenshot or screen recording presentation

No response

Version environment

- Version: v2.11.4
- Operating System: windows
- Browser (if used):

Log file

nil

More information

No response

Activity

88250

88250 commented on Dec 27, 2023

@88250
Member

抱歉,我没看明白重现步骤,麻烦补充一下。

2234839

2234839 commented on Dec 27, 2023

@2234839
MemberAuthor

图片
填入上面的图形代码
再点击里面的链接
图片

88250

88250 commented on Dec 27, 2023

@88250
Member

收到,稍后排查。

changed the title [-]graph 块内链接可导致思源笔记崩溃[/-] [+]Clicking a hyperlink in a chart block results in a white screen in the interface[/+] on Dec 27, 2023
modified the milestone: 2.12.0 on Dec 27, 2023
88250

88250 commented on Dec 28, 2023

@88250
Member

排查了下,是因为超链接是相对路径,点击请求的话就是相对于当前 Document 的路径了,请求以后导致界面加载失败所以白屏了。

我们可以拦截到请求,但是无法判断是否是合法的资源(内部资源),比如 src/xxx 这样的请求就很难判断是内置资源还是应该打开浏览器跳转,类似的情况比较多,所以没有办法判断。另外一个思路是提供类似 Base URL 的参数来设置生成的超链接,这样就能将相对路径转换为绝对路径,但是搜索了下 Graphviz 好像没有配置 Base URL 的方法。

所以目前暂时无法处理这种情况了,只能考虑使用绝对路径或者不要点击 Graphviz 中的相对路径超链接,感谢反馈。

TCOTC

TCOTC commented on Mar 9, 2025

@TCOTC
Contributor

@88250 没有办法判断路径是否合法或者资源是否存在的吗?

Image

88250

88250 commented on Mar 9, 2025

@88250
Member

能判断,但是每个请求都拦截判断的话代价太大了。

TCOTC

TCOTC commented on Mar 9, 2025

@TCOTC
Contributor

只拦截图表里的呢?

88250

88250 commented on Mar 9, 2025

@88250
Member

估计得改库的代码吧,我觉得最好不要动,不然以后不好维护。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @88250@Vanessa219@2234839@TCOTC

        Issue actions

          Clicking a hyperlink in a chart block results in a white screen in the interface · Issue #9991 · siyuan-note/siyuan