Angular build issue - Typings file (with solution)

[kevcjones-archived]

• Review the documentation: https://docs.sentry.io/
• Search for existing issues: https://github.com/getsentry/sentry-javascript/issues
• Use the latest release: https://github.com/getsentry/sentry-javascript/releases

Package + Version

• @sentry/browser
• @sentry/node
• raven-js
• raven-node (raven for node)
• other:

Version:

 4.2.1

Description

Using Angular setup verbatim to the docs. The issue might be one of typescript. I fixed it manually but this is the notes for you guys.

Angular version information (yes we're behind)

Angular CLI: 1.7.3
Node: 8.9.4
OS: win32 x64
Angular: 5.2.11
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.3
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.4.2
webpack-bundle-analyzer: 2.13.1
webpack: 3.11.0

The issue was on build (no different between AOT and non AOT).

ERROR in node_modules/@sentry/browser/dist/index.d.ts(19,37): error TS1110: Type expected.
node_modules/@sentry/browser/dist/index.d.ts(19,86): error TS1110: Type expected.
node_modules/@sentry/browser/dist/index.d.ts(19,93): error TS1138: Parameter declaration expected.
node_modules/@sentry/browser/dist/index.d.ts(19,108): error TS1005: ',' expected.
node_modules/@sentry/browser/dist/index.d.ts(19,109): error TS1134: Variable declaration expected.
node_modules/@sentry/browser/dist/index.d.ts(19,121): error TS1005: '=' expected.
node_modules/@sentry/browser/dist/index.d.ts(20,33): error TS1005: ',' expected.
node_modules/@sentry/browser/dist/index.d.ts(20,79): error TS1005: ',' expected.
node_modules/@sentry/browser/dist/index.d.ts(20,128): error TS1005: ';' expected.
node_modules/@sentry/browser/dist/index.d.ts(20,134): error TS1109: Expression expected.
node_modules/@sentry/browser/dist/index.d.ts(21,25): error TS1005: ';' expected.
node_modules/@sentry/browser/dist/index.d.ts(21,88): error TS1005: ')' expected.
node_modules/@sentry/browser/dist/index.d.ts(21,91): error TS1005: ';' expected.
node_modules/@sentry/browser/dist/index.d.ts(21,92): error TS1128: Declaration or statement expected.
node_modules/@sentry/browser/dist/index.d.ts(29,1): error TS1128: Declaration or statement expected.

I looked into the offending file and i could see it was the 'inline' @imports that it hated.

from index.d.ts

getIntegrationsToSetup(options: import("@sentry/core/dist/interfaces").Options): import("@sentry/types").Integration[];
    setupIntegration(integration: import("@sentry/types").Integration, options: import("@sentry/core/dist/interfaces").Options): void;
    setupIntegrations<O extends import("@sentry/core/dist/interfaces").Options>(options: O): CoreIntegrations.IntegrationIndex;

Solution

Just import them as normal and use the types.

export { Breadcrumb, Request, SdkInfo, SentryEvent, SentryException, SentryResponse, Severity, StackFrame, Stacktrace, Status, Thread, User, } from '@sentry/types';
export { addBreadcrumb, captureException, captureEvent, captureMessage, configureScope, withScope, getHubFromCarrier, getCurrentHub, Hub, Scope, } from '@sentry/core';
export { BrowserBackend, BrowserOptions } from './backend';
export { BrowserClient, ReportDialogOptions } from './client';
export { defaultIntegrations, forceLoad, init, lastEventId, onLoad, showReportDialog } from './sdk';
export { SDK_NAME, SDK_VERSION } from './version';
import { Integrations as CoreIntegrations } from '@sentry/core';
import * as BrowserIntegrations from './integrations';
import * as Transports from './transports';
import { Options } from '@sentry/core/dist/interfaces';
import { Integration } from '@sentry/types';

declare const INTEGRATIONS: {
    GlobalHandlers: typeof BrowserIntegrations.GlobalHandlers;
    TryCatch: typeof BrowserIntegrations.TryCatch;
    Breadcrumbs: typeof BrowserIntegrations.Breadcrumbs;
    LinkedErrors: typeof BrowserIntegrations.LinkedErrors;
    ReportingObserver: typeof BrowserIntegrations.ReportingObserver;
    UserAgent: typeof BrowserIntegrations.UserAgent;
    Ember: typeof BrowserIntegrations.Ember;
    Vue: typeof BrowserIntegrations.Vue;
    getIntegrationsToSetup(options: Options): Integration[];
    setupIntegration(integration: Integration, options: Options): void;
    setupIntegrations<O extends Options>(options: O): CoreIntegrations.IntegrationIndex;
    Dedupe: typeof CoreIntegrations.Dedupe;
    FunctionToString: typeof CoreIntegrations.FunctionToString;
    SDKInformation: typeof CoreIntegrations.SDKInformation;
    InboundFilters: typeof CoreIntegrations.InboundFilters;
    Debug: typeof CoreIntegrations.Debug;
    RewriteFrames: typeof CoreIntegrations.RewriteFrames;
    installedIntegrations: string[];
};
export { INTEGRATIONS as Integrations, Transports };

[luboslav]

Same issue.

[HazAT]

Thanks for reporting this, this is very odd.
If I build everything locally my file exactly looks like your fixed file.

When I download the npm package I get the inline imports.

Investigating this now, thanks for reporting this.

[juanhenriquez]

Hey @HazAT, When do you plan to release this fix? 🙏🏻

[HazAT]

@juanhenriquez 4.2.2 is on it's way now, max 1h

[kevcjones-archived]

Nice one, purely professional courtesy how'd it happen? In case i run into it myself 🤗

[HazAT]

@kevcjones TBH I haven't checked exactly what was going on and why we had requires in the code there. The code diverged from already from master, I just made sure that we did not re-export the functions that weren't supposed to be exposed at first.