Adding React Backtrace Client, ErrorBoundary, and tests

packages/browser/src/index.ts

@@ -2,3 +2,5 @@ export { BacktraceReport } from '@backtrace/sdk-core';
 export * from '@backtrace/sdk-core/lib/model/attachment';
 export * from './BacktraceClient';
 export * from './BacktraceConfiguration';
+export * from './builder/BacktraceClientBuilder';
+export * from './agentDefinition';

packages/react/jest.config.js

@@ -0,0 +1,5 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+    preset: 'ts-jest',
+    testEnvironment: 'jsdom',
+};

packages/react/package.json

@@ -8,7 +8,8 @@
         "clean": "rimraf \"lib\"",
         "format": "prettier --write '**/*.ts'",
         "lint": "eslint . --ext .ts",
-        "watch": "webpack -w"
+        "watch": "webpack -w",
+        "test": "NODE_ENV=test jest"
     },
     "repository": {
         "type": "git",
@@ -31,6 +32,14 @@
     },
     "homepage": "https://github.com/backtrace-labs/backtrace-javascript#readme",
     "devDependencies": {
+        "@testing-library/react": "^14.0.0",
+        "@types/react": "^18.2.14",
+        "jest": "^29.5.0",
+        "jest-environment-jsdom": "^29.5.0",
+        "ts-jest": "^29.1.1",
         "typescript": "^5.0.4"
+    },
+    "peerDependencies": {
+        "react": ">=16.14.0"
     }
 }

packages/react/src/BacktraceClient.ts

@@ -0,0 +1,37 @@
+import {
+    BacktraceAttributeProvider,
+    BacktraceCoreClient,
+    BacktraceRequestHandler,
+    BacktraceStackTraceConverter,
+} from '@backtrace/sdk-core';
+import { AGENT } from '@backtrace/browser';
+import { BacktraceConfiguration } from '@backtrace/browser';
+import { BacktraceClientBuilder } from '@backtrace/browser';
+
+export class BacktraceClient extends BacktraceCoreClient {
+    private static _instance?: BacktraceClient;
+    constructor(
+        options: BacktraceConfiguration,
+        handler: BacktraceRequestHandler,
+        attributeProviders: BacktraceAttributeProvider[],
+        stackTraceConverter: BacktraceStackTraceConverter,
+    ) {
+        super(options, AGENT, handler, attributeProviders, stackTraceConverter);
+    }
+
+    public static builder(options: BacktraceConfiguration): BacktraceClientBuilder {
+        return new BacktraceClientBuilder(options);
+    }
+
+    public static initialize(options: BacktraceConfiguration): BacktraceClient {
+        this._instance = this.builder(options).build();
+        return this._instance;
+    }
+
+    public static get instance(): BacktraceClient {
+        if (!this._instance) {
+            throw new Error('BacktraceClient is uninitialized. Call "BacktraceClient.initialize" function first.');
+        }
+        return this._instance;
+    }
+}

packages/react/src/ErrorBoundary.tsx

@@ -0,0 +1,52 @@
+import { Component, ErrorInfo, ReactElement, ReactNode, isValidElement } from 'react';
+import { BacktraceClient } from './BacktraceClient';
+
+type RenderFallback = () => ReactElement;
+
+export interface Props {
+    children: ReactNode;
+    fallback?: ReactElement | RenderFallback;
+}
+
+export interface State {
+    hasError: boolean;
+    error?: Error;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+    private _client: BacktraceClient;
+    constructor(props: Props) {
+        super(props);
+        this.state = {
+            hasError: false,
+            error: undefined,
+        };
+        // grabbing here so it will fail fast if BacktraceClient is uninitialized
+        this._client = BacktraceClient.instance;
+    }
+
+    static getDerivedStateFromError(error: Error) {
+        return { hasError: true, error };
+    }
+
+    componentDidCatch(error: Error, info: ErrorInfo) {
+        this._client.send(error);
+    }
+
+    render() {
+        const { fallback, children } = this.props;
+
+        if (!this.state.hasError) {
+            return children;
+        }
+
+        const fallbackComponent = typeof fallback === 'function' ? fallback() : fallback;
+
+        if (fallbackComponent && isValidElement(fallbackComponent)) {
+            return fallbackComponent;
+        }
+
+        // no or invalid fallback
+        return null;
+    }
+}

packages/react/src/index.ts

@@ -1 +1,3 @@
 export * from '@backtrace/browser';
+export * from './ErrorBoundary';
+export { BacktraceClient } from './BacktraceClient';

packages/react/tests/errorBoundaryTests.spec.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ErrorBoundary } from '../src/ErrorBoundary';
+import { BacktraceClient } from '../src/BacktraceClient';
+
+describe('Error Boundary', () => {
+    const childrenText = 'I am the children';
+    const fallbackText = 'This is a fallback';
+    const errorText = 'Rendering error!';
+
+    function ValidComponent() {
+        return <p>{childrenText}</p>;
+    }
+
+    function ErrorComponent() {
+        throw new Error(errorText);
+        return <p>{childrenText}</p>;
+    }
+
+    function Fallback() {
+        return <p>{fallbackText}</p>;
+    }
+
+    const fallbackFunction = () => <Fallback />;
+
+    describe('With BacktraeClient uninitialized', () => {
+        it('Should throw an error when BacktraceClient is uninitialized and an ErrorBoundary is used', () => {
+            expect(() =>
+                render(<ErrorBoundary fallback={<Fallback />}>{<ErrorComponent />}</ErrorBoundary>),
+            ).toThrowError();
+        });
+    });
+
+    describe('With BacktraceClient initialized', () => {
+        let client: BacktraceClient;
+        beforeEach(() => {
+            client = BacktraceClient.initialize({
+                url: `https://submit.backtrace.io/universe/token/json`,
+                name: 'test',
+                version: '1.0.0',
+            });
+        });
+
+        it('Should not throw an error when BacktraceClient is initialized and an ErrorBoundary is used', () => {
+            expect(() =>
+                render(<ErrorBoundary fallback={Fallback}>{<ValidComponent />}</ErrorBoundary>),
+            ).not.toThrowError();
+        });
+
+        it('Should render children', () => {
+            render(<ErrorBoundary fallback={Fallback}>{<ValidComponent />}</ErrorBoundary>);
+            expect(screen.getByText(childrenText));
+        });
+
+        it('Should render fallback function on rendering error', () => {
+            render(<ErrorBoundary fallback={fallbackFunction}>{<ErrorComponent />}</ErrorBoundary>);
+            expect(screen.getByText(fallbackText));
+        });
+
+        it('Should render fallback component on rendering error', () => {
+            render(<ErrorBoundary fallback={<Fallback />}>{<ErrorComponent />}</ErrorBoundary>);
+            expect(screen.getByText(fallbackText));
+        });
+
+        it('Should render nothing if no fallback is passed in and rendering error', () => {
+            const { container } = render(
+                <ErrorBoundary>
+                    <ErrorComponent />
+                </ErrorBoundary>,
+            );
+            expect(container.firstChild).toBeNull();
+        });
+
+        it('Should send to Backtrace on rendering error', () => {
+            const clientSpy = jest.spyOn(client, 'send');
+            render(<ErrorBoundary fallback={<Fallback />}>{<ErrorComponent />}</ErrorBoundary>);
+            expect(clientSpy).toHaveBeenCalled();
+        });
+
+        it('Should not send to Backtrace when no rendering error occurs', () => {
+            const clientSpy = jest.spyOn(client, 'send');
+            render(<ErrorBoundary fallback={<Fallback />}>{<ValidComponent />}</ErrorBoundary>);
+            expect(clientSpy).not.toHaveBeenCalled();
+        });
+    });
+});

packages/react/tsconfig.json

@@ -2,7 +2,8 @@
     "extends": "../../tsconfig.base.json",
     "compilerOptions": {
         "rootDir": "./src",
-        "outDir": "./lib"
+        "outDir": "./lib",
+        "jsx": "react"
     },
     "exclude": ["node_modules", "tests", "lib"],
     "references": [