如何在从 Golang（gin-gonic 包）提供的 html 模板文件上使用节点模块（即：Sentry）

Question

TL;DR: I have a Golang application that, using gin-gonics package, renders a very simple HTML. TL;DR：我有一个 Golang 应用程序，它使用 gin-gonics package，呈现一个非常简单的 HTML。 Once launched in local, accessing to http://localhost:8080/login (the URL is an example), it will show the html page, with its divs, buttons, etc. The html content is retrieved from a ".tpl" file. Once launched in local, accessing to http://localhost:8080/login (the URL is an example), it will show the html page, with its divs, buttons, etc. The html content is retrieved from a ".tpl"文件。

Problem is that such html page must include a javascript script, that uses Sentry.问题是这样的 html 页面必须包含一个使用 Sentry 的 javascript 脚本。 I'm unable to make this work.我无法完成这项工作。 Including a vanilla-javascript script works perfectly well, but when the script has dependencies, I dont know how to make it work (I dont know if what I want is possible at all).包含一个 vanilla-javascript 脚本效果很好，但是当脚本有依赖项时，我不知道如何使它工作（我不知道我想要的是否可能）。

Any clues?有什么线索吗？

Details: Golang code is as simple as this:详细信息： Golang 代码就这么简单：

package main

import "github.com/gin-gonic/gin"

func main() {
    r := gin.Default()
    r.LoadHTMLGlob("web/templates/**/*.tpl")
    r.Static("/assets", "./web/assets")

    r.GET("/", func(c *gin.Context) {
        c.JSON(200, "")
    })
    r.GET("/login", login_handle)
    r.Run(":8080")
}

func login_handle(c *gin.Context) {
    data := gin.H{...} // Not relevant
    c.HTML(200, "pages/login.tpl", data)
}

The "login.tpl" just creates simple divs, dummy buttons and so on. “login.tpl”只是创建简单的 div、虚拟按钮等。 Core part is at the end of the file, where javascripts scripts are included:核心部分位于文件末尾，其中包含 javascripts 脚本：

{{ define "pages/login.tpl" }}
<!DOCTYPE html>
    <html lang="en">
        <body>
        (...) // Not relevant. A bunch of divs, buttons and so
            <script type="text/javascript" src="../assets/js/login.js"></script>
        </body>
    </html>
{{ end }}

Directory structure is as follows:目录结构如下：

<root dir>
- go.mod
- go.sum
- main.go
- web/
-- assets/
--- js/
---- login.js
-- templates/
--- pages/
---- login.tpl

This works fine if the "login.js" is a vanilla-javascript script like this:如果“login.js”是这样的 vanilla-javascript 脚本，这可以正常工作：

function dummyFun() {
    myvar = "hello"
}

Executing the app, accessing to the URL, using code inspector to check if all requests/responses are correct... everything is OK.执行应用程序，访问 URL，使用代码检查器检查所有请求/响应是否正确......一切正常。

However, trouble starts when I try to include Sentry on that script.但是，当我尝试在该脚本中包含 Sentry 时，麻烦就开始了。 Following the official doc: https://docs.sentry.io/platforms/javascript/按照官方文档： https://docs.sentry.io/platforms/javascript/

If I set the script to this:如果我将脚本设置为：

import * as Sentry from "@sentry/browser";
import { BrowserTracing } from "@sentry/tracing";

Sentry.init({
  dsn: (...), // The correct DSN
  integrations: [new BrowserTracing()],
  tracesSampleRate: 1.0,

});

and then try to launch the app again, using code inspector an accessing to "console" tab will result in several errors (ranging from "module not found", to "sentry not found", to "cannot use import syntax"...)然后尝试再次启动应用程序，使用代码检查器访问“控制台”选项卡将导致几个错误（从“找不到模块”到“找不到哨兵”到“无法使用导入语法”...... )

Of course: changing the script is not the only thing I tried.当然：更改脚本并不是我唯一尝试过的事情。 The "npm" command is launched to generate the related.json files (like package.json), and also the "node_modules" folder.启动“npm”命令以生成相关的.json 文件（如 package.json），以及“node_modules”文件夹。

I tried to copy the package.json and "node_modules" folder to different places in the directory structure, to check if the script is able to find them, and none of them succeeded.我尝试将 package.json 和“node_modules”文件夹复制到目录结构中的不同位置，以检查脚本是否能够找到它们，但没有一个成功。

So the question is: it is possible to achieve what I'm trying to do?所以问题是：有可能实现我想要做的事情吗？ Goal will be to render that HTML page, with the sentry javascript script running.目标是渲染 HTML 页面，同时运行哨兵 javascript 脚本。 So, as an example, if I render the HTML, and one of the buttons execute a non-defined function ('cause I forgot to implement it), an error will be sent to Sentry (and I will be able to track it down, log it, etc).因此，例如，如果我渲染 HTML，并且其中一个按钮执行未定义的 function（因为我忘记实现它），则会向 Sentry 发送错误（我将能够追踪它，记录它等）。

PS: New into frontend/node/javascript development world, so my knowledge may be leaving critical things out of scope. PS：前端/节点/javascript开发世界的新手，所以我的知识可能会将关键的东西排除在scope之外。

Answer 1

Fixed.固定的。

As Rahmat Fathoni suggested in a comment to the main post, using CDN worked fine.正如 Rahmat Fathoni 在对主帖的评论中建议的那样，使用CDN效果很好。

如何在从 Golang（gin-gonic 包）提供的 html 模板文件上使用节点模块（即：Sentry）

问题描述

1 个解决方案

解决方案1
0 2022-08-26 12:56:33

如何在从 Golang（gin-gonic 包）提供的 html 模板文件上使用节点模块（即：Sentry）

问题描述

1 个解决方案

解决方案1 0 2022-08-26 12:56:33

解决方案1
0 2022-08-26 12:56:33