139 show copyable and pastable error message to user when they encounter an issue

package.json

@@ -33,7 +33,7 @@
         "@angular/cli": "^14.2.5",
         "@angular/compiler-cli": "^14.2.5",
         "@angular/language-service": "^14.2.5",
-        "@sentry/angular-ivy": "^7.48.0",
+        "@sentry/angular": "^8.31.0",
         "@sentry/cli": "^2.17.5",
         "@types/file-saver": "^2.0.1",
         "@types/jest": "^28.1.8",

src/app/CustomErrorHandler.ts

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { SentryErrorHandler } from '@sentry/angular';
+import { environment } from 'src/environments/environment';
+import { TaskManagerService } from './services/task-manager.service';
+import { UserStateService } from './services/user-state-service';
+import { IErrorNavigationState } from './pages/participant/error-page/error-page.component';
+
+@Injectable()
+export default class CustomErrorHandler extends SentryErrorHandler {
+    constructor(
+        private _router: Router,
+        private taskManager: TaskManagerService,
+        private userStateService: UserStateService
+    ) {
+        super();
+    }
+
+    handleError(error: string | Error): void {
+        this._router.navigate(['/task-error'], {
+            state: {
+                taskIndex: this.taskManager?.currentStudyTask?.taskOrder,
+                studyId: this.taskManager?.currentStudyTask?.studyId,
+                stackTrace: error instanceof Error ? error.stack : error,
+                userId: this.userStateService.currentlyLoggedInUserId,
+            } as IErrorNavigationState,
+        });
+        if (environment.production) {
+            super.handleError(error);
+        }
+    }
+}

src/app/app.module.ts

@@ -1,34 +1,32 @@
+import { HttpClient, HttpClientModule, HttpClientXsrfModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { ErrorHandler, NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule, ErrorHandler, APP_INITIALIZER } from '@angular/core';
-import * as Sentry from '@sentry/angular-ivy';
-import { AppRoutingModule } from './routing/app-routing.module';
-import { AppComponent } from './app.component';
-import { LoginComponent } from './pages/landing-page/login/login.component';
-import { Router } from '@angular/router';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { AppComponent } from './app.component';
 import { MaterialModule } from './modules/material/material.module';
-import { HttpClient, HttpClientModule, HttpClientXsrfModule, HTTP_INTERCEPTORS } from '@angular/common/http';
-import { CrowdSourceLoginComponent } from './pages/landing-page/crowdsource-login/crowdsource-login.component';
-import { ConfirmationComponent } from './services/confirmation/confirmation.component';
-import { LoaderComponent } from './services/loader/loader.component';
 import { CreateUserDialogComponent } from './pages/admin/admin-dashboard/manage-users/create-user-dialog/create-user-dialog.component';
+import { AdminModule } from './pages/admin/admin.module';
+import { CrowdSourceLoginComponent } from './pages/landing-page/crowdsource-login/crowdsource-login.component';
 import { LandingPageComponent } from './pages/landing-page/landing-page.component';
+import { LoginComponent } from './pages/landing-page/login/login.component';
 import { RegisterComponent } from './pages/landing-page/register/register.component';
-import { AdminModule } from './pages/admin/admin.module';
 import { ParticipantModule } from './pages/participant/participant.module';
 import { TaskModule } from './pages/tasks/task.module';
-// import { ErrorInterceptor } from './interceptors/error.interceptor';
-import { SendResetPasswordComponent } from './pages/landing-page/forgot-password/send-reset-password/send-reset-password.component';
+import { AppRoutingModule } from './routing/app-routing.module';
+import { ConfirmationComponent } from './services/confirmation/confirmation.component';
+import { LoaderComponent } from './services/loader/loader.component';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { HttpCsrfInterceptor } from './interceptors/csrf.interceptor';
 import { ResetPasswordLoginComponent } from './pages/landing-page/forgot-password/change-password-page/reset-password-login.component';
+import { SendResetPasswordComponent } from './pages/landing-page/forgot-password/send-reset-password/send-reset-password.component';
+import { NotFoundComponent } from './pages/landing-page/not-found/not-found.component';
 import { StudyBackgroundComponent } from './pages/landing-page/study-background/study-background.component';
+import { OrganizationMemberModule } from './pages/organization-member/organization-member.module';
 import { SharedModule } from './pages/shared/shared.module';
-import { NotFoundComponent } from './pages/landing-page/not-found/not-found.component';
-import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { SnackbarComponent } from './services/snackbar/snackbar.component';
-import { OrganizationMemberModule } from './pages/organization-member/organization-member.module';
-import { HttpCsrfInterceptor } from './interceptors/csrf.interceptor';
+import CustomErrorHandler from './CustomErrorHandler';
 
 export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
     return new TranslateHttpLoader(http, '../assets/translate/', '.json');
@@ -94,20 +92,18 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
         },
         {
             provide: ErrorHandler,
-            useValue: Sentry.createErrorHandler({
-                showDialog: true,
-            }),
-        },
-        {
-            provide: Sentry.TraceService,
-            deps: [Router],
-        },
-        {
-            provide: APP_INITIALIZER,
-            useFactory: () => () => {},
-            deps: [Sentry.TraceService],
-            multi: true,
+            useClass: CustomErrorHandler,
         },
+        // {
+        //     provide: Sentry.TraceService,
+        //     deps: [Router],
+        // },
+        // {
+        //     provide: APP_INITIALIZER,
+        //     useFactory: () => () => {},
+        //     deps: [Sentry.TraceService],
+        //     multi: true,
+        // },
     ],
     bootstrap: [AppComponent],
 })

src/app/pages/participant/error-page/error-page.component.html

@@ -0,0 +1,52 @@
+<div style="width: 100%; min-height: 100vh; padding: 4rem 0">
+    <div class="flex-column-center">
+        <div style="width: 50%">
+            <h6 style="font-size: 2rem; color: salmon" class="mb-4">We encountered an error.</h6>
+            <div style="font-size: 1.5rem; line-height: normal" class="mb-4">
+                While running the task, we ran into an error. In order to report this and help us fix it as fast as
+                possible, please do the following:
+            </div>
+            <div class="steps-container">
+                <div class="number-container text">1</div>
+                <div class="content-container">
+                    <span class="my-3" style="font-size: 1.5rem; line-height: normal">
+                        The task information and error is displayed below. Please click the
+                        <span style="color: #3f51b5">Copy Error</span> button to copy it to your clipboard.
+                    </span>
+                    <div style="background-color: rgb(233, 233, 233); padding: 1rem; border-radius: 8px">
+                        <div style="text-align: start" class="mb-2">
+                            <button mat-flat-button [cdkCopyToClipboard]="copyableErrString" color="primary">
+                                <span>Copy Error</span>
+                                <mat-icon class="ml-3">content_copy</mat-icon>
+                            </button>
+                        </div>
+                        <div style="color: salmon; max-height: 200px; overflow-y: auto; white-space: pre-line">
+                            {{ copyableErrString }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="steps-container">
+                <div class="number-container text">2</div>
+                <div class="content-container">
+                    <span class="my-2" style="font-size: 1.5rem; line-height: normal">
+                        Paste the error into an email and send it to
+                        <a href="mailto:[email protected]">sharplab.neuro&#64;mcgill.ca</a>
+                    </span>
+                </div>
+            </div>
+            <div class="steps-container">
+                <div class="number-container text">3</div>
+                <div class="content-container">
+                    <span class="my-2" style="font-size: 1.5rem; line-height: normal"> Go back to the main menu.</span>
+                    <span style="font-size: 1.5rem; line-height: normal">
+                        Thank for your participation and your assistance!
+                    </span>
+                    <div class="mt-2">
+                        <button mat-flat-button color="primary" (click)="navigateToMain()">Back to main menu</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/app/pages/participant/error-page/error-page.component.ts

@@ -0,0 +1,55 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { SessionStorageService } from '../../../services/sessionStorage.service';
+import { SnackbarService } from '../../../services/snackbar/snackbar.service';
+import { Role } from 'src/app/models/enums';
+import { UserStateService } from 'src/app/services/user-state-service';
+
+export interface IErrorNavigationState {
+    studyId?: number;
+    taskIndex?: number;
+    stackTrace?: string;
+    userId?: string;
+}
+
+@Component({
+    selector: 'app-error-page',
+    templateUrl: './error-page.component.html',
+    styleUrls: ['./error-page.component.scss', '../final-page/final-page.component.scss'],
+})
+export class ErrorPageComponent implements OnInit {
+    constructor(
+        private _snackbar: SnackbarService,
+        private _router: Router,
+        private _sessionStorage: SessionStorageService,
+        private _userStateService: UserStateService
+    ) {
+        const params = this._router.getCurrentNavigation()?.extras?.state as IErrorNavigationState;
+        this.copyableErrString = `User ID: ${params?.userId}\nStudy ID: ${params?.studyId}\nTask Index: ${params?.taskIndex}\n\n${params?.stackTrace}`;
+        this.copyableErrString = this.copyableErrString.trim();
+    }
+
+    copyableErrString: string = '';
+
+    ngOnInit(): void {}
+
+    navigateToMain() {
+        if (this._userStateService.isCrowdsourcedUser) {
+            if (this._userStateService.currentlyRunningStudyId) {
+                this._router.navigateByUrl(
+                    `crowdsource-participant?studyid=${this._userStateService.currentlyRunningStudyId}`
+                );
+            } else {
+                this._router.navigate([`crowdsource-participant`]);
+            }
+        } else if (this._userStateService.userIsAdmin) {
+            this._router.navigate([`admin-dashboard`]);
+        } else if (this._userStateService.userIsParticipant) {
+            this._router.navigate([`participant-dashboard`]);
+        } else if (this._userStateService.userIsGuest || this._userStateService.userIsOrgMember) {
+            this._router.navigate([`organization-member-dashboard`]);
+        } else {
+            throw new Error('Unsupported user role!');
+        }
+    }
+}

src/app/pages/participant/final-page/final-page.component.ts

@@ -1,9 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-import { SnackbarService } from '../../../services/snackbar/snackbar.service';
-import { UserService } from '../../../services/user.service';
-import { TaskManagerService } from '../../../services/task-manager.service';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import { SessionStorageService } from '../../../services/sessionStorage.service';
+import { SnackbarService } from '../../../services/snackbar/snackbar.service';
 
 @Component({
     selector: 'app-final-page',

src/app/pages/participant/participant.module.ts

@@ -11,12 +11,14 @@ import { FinalPageComponent } from './final-page/final-page.component';
 import { ConsentDialogComponent } from './participant-dashboard/participant-studies/consent-dialog/consent-dialog.component';
 import { TranslateModule } from '@ngx-translate/core';
 import { LanguageDialogComponent } from './participant-dashboard/language-dialog/language-dialog.component';
+import { ErrorPageComponent } from './error-page/error-page.component';
 
 @NgModule({
     declarations: [
         ParticipantDashboardComponent,
         ParticipantStudiesComponent,
         FinalPageComponent,
+        ErrorPageComponent,
         ConsentDialogComponent,
         LanguageDialogComponent,
     ],

src/app/pages/tasks/task-playables/base-task.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, ErrorHandler, OnDestroy, OnInit } from '@angular/core';
 import { Subject, Subscription } from 'rxjs';
 import { wait } from 'src/app/common/commonMethods';
 import { BaseParticipantData } from 'src/app/models/ParticipantData';

src/app/pages/tasks/task-playables/task-player/task-player.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, ViewContainerRef } from '@angular/core';
+import { Component, ErrorHandler, OnDestroy, ViewContainerRef } from '@angular/core';
 import { Router } from '@angular/router';
 import { Observable, of, Subscription } from 'rxjs';
 import { map, mergeMap } from 'rxjs/operators';
@@ -181,8 +181,12 @@ export class TaskPlayerComponent implements OnDestroy {
             // run the afterInit function for cleanup
             component.instance.afterInit();
         } catch (error) {
-            // handle more gracefully in the future
-            throw new Error(error);
+            this.router.navigate(['/task-error'], {
+                state: {
+                    studyId: this.taskManager.study.id,
+                    taskIndex: this.index,
+                },
+            });
         }
     }
 
@@ -201,7 +205,7 @@ export class TaskPlayerComponent implements OnDestroy {
                 .subscribe(
                     (ok) => {
                         if (!ok) {
-                            this.taskManager.handleErr();
+                            this.taskManager.handleErr('Error uploading data');
                             return;
                         }
 
@@ -216,8 +220,8 @@ export class TaskPlayerComponent implements OnDestroy {
                             this.renderPreviousStep();
                         }
                     },
-                    (_err) => {
-                        this.taskManager.handleErr();
+                    (err) => {
+                        this.taskManager.handleErr(err);
                     }
                 )
                 .add(() => {

src/app/routing/app-routing.module.ts

@@ -12,6 +12,7 @@ import { ResetPasswordLoginComponent } from '../pages/landing-page/forgot-passwo
 import { StudyBackgroundComponent } from '../pages/landing-page/study-background/study-background.component';
 import { NotFoundComponent } from '../pages/landing-page/not-found/not-found.component';
 import { BlankComponent } from '../pages/tasks/blank/blank.component';
+import { ErrorPageComponent } from '../pages/participant/error-page/error-page.component';
 
 const routes: Routes = [
     {
@@ -40,6 +41,10 @@ const routes: Routes = [
         path: 'playtask',
         component: TaskPlayerComponent,
     },
+    {
+        path: 'error',
+        component: ErrorPageComponent,
+    },
     {
         path: 'studies',
         children: [
@@ -57,6 +62,7 @@ const routes: Routes = [
     { path: 'blank', component: BlankComponent },
     { path: 'complete', component: FinalPageComponent },
     { path: 'notfound', component: NotFoundComponent },
+    { path: 'task-error', component: ErrorPageComponent },
     { path: '**', component: NotFoundComponent },
 ];