英文:
How to use node modules (i.e: Sentry) on html template files served from Golang (gin-gonic package)
问题
TL;DR：我有一个使用gin-gonics包的Golang应用程序，用于呈现一个非常简单的HTML页面。一旦在本地启动，访问http://localhost:8080/login（URL仅为示例），它将显示HTML页面，包括其div、按钮等。HTML内容是从一个“.tpl”文件中检索的。
问题是该HTML页面必须包含一个使用Sentry的JavaScript脚本，但我无法使其正常工作。包含纯JavaScript脚本可以正常工作，但当脚本有依赖时，我不知道如何使其工作（我不知道我是否能够实现我想要的效果）。
有什么线索吗？
详细信息：
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{...} // 不相关
c.HTML(200, "pages/login.tpl", data)
}
"login.tpl"只创建了简单的div、虚拟按钮等。核心部分位于文件末尾，其中包含了JavaScript脚本：
{{ define "pages/login.tpl" }}
<!DOCTYPE html>
<html lang="en">
<body>
(...) // 不相关。一堆div、按钮等
<script type="text/javascript" src="../assets/js/login.js"></script>
</body>
</html>
{{ end }}
目录结构如下：
<root dir>
- go.mod
- go.sum
- main.go
- web/
-- assets/
--- js/
---- login.js
-- templates/
--- pages/
---- login.tpl
如果"login.js"是一个纯JavaScript脚本，如下所示，这将正常工作：
function dummyFun() {
myvar = "hello"
}
执行应用程序，访问URL，并使用代码检查器检查所有请求/响应是否正确...一切正常。
然而，当我尝试在该脚本中包含Sentry时，问题就开始了。按照官方文档的说明：https://docs.sentry.io/platforms/javascript/
如果我将脚本设置为以下内容：
import * as Sentry from "@sentry/browser";
import { BrowserTracing } from "@sentry/tracing";
Sentry.init({
dsn: (...), // 正确的DSN
integrations: [new BrowserTracing()],
tracesSampleRate: 1.0,
});
然后再次尝试启动应用程序，使用代码检查器并访问"console"选项卡将导致多个错误（从"module not found"到"sentry not found"，再到"cannot use import syntax"等等）。
当然，更改脚本并不是我尝试的唯一事情。我使用"npm"命令生成相关的.json文件（如package.json），还有"node_modules"文件夹。
我尝试将package.json和"node_modules"文件夹复制到目录结构中的不同位置，以检查脚本是否能够找到它们，但没有成功。
所以问题是：我所尝试的是否可能实现？目标是呈现该HTML页面，并运行Sentry JavaScript脚本。因此，例如，如果我呈现HTML，并且其中一个按钮执行一个未定义的函数（因为我忘记实现它），则会将错误发送到Sentry（我将能够跟踪、记录等）。
PS：我是前端/Node.js/JavaScript开发世界的新手，所以我的知识可能忽略了一些关键的事情。
英文:
TL;DR: I have a Golang application that, using gin-gonics package, renders a very simple 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.
Problem is that such html page must include a javascript script, that uses Sentry. 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).
Any clues?
Details:
Golang code is as simple as this:
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. Core part is at the end of the file, where javascripts scripts are included:
{{ 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:
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.
However, trouble starts when I try to include Sentry on that script. Following the official doc: 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.
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.
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. 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).
PS: New into frontend/node/javascript development world, so my knowledge may be leaving critical things out of scope.
答案1
得分: 0
已修复。
正如Rahmat Fathoni在主贴的评论中建议的那样，使用CDN效果很好。
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论