tinkoff/micro-sentry

Tiny Sentry client with idiomatic wrapper for Angular

micro-sentry

@micro-sentry is a tiny sentry client to monitor your applications without raising your bundle size.

Why is it better than default sentry client?

👜 It is small. So, it is at most 1.9 KB size instead of 22.5 KB by default client but has all the essential functionality

🛠 It is easy to set up. There is a lightweight wrapper for Angular and a browser tool for other frameworks or vanilla.

Installation

Angular:

Micro-sentry version	Angular version
>= 6	>= 14
>= 5	>= 13
>= 4	>= 12
>= 3	>= 11
>= 2	>= 10

npm i @micro-sentry/angular

Other:

npm i @micro-sentry/browser

How to set up

Angular

Just add it into app.module.ts of your application:

import { MicroSentryModule } from '@micro-sentry/angular';

@NgModule({
  imports: [
    MicroSentryModule.forRoot({
      dsn: 'https://[email protected]/123',
    }),
  ],
})
export class AppModule {}

Javascript / Typescript

If you do not use Angular framework, you can install @micro-sentry/browser module to create client manually.

const client = new BrowserMicroSentryClient({
  dsn: 'https://[email protected]/123',
});

try {
  // your app code
} catch (e) {
  client.report(e);
}

Core team

Igor Katsuba

Roman Sedov

License

🆓 Feel free to use our library in your commercial and private applications

All micro-sentry packages are covered by Apache 2.0

Read more about this license here

micro-sentry's Issues

[BUG] Exclude tslib from bundle?

🐞 Bug report

Description

https://bundlephobia.com/package/@micro-sentry/[email protected] shows that a big part of the package size comes from tslib. Is that necessary in the browser bundle?

Reproduction

Go to https://bundlephobia.com/package/@micro-sentry/[email protected]

Expected behavior

https://bundlephobia.com/package/@micro-sentry/[email protected] doesn't show tslib (if possible?)

Versions

• Package @micro-sentry/[email protected]

Additional context

It looks like tslib is only being used for __assign. Would it be possible to use a different polyfill or perhaps avoid Object.assign and add the keys directly?

[BUG] ReferenceError: XMLHttpRequest is not defined on SSR

🐞 Bug report

Description

Dispatching an error on server-side of Angular will error with XMLHttpRequest not defined.

Reproduction

No need to reproduce this, afaik XMLHttpRequest is not a defined in node environments.

Expected behavior

The library has to provide some sort of http-request api (to at least inform in the readme that we're supposed to provide it on the global window object) to report errors on server-side if its supposed to. Or completely ignore server-side errors and let the browser handle those as they implement the XMLHttpRequest object.

Versions

• @micro-sentry/[email protected]

If needed:

• Chrome
• Angular 15.2.2

Additional context

This is my server window object (necessary for lots of stuff to work):

This is the error:

Update angular version to 13, publish with ivy

🚀 Feature request

Is your feature request related to a problem?

Newer versions of Angular replace View Engine with Ivy. For compatibility, ngcc is run after installing an older published library. Updating would speed up installation and remove these lines from installation.

- @micro-sentry/core [es2015/esm2015] (https://github.com/TinkoffCreditSystems/micro-sentry)
- @micro-sentry/browser [es2015/esm2015] (https://github.com/TinkoffCreditSystems/micro-sentry)
- @micro-sentry/angular [es2015/esm2015] (https://github.com/TinkoffCreditSystems/micro-sentry)

Describe the solution you'd like

Update @micro-sentry/angular to version 13 and publish an update to npm.

Additional context

If interested, I'd be happy to submit a pull request for this. I plan to use this library on GlitchTip, an open source alternative to sentry.

I also need to set config values dynamically. I can work around this since it's really only a TypeScript level issue. However I'm happy to help review and work on pull requests if you'd like around the subject.

refactoring BreadcrumbPlugin

BreadcrumbPlugin was taken as-is from the original sentry. It is not matched with our code style guide. Needs to remove all @ts-ignore and eslint-disable

[BUG] Error thrown from an RxJS observable doesn't have any error message on Sentry

🐞 Bug report

Description

For some reason when error is thrown from Angular http client request observable, error message is not shown on Sentry. It just says "No error message". This worked as expected with official Angular Sentry client.

Reproduction

I have code similar to the following for processing http error responses.

@Injectable()
export class ReportService implements IReportService {

    constructor(private http: HttpClient) { }

    public getReport(reportConfig: ReportConfig): Observable<Report> {
        return this.http.get<{items: Report}>(`${environment.webApi}/adwords_report`, {
            params: reportConfig
        }).pipe(
            map(data => data.items),
            catchError((errorResponse: HttpErrorResponse) => {
                const error = errorResponse.error?.message || 'Server error',
                    status = errorResponse.status,
                    message = `Http error (${status}): ${error}`;

                return throwError(message);
            })
        );
    }
}

Expected behavior

Error message thrown from the observable should be sent to Sentry.

Versions

• Package @micro-sentry/[email protected]

If needed:

• OS: Ubuntu
• Browser Chrome
• Angular 12

[BUG] - Module not found: Error: Can't resolve '@micro-sentry/core' (webpack 4 & micro-sentry 5-6)

🐞 Bug report

Description

Hey all, first thanks for the work on this library -- it's an absolute life saver!

I'm currently using the vanilla version (though in a React app), @micro-sentry/browser, and in versions 5 & 6, I get the following error during build (with webpack):

ERROR in ./node_modules/@micro-sentry/browser/fesm2015/micro-sentry-browser.mjs
Module not found: Error: Can't resolve '@micro-sentry/core' in '/home/projects/github-x25w5q/node_modules/@micro-sentry/browser/fesm2015'
 @ ./node_modules/@micro-sentry/browser/fesm2015/micro-sentry-browser.mjs 1:0-65 16:39-56 562:23-31
 @ ./src/index.js

ERROR in chunk main [entry]
main.js
/home/projects/github-x25w5q/src/index.js 848129bca480294ec4fa1da45f08ffd4
Unexpected token (17:39)
|     return window;
| }
| class BrowserMicroSentryClient extends !(function webpackMissingModule() { var e = new Error("Cannot find module '@micro-sentry/core'"); e.code = 'MODULE_NOT_FOUND'; throw e; }()) {
|     constructor(options, window = getWindow()) {
|         super(options);

For some reason it looks like it can't resolve @micro-sentry/core from within that file, even though it's definitely been installed. On my end it looks like there may be a conflict with Webpack 4. When I test it in Webpack 5 it works as expected. Unfortunately though I have to use Webpack 4 IRL.

Luckily, version 4 of micro-sentry works fine; so I can use that, but just wanted to raise it here as eventually it would be nice to be able to use a version that doesn't include tslib too.

Any help would be great!

Reproduction

1. Open up the following Stackblitz: https://stackblitz.com/edit/github-x25w5q?file=src/index.js
2. In the terminal run webpack
3. Observe the error

Expected behavior

To successfully build!

Versions

• @micro-sentry/browser versions 5 and up
• webpack version 4.46.0

[FEATURE] Rate limiting

Are there any plans to support Sentry rate limiting? Would this feature be within the scope of micro-sentry?

As far as I understand, currently micro-sentry only does fire-and-forget XHRs, it's not concerned with rate limiting or even availability of sentry backend (something Sentry expects from a production-ready SDK).

[BUG] Angular 16 Support

🐞 Bug report

Description

Trying to install this library with Angular versions 15 or 16 does not work as it depends on Angular<=14

Reproduction

1. Create a new Angular 16 App
2. Add @micro-sentry/[email protected] to your package.json
3. npm install

This will give the following error:
npm ERR! Found: @angular/[email protected] npm ERR! node_modules/@angular/common npm ERR! @angular/common@"16.0.2" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer @angular/common@"^14.0.0" from @micro-sentry/[email protected]

Expected behavior

To be able to use use it with Angular 15/16

Versions

• @micro-sentry/[email protected]
• Angular 16

[BUG] BrowserMicroSentryClient lose state when using extendState method

🐞 Bug report

Description

When I using different methods for set sentry state e.g. setTag, setUser, setExtra, sentry sends only last value (from setting setExtra)

Reproduction

sequentially call

microSentryService.setUser({id: 123, name: 'Tom'});
microSentryService.setTag('appName', 'myApp');
microSentryService.setExtra('useFullData', 'someText');

// and then throw error

throw new Error('msg');

Error without tags and user, only extra

Expected behavior

Sentry state works like accumulator with all set params (user, extra etc) and sends them all

Versions

• Package "@micro-sentry/angular": "5.0.0"

Additional context

Found the supposed location of the error in browser-micro-sentry-client.ts.
All methods (setTag, setExtra) call extendState method which has to extend state but creates new state based on new value. This fact leads to data loss from state

[BUG] `Sentry.setTag` not showing up on sentry

🐞 Bug report

Description

I've added the test line: Sentry.setTag("name", "NEAL"); to a position i the code after Sentry has been initialized. Then at some other point I throw a fake error. the tag name: NEAL does not show up on the sentry page at all.

Expected behavior

Expect the tag to show up here but it does not:

Versions

`"@micro-sentry/browser": "^2.1.0",`

Any help would be greatly appreciated! Also thank you so much for making this project! It's a lifesaver as the Sentry browser one is wayyy too large.

[BUG]

🐞 Bug report

Description

Thank you for merging the removal of the Angular HTTPPlugin. Sadly with the new release I am getting now a factory error:

TypeError: Cannot read properties of undefined (reading 'dsn')
    at new MicroSentryClient (micro-sentry-core.mjs:107:21)
    at new BrowserMicroSentryClient (micro-sentry-browser.mjs:19:9)
    at new MicroSentryService (micro-sentry-angular.mjs:42:1)
    at core.mjs:3722:21
    at Object.MicroSentryService_Factory [as factory] (micro-sentry-angular.mjs:56:1)
    at R3Injector.hydrate (core.mjs:9353:35)
    at R3Injector.get (core.mjs:9247:33)
    at injectInjectorOnly (core.mjs:4870:33)
    at Module.ɵɵinject (core.mjs:4874:12)
    at Object.MicroSentryErrorHandler_Factory [as factory] (micro-sentry-angular.mjs:76:1)

Gping back from 6.1.2 to 6.1.1 fixes the issue.

[BUG] Not compatible with Angular Universal

🐞 Bug report

Description

The current version of micro-sentry is not compatible with Angular Universal unfortunately. If an error is thrown during the server-side rendering, micro-sentry itself causes another error when trying to submit it to Sentry:

ReferenceError: window is not defined
   at micro_sentry_angular_MicroSentryService.getRequestBlank
   ...

This happens due to the window not being available server-side.

Reproduction

1. Run micro-sentry server-side
2. Make sure that an error is thrown during the app execution, for example by manually throwing one

Expected behavior

To avoid crashing during the error reporting, micro-sentry should include a simple platform check and either get the required error reporting data without using window or not include them if an error is thrown server-side.

Versions

• @micro-sentry/[email protected]

Let me know if you have any questions or need any additional information 🙂

[FEATURE] Remove Angular HTTPClientModule dependency for smaller bundle size.

🚀 Feature request

First of all thank you very much for maintaining this plugin again. Love it!

I noticed that with the new Angular Versions you need HTTPClientModule for MicroSentry to run This increases our bundle size by about 20kB. Any chance of removing this dependency again?

Downgrade to Angular 10

[FEATURE] Export `Severity` as a regular enum or a string literal union

🚀 Feature request

Currently Severity is exported as a const enum.

It's increasingly common to build TypeScript projects using Babel, esbuild or swc, which do not support const enum. This makes it awkward to call methods like addBreadcrumb, because they expect a Severity, but that cannot be imported so some type asserting must happen instead, e.g. level: 'warning' as any

Alternatively, removing the enum entirely in favour of a string literal union would also work - this is also the approach the official Sentry SDK is using as of v7.

[BUG] @ng-web-apis module can't be resolved in CI pippeline testing

🐞 Bug report

Description

Micro-Sentry versions starting with 3.0.0 break ng test in a CI pipeline with the following error:
./node_modules/@micro-sentry/angular/fesm2020/micro-sentry-angular.mjs:9:0-45 - Error: Module not found: Error: Can't resolve '@ng-web-apis/common' in '/builds/glitchtip/glitchtip-frontend/node_modules/@micro-sentry/angular/fesm2020' .

Reproduction

I have only been able to reproduce this in the CI pipeline. It does not happen locally and only appears to impact testing.

Expected behavior

Tests shouldn't break and the @ng-web-apis peer dependency should be handled by micro-sentry.

Versions

@micro-sentry V.3.0.0 and above

If needed:

Angular 14

Additional context

As an experiment, I was able to avoid this error by adding @ng-web-apis/common as a dependency on my own project. But I don't think that should be necessary.

I set up a repository for testing. You can see the failed pipeline here:
https://gitlab.com/james.kiger/micro-sentry-test/-/jobs/2576177389

[BUG] "@micro-sentry/core" peer dependency in "@micro-sentry/angular" package

🐞 Bug report

Description

Since @micro-sentry/core is peer dependency instead of "hard" dependency, user has to install it explicitly.
Either installation instructions should be updated or @micro-sentry/core should be upgraded to "hard" dependency.

[BUG] Bump to Angular 15