is package airbrake-js posting to api.airbrake.io ? (and not airbrake.io)

[MathieuDerelle]

sorry, not sure where to post this

On airbrake.io, we are alerted that posting errors to airbrake.io directly is deprecated and should be done through api.airbrake.io

This page states which notifiers are affected
https://airbrake.io/try/updating-notifiers-to-use-correct-endpoint#javascript-notifier

but it does not state if users of airbrake-js (prior to split into @airbrake/node and @airbrake/browser) are affected or not by this problem...

[mmcdaris]

Hi @MathieuDerelle, thanks for writing in! The deprecated node-airbrake package has been using api.airbrake.io since version v0.2.6. I do recommend upgrading to use the official @airbrake/node package.

Let me know if that answers things for you. If not please share the airbrake package and version your app is using and we can help further.

[thompiler]

Hey @MathieuDerelle adding on to what @mmcdaris mentioned, older versions of airbrake-js (before the browser and node packages) that I can see, all point to api.airbrake.io. The oldest one I have seen is 0.4.2. You can check this yourself here:
https://cdnjs.cloudflare.com/ajax/libs/airbrake-js/0.4.2/client.js

Look for the line referencing https://api.airbrake.io.

Is there a specific version that you're using? By the way, we would generally recommend using the latest version of our notifiers to get the latest features and improvements.

[MathieuDerelle]

We have several nuxt projects using airbrake-js (with different versions : 1.5.0, 1.6.3, 1.6.8, v2.0.0-beta.2)
But it's not easy to migrate from the old package to the new ones, we have to split all code between backend and frontend.

Nuxt is missing a module for airbrake. Could be inspired by the sentry module
https://github.com/nuxt-community/sentry-module

It's in the back of my mind for some time but haven't taken the time to create this module.

[thompiler]

Hi @MathieuDerelle,

I'd be happy to let the team know about this request. Could you share a little information about this:

But it's not easy to migrate from the old package to the new ones, we have to split all code between backend and frontend.

Would adding an Airbrake module like the example one you provided fix this issue you mentioned? ie: would you monitor both frontend and backend errors without any added setup needed?

[MathieuDerelle]

Sorry for the late answer

Would adding an Airbrake module like the example one you provided fix this issue you mentioned? ie: would you monitor both frontend and backend errors without any added setup needed?

Yes that would help to easily integrate airbrake in nuxt

in our most recent project, we have written 2 plugins (in the nuxt sense)

  plugins: [
    '~/plugins/airbrake-nuxt.client.js', // only loaded on frontend
    '~/plugins/airbrake-nuxt.server.js', // only loaded on backend

airbrake-nuxt.client.js imports @airbrake/browser
airbrake-nuxt.server.js imports @airbrake/node

each plugin has its own filters (in the sense of airbrake's addFilter) and some filters shared by the 2 contexts
mostly in order to populate correctly airbrake's params / session / context
(with details for axios, components' state, store's state)

There was also the problem that sourcemaps were not available for the backend
I had to make some modifications to an existing webpack plugin :
https://github.com/bk3/webpack-airbrake-private-sourcemaps/pull/1

and we kinda code that in each project 😅 (from scratch or a bit of copy/pasting)
we should have built a nuxt module by now 😅

[MathieuDerelle]

it also need to add an error middleware in nuxt

I've just found out about your express instrumentation
https://github.com/airbrake/airbrake-js/tree/master/packages/node/examples/express
It would work for us, because we use an hybrid express/connect config

But nuxt uses connect by default and I don't think it's compatible

the hybrid config consists of a middleware :

// https://nuxtjs.org/examples/auth-routes/

// Transform req & res to have the same API as express
// So we can use res.status() & res.json()

import express from 'express'
const app = express()

export default (req, res, next) => {
  Object.setPrototypeOf(req, app.request)
  Object.setPrototypeOf(res, app.response)
  req.res = res
  res.req = req
  next()
}

(feels a bit dirty but it works)