{"id":25836014,"url":"https://github.com/bugsplat-git/bugsplat-ng","last_synced_at":"2025-03-01T01:38:52.675Z","repository":{"id":42702829,"uuid":"102881198","full_name":"BugSplat-Git/bugsplat-ng","owner":"BugSplat-Git","description":"🐛💥🕵️ BugSplat error reporting for Angular","archived":false,"fork":false,"pushed_at":"2024-07-05T16:11:35.000Z","size":7474,"stargazers_count":6,"open_issues_count":12,"forks_count":2,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-10-29T11:12:15.886Z","etag":null,"topics":["angular","apm","bugsplat","error","error-reporting","reporting","sourcemap","typescript"],"latest_commit_sha":null,"homepage":"https://bugsplat-git.github.io/my-angular-crasher/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BugSplat-Git.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-09-08T16:20:05.000Z","updated_at":"2024-07-05T16:11:36.000Z","dependencies_parsed_at":"2023-01-27T23:31:42.449Z","dependency_job_id":"9798f0c5-2849-424f-bfcc-81ab219a4296","html_url":"https://github.com/BugSplat-Git/bugsplat-ng","commit_stats":{"total_commits":159,"total_committers":6,"mean_commits":26.5,"dds":0.2264150943396226,"last_synced_commit":"f1d3f688e3a3e9d61c8dee9203c671301c9ea5c5"},"previous_names":["bugsplat-git/bugsplat-ng4"],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BugSplat-Git%2Fbugsplat-ng","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BugSplat-Git%2Fbugsplat-ng/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BugSplat-Git%2Fbugsplat-ng/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BugSplat-Git%2Fbugsplat-ng/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BugSplat-Git","download_url":"https://codeload.github.com/BugSplat-Git/bugsplat-ng/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241304300,"owners_count":19941100,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","apm","bugsplat","error","error-reporting","reporting","sourcemap","typescript"],"created_at":"2025-03-01T01:38:52.026Z","updated_at":"2025-03-01T01:38:52.662Z","avatar_url":"https://github.com/BugSplat-Git.png","language":"TypeScript","readme":"[![bugsplat-github-banner-basic-outline](https://user-images.githubusercontent.com/20464226/149019306-3186103c-5315-4dad-a499-4fd1df408475.png)](https://bugsplat.com)\n\u003cbr/\u003e\n# \u003cdiv align=\"center\"\u003eBugSplat\u003c/div\u003e \n### **\u003cdiv align=\"center\"\u003eCrash and error reporting built for busy developers.\u003c/div\u003e**\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://twitter.com/BugSplatCo\"\u003e\n        \u003cimg alt=\"Follow @bugsplatco on Twitter\" src=\"https://img.shields.io/twitter/follow/bugsplatco?label=Follow%20BugSplat\u0026style=social\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://discord.gg/K4KjjRV5ve\"\u003e\n        \u003cimg alt=\"Join BugSplat on Discord\" src=\"https://img.shields.io/discord/664965194799251487?label=Join%20Discord\u0026logo=Discord\u0026style=social\"\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\n## 👋 Introduction\nBugSplat supports the collection of errors in Angular applications. The bugsplat-ng npm package implements Angular’s [ErrorHandler](https://angular.io/api/core/ErrorHandler) interface in order to post errors to BugSplat, where they can be tracked and managed. Adding BugSplat to your Angular application is extremely easy. Before getting started, please complete the following tasks:\n\n* [Sign up](https://app.bugsplat.com/v2/sign-up) for BugSplat\n* Complete the [welcome](https://app.bugsplat.com/v2/welcome) workflow and take note of your BugSplat database\n* Check out the [live demo](https://www.bugsplat.com/platforms/angular/my-angular-crasher) of BugSplat’s Angular error reporting\n\n## 🧑‍🏫 Sample\n\nThis repository includes a sample `my-angular-crasher` application that has been pre-configured with BugSplat. Get started by cloning the repository and navigating to the root of the project:\n\n```sh\ngit clone https://github.com/BugSplat-Git/bugsplat-ng\ncd bugsplat-ng\n```\n\nBefore you can run the app, you'll need to create an OAuth2 Client ID \u0026 Client Secret pair that corresponds to your BugSplat database as shown [here](https://docs.bugsplat.com/introduction/development/web-services/oauth2). Please also take note of the BugSplat `database` that this OAuth2 Client ID \u0026 Client Secret pair corresponds to.\n\nFirst, add a `database` property in your package.json that corresponds to your BugSplat database:\n\n```json\n{\n  \"database\": \"your_bugsplat_database\"\n}\n```\n\nNext, create a [dotenv](https://github.com/motdotla/dotenv) file with the name `.env` at the root of the repository and populate it with the correct values substituted for `your-client-id` and `your-client-secret`:\n\n```\nSYMBOL_UPLOAD_CLIENT_ID=your-client-id\nSYMBOL_UPLOAD_CLIENT_SECRET=your-client-secret\n```\n\nTo start the sample app, run `npm start` in the root of the repository.\n\n```sh\nnpm start\n```\n\nThe `npm start` command will build the sample application and upload [source maps](https://docs.bugsplat.com/introduction/development/working-with-symbol-files/source-maps) to BugSplat so that the JavaScript call stack can be mapped back to TypeScript. Once the build has completed, the source maps will be uploaded and `http-server` will serve the app.\n\nNavigate to the url displayed in the console by `http-server` (usually [localhost:8080](http://127.0.0.1:8080)). Click any button in the sample app to generate an error report. A link to the error report should display in the app shortly after clicking a button. Click the link to the error report and when prompted to log into BugSplat.\n\nIf everything worked correctly you should see information about your error as well as a TypeScript stack trace.\n\n## ⚙️ Integration\n\nTo collect errors and crashes in your Angular application, run the following command in the terminal or cmd at the root of your project to install bugsplat-ng:\n\n```shell\nnpm i bugsplat-ng --save\n```\n\nAdd a `database` property in your package.json that corresponds to your BugSplat database:\n\n```json\n{\n  \"database\": \"your_bugsplat_database\"\n}\n```\n\nAdd values for your BugSplat `database`, `application`, and `version` to your application's environment files.\n\n[environment.prod.ts](https://github.com/BugSplat-Git/bugsplat-ng/blob/8c12d9b3544f2b618491467e6c40d84b6139eb2a/src/environments/environment.prod.ts#L1)\n```typescript\nconst packageJson = require('../../package.json');\nexport const environment = {\n  production: true,\n  bugsplat: {\n    database: packageJson.database,\n    application: packageJson.name,\n    version: packageJson.version\n  }\n};\n```\n\nAdd an import for `BugSplatModule` to your `AppModule`:\n\n[app.module.ts](hhttps://github.com/BugSplat-Git/bugsplat-ng/blob/8c12d9b3544f2b618491467e6c40d84b6139eb2a/src/app/app.module.ts#L4)\n```typescript\nimport { BugSplatModule } from 'bugsplat-ng';\n```\n\nAdd a call `BugSplatModule.initializeApp` in your AppModule's imports array, passing it your database, application, and version:\n\n[app.module.ts](https://github.com/BugSplat-Git/bugsplat-ng/blob/8c12d9b3544f2b618491467e6c40d84b6139eb2a/src/app/app.module.ts#L31)\n```typescript\n...\n@NgModule({\n  imports: [\n    BugSplatModule.initializeApp(environment.bugsplat)\n  ],\n  ...\n})\n```\n\nThrow a new error in your application to test the bugsplat-ng integration:\n\n[app.component.ts](https://github.com/BugSplat-Git/bugsplat-ng/blob/8c12d9b3544f2b618491467e6c40d84b6139eb2a/src/app/app.component.ts#L37)\n```typescript\nthrow new Error(\"foobar!\");\n```\n\nNavigate to the [Crashes](https://app.bugsplat.com/v2/crashes) page in BugSplat, and you should see a new crash report for the application you just configured. Click the link in the ID column to see details about your crash on the Crash page:\n\n\u003cimg width=\"1728\" alt=\"Crashes page\" src=\"https://github.com/BugSplat-Git/bugsplat-ng/assets/2646053/24a2df50-e9c0-4d36-b9f5-ce9a7b47b526\"\u003e\n\n\u003cimg width=\"1728\" alt=\"Crash page\" src=\"https://github.com/BugSplat-Git/bugsplat-ng/assets/2646053/e23000df-edd1-41f4-b463-c1ce6475d9ad\"\u003e\n\n## 🧰 Extended Integration\nYou can post additional information by creating a service that implements ErrorHandler. In the `handlerError` method, make a call to `BugSplat.post` passing it the error and an optional options object:\n\n[my-angular-error-handler.ts](https://github.com/BugSplat-Git/bugsplat-ng/blob/master/src/app/my-angular-error-handler.ts)\n```typescript\nimport { ErrorHandler, Injectable } from '@angular/core';\nimport { BugSplat } from 'bugsplat-ng';\n\n@Injectable()\nexport class MyAngularErrorHandler implements ErrorHandler {\n\n    constructor(public bugsplat: BugSplat) { }\n    \n    async handleError(error: Error): Promise\u003cvoid\u003e {\n        return this.bugsplat.post(error, {\n            description: 'New description from MyAngularErrorHandler.ts'\n        });\n    }\n}\n```\n\nBugSplat provides the following properties and methods that allow you to customize its functionality:\n\n[bugsplat.ts](https://github.com/BugSplat-Git/bugsplat-ng/blob/master/projects/bugsplat-ng/src/lib/bugsplat.ts)\n```typescript\nBugSplat.description: string; // Additional info about your crash that gets reset after every post\nBugSplat.email: string; // The email of your user \nBugSplat.key: string; // A unique identifier for your application\nBugSplat.user: string; // The name or id of your user\nBugSplat.files: Array\u003cfile\u003e; // A list of files to be uploaded at post time\nBugSplat.getObservable(): Observable\u003cBugSplatPostEvent\u003e; // Observable that emits BugSplat crash post events results in your components.\nasync BugSplat.post(error): Promise\u003cvoid\u003e; // Post an Error object to BugSplat manually from within a try/catch\n```\n\nIn your AppModule's NgModule definition, add a provider for your new ErrorHandler:\n\n[app.module.ts](https://github.com/BugSplat-Git/bugsplat-ng/blob/master/src/app/app.module.ts)\n```typescript\nimport { ErrorHandler, NgModule } from '@angular/core';\n\n@NgModule({\n  providers: [\n    {\n      provide: ErrorHandler,\n      useClass: MyAngularErrorHandler\n    }\n  ]\n  ...\n})\n```\n\nYou can also configure BugSplat's logging preferences and provide your own logging implementation. Create a provider for BugSplatLogger with useValue set to a new instance of BugSplatLogger. Pass one of the BugSplatLogLevel options as the first parameter to BugSplatLogger. You can provide an instance of your own custom logger as the second parameter granted it has an error, warn, info, and log methods. If no custom logger is provided, the console will be used:\n\n[app.module.ts](https://github.com/BugSplat-Git/bugsplat-ng/blob/master/src/app/app.module.ts)\n```typescript\nimport { ErrorHandler, NgModule } from '@angular/core';\nimport { BugSplatLogger, BugSplatLogLevel, BugSplatModule } from 'bugsplat-ng';\n\n@NgModule({\n  providers: [\n    {\n      provide: ErrorHandler,\n      useClass: BugSplatErrorHandler\n    },\n    {\n      provide: BugSplatLogger,\n      useValue: new BugSplatLogger(BugSplatLogLevel.Log)\n    }\n  ],\n  ...\n})\n```\n\n## 🗺 Source Maps\nBugSplat supports unwinding uglified and minified JavaScript stack traces via source maps. To upload source maps to BugSplat during your build, install [@bugsplat/symbol-upload](https://www.npmjs.com/package/@bugsplat/symbol-upload).\n\n```bash\nnpm i -D @bugsplat/symbol-upload\n```\n\nConfigure your `angular.json` file to output source maps. We suggest enabling source maps for both your application code and any vendor chunks generated by Angular.\n\n```js\n{\n  \"projects\": {\n    \"main\": {\n      \"architect\": {\n        \"build\": {\n          \"options\": {\n            \"sourceMap\": {\n              \"scripts\": true,\n              \"styles\": true,\n              \"vendor\": true\n            },\n          },\n        }\n      }\n    }\n  }\n}\n```\n\nAdd `SYMBOL_UPLOAD_CLIENT_ID` and `SYMBOL_UPLOAD_CLIENT_SECRET` environment variables for the BugSplat user that you will use to upload symbols. You can create these values as system environment variables or use [dotenv](https://www.npmjs.com/package/dotenv).\n\n```bash\nSYMBOL_UPLOAD_CLIENT_ID=your-client-id\nSYMBOL_UPLOAD_PASSWORD=your-client-secret\n```\n\nAdd a script to `package.json` that reads a `.env` file and calls `symbol-upload` to upload source maps after your production build. Replace `my-angular-crasher` with the name of your Angular project.\n\n```json\n{\n  \"scripts\": {\n    \"postbuild\": \"node -r dotenv/config ./node_modules/@bugsplat/symbol-upload/dist/bin/index.js -d ./dist/my-angular-crasher/browser\"\n  }\n}\n\nFor best results, please upload source maps for every released version of your application.\n\n## 🧑‍💻 Contributing\n\nBugSplat loves open-source software! If you have suggestions on how we can improve this integration, please reach out to support@bugsplat.com, create an [issue](https://github.com/BugSplat-Git/bugsplat-ng/issues) in our [GitHub repo](https://github.com/BugSplat-Git/bugsplat-ng) or send us a [pull request](https://github.com/BugSplat-Git/bugsplat-ng/pulls). \n\nWith ❤️,\n\nThe BugSplat Team\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbugsplat-git%2Fbugsplat-ng","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbugsplat-git%2Fbugsplat-ng","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbugsplat-git%2Fbugsplat-ng/lists"}