@flareapp/js 1.0.1 → 1.1.0-rc.1

package/src/Flare.ts

@@ -0,0 +1,208 @@
+import { Api } from './api';
+import { collectContext } from './context';
+import { CLIENT_VERSION, KEY, SOURCEMAP_VERSION } from './env';
+import { getSolutions } from './solutions';
+import { createStackTrace } from './stacktrace';
+import {
+    Config,
+    Context,
+    Glow,
+    MessageLevel,
+    Report,
+    SolutionProvider,
+    SolutionProviderExtraParameters,
+} from './types';
+import { assert, assertKey, assertSolutionProvider, now } from './util';
+
+export class Flare {
+    config: Config = {
+        key: KEY,
+        version: CLIENT_VERSION,
+        sourcemapVersion: SOURCEMAP_VERSION,
+        stage: '',
+        maxGlowsPerReport: 30,
+        reportingUrl: 'https://reporting.flareapp.io/api/reports',
+        reportBrowserExtensionErrors: false,
+        debug: false,
+        beforeEvaluate: (error) => error,
+        beforeSubmit: (report) => report,
+    };
+
+    glows: Glow[] = [];
+    context: Context = { context: {} };
+    solutionProviders: SolutionProvider[] = [];
+
+    constructor(public http: Api = new Api()) {}
+
+    light(key: string = KEY, debug: boolean = false): Flare {
+        this.config.key = key;
+        this.config.debug = debug;
+
+        return this;
+    }
+
+    configure(config: Partial<Config>): Flare {
+        this.config = { ...this.config, ...config };
+
+        return this;
+    }
+
+    test(): Promise<void> {
+        return this.report(new Error('The Flare client is set up correctly!'));
+    }
+
+    glow(name: string, level: MessageLevel = 'info', data: object | object[] = []): Flare {
+        const time = now();
+
+        this.glows.push({
+            name,
+            message_level: level,
+            meta_data: data,
+            time,
+            microtime: time,
+        });
+
+        if (this.glows.length > this.config.maxGlowsPerReport) {
+            this.glows = this.glows.slice(this.glows.length - this.config.maxGlowsPerReport);
+        }
+
+        return this;
+    }
+
+    clearGlows(): Flare {
+        this.glows = [];
+
+        return this;
+    }
+
+    addContext(name: string, value: any): Flare {
+        this.context.context[name] = value;
+
+        return this;
+    }
+
+    addContextGroup(groupName: string, value: object): Flare {
+        this.context[groupName] = value;
+
+        return this;
+    }
+
+    registerSolutionProvider(solutionProvider: SolutionProvider): Flare {
+        if (!assertSolutionProvider(solutionProvider, this.config.debug)) {
+            return this;
+        }
+
+        this.solutionProviders.push(solutionProvider);
+
+        return this;
+    }
+
+    async report(
+        error: Error,
+        context: Context = {},
+        extraSolutionParameters: SolutionProviderExtraParameters = {}
+    ): Promise<void> {
+        const errorToReport = await this.config.beforeEvaluate(error);
+
+        if (!errorToReport) {
+            return;
+        }
+
+        const report = await this.createReportFromError(error, context, extraSolutionParameters);
+
+        if (!report) {
+            return;
+        }
+
+        return this.sendReport(report);
+    }
+
+    async reportMessage(message: string, context: Context = {}, exceptionClass: string = 'Log'): Promise<void> {
+        const stackTrace = await createStackTrace(Error(), this.config.debug);
+
+        // The first item in the stacktrace is from this file, and irrelevant
+        stackTrace.shift();
+
+        this.sendReport({
+            notifier: `Flare JavaScript client v${CLIENT_VERSION}`,
+            exception_class: exceptionClass,
+            seen_at: now(),
+            message: message,
+            language: 'javascript',
+            glows: this.glows,
+            context: collectContext({ ...context, ...this.context }),
+            stacktrace: stackTrace,
+            sourcemap_version_id: this.config.sourcemapVersion,
+            solutions: [],
+            stage: this.config.stage,
+        });
+    }
+
+    createReportFromError(
+        error: Error,
+        context: Context = {},
+        extraSolutionParameters: SolutionProviderExtraParameters = {}
+    ): Promise<Report | false> {
+        if (!assert(error, 'No error provided.', this.config.debug)) {
+            return Promise.resolve(false);
+        }
+
+        const seenAt = now();
+
+        return Promise.all([
+            getSolutions(this.solutionProviders, error, extraSolutionParameters),
+            createStackTrace(error, this.config.debug),
+        ]).then((result) => {
+            const [solutions, stacktrace] = result;
+
+            assert(stacktrace.length, "Couldn't generate stacktrace of this error: " + error, this.config.debug);
+
+            return {
+                notifier: `Flare JavaScript client v${CLIENT_VERSION}`,
+                exception_class: error.constructor && error.constructor.name ? error.constructor.name : 'undefined',
+                seen_at: seenAt,
+                message: error.message,
+                language: 'javascript',
+                glows: this.glows,
+                context: collectContext({ ...context, ...this.context }),
+                stacktrace,
+                sourcemap_version_id: this.config.sourcemapVersion,
+                solutions,
+                stage: this.config.stage,
+            };
+        });
+    }
+
+    async sendReport(report: Report): Promise<void> {
+        if (!assertKey(this.config.key, this.config.debug)) {
+            return;
+        }
+
+        const reportToSubmit = await this.config.beforeSubmit(report);
+
+        if (!reportToSubmit) {
+            return;
+        }
+
+        return this.http.report(
+            reportToSubmit,
+            this.config.reportingUrl,
+            this.config.key,
+            this.config.reportBrowserExtensionErrors
+        );
+    }
+
+    // Deprecated, the following methods exist for backwards compatibility.
+
+    set beforeEvaluate(beforeEvaluate: Config['beforeEvaluate']) {
+        this.config.beforeEvaluate = beforeEvaluate ?? '';
+    }
+
+    set beforeSubmit(beforeSubmit: Config['beforeSubmit']) {
+        this.config.beforeSubmit = beforeSubmit ?? '';
+    }
+
+    set stage(stage: string | undefined) {
+        this.config.stage = stage ?? '';
+    }
+}

package/src/api/Api.ts

@@ -0,0 +1,27 @@
+import { Report } from '../types';
+import { flatJsonStringify } from '../util';
+
+export class Api {
+    report(report: Report, url: string, key: string, reportBrowserExtensionErrors: boolean): Promise<void> {
+        return fetch(url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-Api-Token': key,
+                'X-Requested-With': 'XMLHttpRequest',
+                'X-Report-Browser-Extension-Errors': JSON.stringify(reportBrowserExtensionErrors),
+            },
+            body: flatJsonStringify({
+                ...report,
+                key: key,
+            }),
+        }).then(
+            (response) => {
+                if (response.status !== 204) {
+                    console.error(`Received response with status ${response.status} from Flare`);
+                }
+            },
+            (error) => console.error(error)
+        );
+    }
+}

package/src/api/index.ts

@@ -0,0 +1 @@
+export * from './Api';

package/src/{browserClient/index.ts → browser/catchWindowErrors.ts}

@@ -1,8 +1,9 @@
-export default function catchWindowErrors() {
+export function catchWindowErrors() {
     if (typeof window === 'undefined') {
         return;
     }
 
+    // @ts-ignore
     const flare = window.flare;
 
     if (!window || !flare) {
@@ -27,8 +28,6 @@ export default function catchWindowErrors() {
             flare.report(error.reason);
         }
 
-        // TODO: Maybe also send errors without stacktrace for unhandled rejections without an Error as reason? (could be a string, …)
-
         if (typeof originalOnunhandledrejectionHandler === 'function') {
             // @ts-ignore
             originalOnunhandledrejectionHandler(error);

package/src/browser/index.ts

@@ -0,0 +1 @@
+export * from './catchWindowErrors';

package/src/context/collectContext.ts

@@ -0,0 +1,18 @@
+import { Context } from '../types';
+
+import cookie from './cookie';
+import request from './request';
+import requestData from './requestData';
+
+export function collectContext(additionalContext: object): Context {
+    if (typeof window === 'undefined') {
+        return additionalContext;
+    }
+
+    return {
+        ...cookie(),
+        ...request(),
+        ...requestData(),
+        ...additionalContext,
+    };
+}

package/src/context/cookie.ts

@@ -11,7 +11,7 @@ export default function cookie() {
 
                 return cookies;
             },
-            {} as { [key: string]: string },
+            {} as { [key: string]: string }
         ),
     };
 }

package/src/context/index.ts

@@ -1,17 +1 @@
-import cookie from './cookie';
-import request from './request';
-import requestData from './requestData';
-import { Flare } from '../types';
-
-export function collectContext(additionalContext: object): Flare.Context {
-    if (typeof window === 'undefined') {
-        return additionalContext;
-    }
-
-    return {
-        ...cookie(),
-        ...request(),
-        ...requestData(),
-        ...additionalContext,
-    };
-}
+export * from './collectContext';

package/src/env/index.ts

@@ -0,0 +1,12 @@
+declare const FLARE_JS_KEY: string | undefined;
+declare const FLARE_SOURCEMAP_VERSION: string | undefined;
+
+// Injected during build
+export const CLIENT_VERSION =
+    typeof process.env.FLARE_JS_CLIENT_VERSION === 'undefined' ? '?' : process.env.FLARE_JS_CLIENT_VERSION;
+
+// Injected by flare-vite-plugin-sourcemap-uploader (optional)
+export const KEY = typeof FLARE_JS_KEY === 'undefined' ? '' : FLARE_JS_KEY;
+
+// Injected by flare-vite-plugin-sourcemap-uploader (optional)
+export const SOURCEMAP_VERSION = typeof FLARE_SOURCEMAP_VERSION === 'undefined' ? '' : FLARE_SOURCEMAP_VERSION;

package/src/index.ts

@@ -1,11 +1,14 @@
-import FlareClient from './FlareClient';
-import catchWindowErrors from './browserClient';
-export { readLinesFromFile } from './stacktrace/fileReader';
+import { Flare } from './Flare';
+import { catchWindowErrors } from './browser';
 
-export const flare = new FlareClient();
+// Expose package singleton
+export const flare = new Flare();
 
 if (typeof window !== 'undefined' && window) {
+    // @ts-expect-error
     window.flare = flare;
+
+    catchWindowErrors();
 }
 
-catchWindowErrors();
+export { Flare } from './Flare';

package/src/solutions/getSolutions.ts

@@ -0,0 +1,35 @@
+import { Solution, SolutionProvider, SolutionProviderExtraParameters } from '../types';
+import { flattenOnce } from '../util';
+
+export function getSolutions(
+    solutionProviders: Array<SolutionProvider>,
+    error: Error,
+    extraSolutionParameters: SolutionProviderExtraParameters = {}
+): Promise<Array<Solution>> {
+    return new Promise((resolve) => {
+        const canSolves = solutionProviders.reduce(
+            (canSolves, provider) => {
+                canSolves.push(Promise.resolve(provider.canSolve(error, extraSolutionParameters)));
+
+                return canSolves;
+            },
+            [] as Array<Promise<boolean>>
+        );
+
+        Promise.all(canSolves).then((resolvedCanSolves) => {
+            const solutionPromises: Array<Promise<Array<Solution>>> = [];
+
+            resolvedCanSolves.forEach((canSolve, i) => {
+                if (canSolve) {
+                    solutionPromises.push(
+                        Promise.resolve(solutionProviders[i].getSolutions(error, extraSolutionParameters))
+                    );
+                }
+            });
+
+            Promise.all(solutionPromises).then((solutions) => {
+                resolve(flattenOnce(solutions));
+            });
+        });
+    });
+}

package/src/solutions/index.ts

@@ -1,44 +1 @@
-import { flattenOnce } from '../util';
-import { Flare } from '../types';
-
-export default function getSolutions(
-    solutionProviders: Array<Flare.SolutionProvider>,
-    error: Error,
-    extraSolutionParameters: Flare.SolutionProviderExtraParameters = {},
-): Promise<Array<Flare.Solution>> {
-    return new Promise((resolve) => {
-        const canSolves = solutionProviders.reduce(
-            (canSolves, provider) => {
-                canSolves.push(
-                    Promise.resolve(
-                        provider.canSolve(error, extraSolutionParameters),
-                    ),
-                );
-
-                return canSolves;
-            },
-            [] as Array<Promise<boolean>>,
-        );
-
-        Promise.all(canSolves).then((resolvedCanSolves) => {
-            const solutionPromises: Array<Promise<Array<Flare.Solution>>> = [];
-
-            resolvedCanSolves.forEach((canSolve, i) => {
-                if (canSolve) {
-                    solutionPromises.push(
-                        Promise.resolve(
-                            solutionProviders[i].getSolutions(
-                                error,
-                                extraSolutionParameters,
-                            ),
-                        ),
-                    );
-                }
-            });
-
-            Promise.all(solutionPromises).then((solutions) => {
-                resolve(flattenOnce(solutions));
-            });
-        });
-    });
-}
+export * from './getSolutions';

package/src/stacktrace/createStackTrace.ts

@@ -0,0 +1,59 @@
+import ErrorStackParser from 'error-stack-parser';
+
+import { StackFrame } from '../types';
+import { assert } from '../util';
+
+import { getCodeSnippet } from './fileReader';
+
+export function createStackTrace(error: Error, debug: boolean): Promise<Array<StackFrame>> {
+    return new Promise((resolve) => {
+        if (!hasStack(error)) {
+            assert(false, "Couldn't generate stacktrace of below error:", debug);
+
+            if (debug) {
+                console.error(error);
+            }
+
+            return resolve([
+                {
+                    line_number: 0,
+                    column_number: 0,
+                    method: 'unknown',
+                    file: 'unknown',
+                    code_snippet: {
+                        0: 'Could not read from file: stacktrace missing',
+                    },
+                    trimmed_column_number: null,
+                    class: 'unknown',
+                },
+            ]);
+        }
+
+        Promise.all(
+            ErrorStackParser.parse(error).map((frame) => {
+                return new Promise<StackFrame>((resolve) => {
+                    getCodeSnippet(frame.fileName, frame.lineNumber, frame.columnNumber).then((snippet) => {
+                        resolve({
+                            line_number: frame.lineNumber || 1,
+                            column_number: frame.columnNumber || 1,
+                            method: frame.functionName || 'Anonymous or unknown function',
+                            file: frame.fileName || 'Unknown file',
+                            code_snippet: snippet.codeSnippet,
+                            trimmed_column_number: snippet.trimmedColumnNumber,
+                            class: '',
+                        });
+                    });
+                });
+            })
+        ).then(resolve);
+    });
+}
+
+function hasStack(err: any): boolean {
+    return (
+        !!err &&
+        (!!err.stack || !!err.stacktrace || !!err['opera#sourceloc']) &&
+        typeof (err.stack || err.stacktrace || err['opera#sourceloc']) === 'string' &&
+        err.stack !== `${err.name}: ${err.message}`
+    );
+}

package/src/stacktrace/fileReader.ts

@@ -9,11 +9,7 @@ type ReaderResponse = {
     trimmedColumnNumber: number | null;
 };
 
-export function getCodeSnippet(
-    url?: string,
-    lineNumber?: number,
-    columnNumber?: number,
-): Promise<ReaderResponse> {
+export function getCodeSnippet(url?: string, lineNumber?: number, columnNumber?: number): Promise<ReaderResponse> {
     return new Promise((resolve) => {
         if (!url || !lineNumber) {
             return resolve({
@@ -34,9 +30,7 @@ export function getCodeSnippet(
                 });
             }
 
-            return resolve(
-                readLinesFromFile(fileText, lineNumber, columnNumber),
-            );
+            return resolve(readLinesFromFile(fileText, lineNumber, columnNumber));
         });
     });
 }
@@ -62,7 +56,7 @@ export function readLinesFromFile(
     lineNumber: number,
     columnNumber?: number,
     maxSnippetLineLength = 1000,
-    maxSnippetLines = 40,
+    maxSnippetLines = 40
 ): ReaderResponse {
     const codeSnippet: CodeSnippet = {};
     let trimmedColumnNumber = null;
@@ -76,28 +70,20 @@ export function readLinesFromFile(
             const displayLine = currentLineIndex + 1; // the linenumber in a stacktrace is not zero-based like an array
 
             if (lines[currentLineIndex].length > maxSnippetLineLength) {
-                if (
-                    columnNumber &&
-                    columnNumber + maxSnippetLineLength / 2 >
-                        maxSnippetLineLength
-                ) {
+                if (columnNumber && columnNumber + maxSnippetLineLength / 2 > maxSnippetLineLength) {
                     codeSnippet[displayLine] = lines[currentLineIndex].substr(
                         columnNumber - Math.round(maxSnippetLineLength / 2),
-                        maxSnippetLineLength,
+                        maxSnippetLineLength
                     );
 
                     if (displayLine === lineNumber) {
-                        trimmedColumnNumber = Math.round(
-                            maxSnippetLineLength / 2,
-                        );
+                        trimmedColumnNumber = Math.round(maxSnippetLineLength / 2);
                     }
 
                     continue;
                 }
 
-                codeSnippet[displayLine] =
-                    lines[currentLineIndex].substr(0, maxSnippetLineLength) +
-                    '…';
+                codeSnippet[displayLine] = lines[currentLineIndex].substr(0, maxSnippetLineLength) + '…';
 
                 continue;
             }

package/src/stacktrace/index.ts

@@ -1,71 +1 @@
-import ErrorStackParser from 'error-stack-parser';
-import { getCodeSnippet } from './fileReader';
-import { Flare } from '../types';
-import { flare } from '..';
-import { assert } from '../util';
-
-export function createStackTrace(
-    error: Error,
-): Promise<Array<Flare.StackFrame>> {
-    return new Promise((resolve) => {
-        if (!hasStack(error)) {
-            assert(
-                false,
-                "Couldn't generate stacktrace of below error:",
-                flare.debug,
-            );
-
-            if (flare.debug) {
-                console.error(error);
-            }
-
-            return resolve([
-                {
-                    line_number: 0,
-                    column_number: 0,
-                    method: 'unknown',
-                    file: 'unknown',
-                    code_snippet: {
-                        0: 'Could not read from file: stacktrace missing',
-                    },
-                    trimmed_column_number: null,
-                    class: 'unknown',
-                },
-            ]);
-        }
-
-        Promise.all(
-            ErrorStackParser.parse(error).map((frame) => {
-                return new Promise<Flare.StackFrame>((resolve) => {
-                    getCodeSnippet(
-                        frame.fileName,
-                        frame.lineNumber,
-                        frame.columnNumber,
-                    ).then((snippet) => {
-                        resolve({
-                            line_number: frame.lineNumber || 1,
-                            column_number: frame.columnNumber || 1,
-                            method:
-                                frame.functionName ||
-                                'Anonymous or unknown function',
-                            file: frame.fileName || 'Unknown file',
-                            code_snippet: snippet.codeSnippet,
-                            trimmed_column_number: snippet.trimmedColumnNumber,
-                            class: '',
-                        });
-                    });
-                });
-            }),
-        ).then(resolve);
-    });
-}
-
-function hasStack(err: any): boolean {
-    return (
-        !!err &&
-        (!!err.stack || !!err.stacktrace || !!err['opera#sourceloc']) &&
-        typeof (err.stack || err.stacktrace || err['opera#sourceloc']) ===
-            'string' &&
-        err.stack !== `${err.name}: ${err.message}`
-    );
-}
+export * from './createStackTrace';