Switching to Sentry-Javascript

SDKs
1

If you want to move to the new sentry-javascript SDK we provided a short guide here of the most common patterns:

Migration

Here are some examples of how the new SDKs work. Please note that the API for all JavaScript SDKs is the same.

Installation

Old :

Raven.config('___PUBLIC_DSN___', { release: '1.3.0', }).install();

New :

Sentry.init({ dsn: '___PUBLIC_DSN___', release: '1.3.0', });

Set a global tag

Old :

Raven.setTagsContext({ key: 'value' });

New :

Sentry.configureScope(scope => scope.setTag('key', 'value'));

Capture custom exception

Old

try {
  throwingFunction();
} catch (e) {
  Raven.captureException(e, {
    extra: {
      debug: false
    }
  });
}

New :

try {
  throwingFunction();
} catch (e) {
  Sentry.withScope(scope => {
    scope.setExtra('debug', false);
    Sentry.captureException(e);
  });
}

Capture a message

Old :

Raven.captureMessage('test', 'info', {
  extra: {
    debug: false
  }
});

New :

Sentry.withScope(scope => {
  scope.setExtra('debug', false);
  Sentry.captureMessage('test', 'info');
});

Breadcrumbs

Old :

Raven.captureBreadcrumb({
  message: 'Item added to shopping cart',
  category: 'action',
  data: {
    isbn: '978-1617290541',
    cartSize: '3'
  }
});

New :

Sentry.addBreadcrumb({
  message: 'Item added to shopping cart',
  category: 'action',
  data: {
    isbn: '978-1617290541',
    cartSize: '3'
  }
});
3 Likes
2

Thanks. Is there a timeline to sunset Raven?

3

Unofficial plan is 1 year+ while we probably will maintain it until browser no longer are able to run it.
We will make bugfix releases for raven-js if needed but no more new features.

4

What’s the migration pattern for using Raven’s ignoreErrors? Do we need to implement that ourselves with beforeSend?

5

ignoreErrors should work the same way it did before, see: https://github.com/kamilogorek/sentry-browser-sdk-demo/blob/master/app.js#L23
for a detailed example.

1 Like
6

We were previously setting captureUnhandledRejections to false in raven. For sentry-browser, the config options don’t include anything like this, is there a way to get parity?

UPDATE: On further review, it looks like providing custom options to the GlobalHandlers integration is the new place to pass this (setting onunhandledrejection to false). Going to test that out, but wanted others to know because it isn’t easy to find in the docs.

7

With raven-js I was using the ravenSuccess event to get informed of the latest report:

document.addEventListener('ravenSuccess', event => {
  console.log(event.data.event_id);
}, true);

How does that work with @sentry/browser?

8

So we have two hooks for this:
beforeSend:
https://docs.sentry.io/error-reporting/configuration/filtering/?platform=javascript#before-send

we removed the “afterSucces” callback since we see the events as “fire and forget” and we usually don’t want people to wait for a response (except for very specific use cases).

If you want to really wait until all requests are finished you can use this: https://docs.sentry.io/error-reporting/configuration/draining/?platform=javascript

Otherwise Sentry.lastEventId() always contains the last sent (currently sending) eventId.

9

I’m guessing this is the new way to set user context. Will leave here in case anyone else was looking.
Tracking Users
Old:

Raven.setUserContext({
    email: 'matt@example.com',
    id: '123'
});

New :

Sentry.configureScope(scope => {
    scope.setUser({
        email: 'matt@example.com',
        id: '123'
    });
});
1 Like
10

More migration tips since the logger and tags fields have been removed from init configuration options.

Logger name
Old:

Raven.config('__DSN__', {
    logger: 'javascript'
})

New:

Sentry.init({
  dsn: '__DSN__'
});

Initial Tags
Old:

Raven.config('__DSN__', {
    tags,
})

New:

Sentry.init({
  dsn: '__DSN__',
});
Object.entries(tags).forEach(([key, value]) =>
    Sentry.configureScope(scope => scope.setTag(key, value));
});
1 Like
11

Another tip: Something to watch for is that the Breadcrumb integration by default captures console.assert and this means it is no longer a cheap call, especially if any of the arguments are objects. The breadcrumbing will try to serialize them.

Just saying as our app tanked due to a console.assert call inside a function called in an AngularJS watch. Maybe questionable in the first place, but regardless, don’t assume console.assert is cheap, even if the arg is truthy and you never see any output.

12

What about Raven.isSetup() & Raven.clearContext()?

13

So isSetup was hardly ever used as a public top level API. You can use this to get the same result:
Sentry.getCurrentHub().getClient().getOptions().enabled
ref: https://github.com/getsentry/sentry-javascript/issues/2027

For clearContext you need to clear the Scope:

Sentry.configureScope(function(scope) {
  scope.clear();
});

You can read more about it here:

1 Like