How to use node modules (i.e: Sentry) on html template files served from Golang (gin-gonic package)

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)
}

JavaScript
​x
 
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 }}

JavaScript
 
{{ 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

JavaScript
 
<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"
}

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.

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,

});

JavaScript
 
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.

Answer

Fixed.

As Rahmat Fathoni suggested in a comment to the main post, using CDN worked fine.

Advertisement

Answer