How to install Sentry on the Back-end (NodeJS)

[karh]

Here’s quick guide on how to install Sentry on the back end.

Note: this can get overwritten by a wappler update.

1. Make sentry account

2. Create a project and select that you want to install for Express

3. Do the following npm install:
   npm install --save @sentry/node @sentry/tracing

4. Open server.js in /lib

5. Under const cors = require('cors'); add code:

    const Sentry = require('@sentry/node');
    const Tracing = require("@sentry/tracing");

6. Under const app=express(); add code (don’t forget to enter your DSN:

    Sentry.init({

    dsn: "YOUR_DSN_LINK_HERE",

    integrations: [

    // enable HTTP calls tracing

    new Sentry.Integrations.Http({ tracing: true }),

    // enable Express.js middleware tracing

    new Tracing.Integrations.Express({ app }),

    ],

    // Set tracesSampleRate to 1.0 to capture 100%

    // of transactions for performance monitoring.

    // We recommend adjusting this value in production

    tracesSampleRate: 0.1,

    });

    // RequestHandler creates a separate execution context using domains, so that every

    // transaction/span/breadcrumb is attached to its own Hub instance

    app.use(Sentry.Handlers.requestHandler());

    // TracingHandler creates a trace for every incoming request

    app.use(Sentry.Handlers.tracingHandler());

At this point it should look like:

7. Add app.use(Sentry.Handlers.errorHandler()); in the module.exports like so:

8. Trigger an error (for example a database query that doesn’t work and check in your sentry.io dashboard under Issues if you can see the error.

Sentry back-end is now installed.

(Thanks @Eldynn - it’s based on your thread!)

[karh]

I can’t get the Sentry front-end to work without the CDN. Can somebody help me?

They write here that they recommend using the npm package

1. I installed the @sentry/browser using these instructions: npm install --save @sentry/browser @sentry/tracing

2. The next step is configure:

   
   
   But that is giving me errors: “cannot use import statement outside a module node”

I looked into the error and I’m trying to use ES6 (import) while I can only use commonJS.
So then I simply tried to load the script that I need, by using:
<script src="/node_modules/@sentry/browser/build/bundle.min.js"></script>

But this won’t load as /node_modules/ is not accessible if I understand correctly - the root folder is /public.

[sid]

NodeJS is not supported on the client side/front end in Wappler.

[sid]

@George This file might get overwritten on Wappler update, correct?
I don’t use sentry or any such tool yet, but out of curiosity, is Wappler planning to add such an extensibility support?

[karh]

How would you solve this issue if you don’t want to use the CDN?

[sid]

Go to the JS file on CDN’s URL, and download the file. Then use it as a local file in your project.

[karh]

Makes sense I suppose. Am I misinterpreting the docs of Sentry then? I thought they were saying we can use their npm package for the frontend

[JonL]

For that to work you need to use something like browserify, grunt, webpack, etc

[Eldynn]

We moved the sentry code into an external file to prevent Wappler to overwrite our custom code in server.js during an update of Wappler.

extensions/server_connect/routes/sentry.js:

// JavaScript Document

const Sentry = require('@sentry/node');
const Tracing = require("@sentry/tracing");

exports.handler = function (app) {
    Sentry.init({
        dsn: "CHANGE_ME",
        integrations: [
            // enable HTTP calls tracing
            new Sentry.Integrations.Http({tracing: true}),
            // enable Express.js middleware tracing
            new Tracing.Integrations.Express({app}),
        ],
        environment: process.env.MODE,
    });

    // RequestHandler creates a separate execution context using domains, so that every
    // transaction/span/breadcrumb is attached to its own Hub instance
    app.use(Sentry.Handlers.requestHandler());
    // TracingHandler creates a trace for every incoming request
    app.use(Sentry.Handlers.tracingHandler());

    app.use(Sentry.Handlers.errorHandler());
}

[George]

Maybe we should add some out of tge box integration to Sentry in Server Connect @patrick

[karh]

@Eldynn Thanks - I’m just wondering if the app.use(Sentry.Handlers.errorHandler()); shouldn’t be put in here?

After I’ve moved that line to the extension - it doesn’t seem to capture a 500 error.

I think that line needs to be run at the last route, which might not be possible in this way(?)

[Eldynn]

How do you trigger your error?

If it doesn’t work then we need to revert and hook directly into server.js. Maybe the Wappler team will do the Sentry integration and it will fix this.

[JonL]

Sentry should be initialized as early as possible.

[karh]

By loading a server connect that tries a DB update query that doesn’t work. It’s trying to update a record that doesn’t exist.

I’m quite sure it has to do by the fact that the code in /extensions is loaded too early for that error. Probably the same reason why the wappler devs load the error codes at the bottom of server.js

@JonL So in the server.js?

[JonL]

Yup.

[patrick]

I think the way @Eldynn has it with the external file is the best way. The custom routes are loaded before the api routes, it is important that Sentry comes before other routes. Also the external file will never be updated by an Wappler update, so it is more future proof.

[karh]

@patrick It doesn’t catch all errors though this way. It did when it was set up like in this screenshot How to install Sentry on the Back-end (NodeJS)

(So I put the app.use(Sentry.Handlers.errorHandler()); where the arrow is pointing.)

So I think there needs to be a deeper integration

[patrick]

I see, checked the documentation and the error handler should indeed be applied after all the routes, but before our error handler. Will see if we can maybe provide more hooks for you, so that you not need to edit our code.

[karh]

That would be amazing @patrick thanks!