Merge pull request #322 from appwrite/feat-cloud-lr

feat: lr for cloud

package-lock.json

@@ -16,6 +16,7 @@
                 "@sentry/tracing": "^7.36.0",
                 "analytics": "^0.8.1",
                 "echarts": "^5.4.1",
+                "logrocket": "^3.0.1",
                 "pretty-bytes": "^6.1.0",
                 "prismjs": "^1.29.0",
                 "tippy.js": "^6.3.7",
@@ -6261,6 +6262,11 @@
             "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
             "dev": true
         },
+        "node_modules/logrocket": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/logrocket/-/logrocket-3.0.1.tgz",
+            "integrity": "sha512-jOWG+jEzobKVxGytzZ+4KGm2kiMQMRTHab2uDWQyVZcHfEF38BlCH1yjQVY4LCmuQUwZitP9biMzJZnyUQ0dtQ=="
+        },
         "node_modules/loupe": {
             "version": "2.3.6",
             "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.6.tgz",

package.json

@@ -27,6 +27,7 @@
         "@sentry/tracing": "^7.36.0",
         "analytics": "^0.8.1",
         "echarts": "^5.4.1",
+        "logrocket": "^3.0.1",
         "pretty-bytes": "^6.1.0",
         "prismjs": "^1.29.0",
         "tippy.js": "^6.3.7",

src/lib/actions/analytics.ts

@@ -88,7 +88,7 @@ function sendEventToGrowth(event: string, path: string, data: object = null): vo
     });
 }
 
-function isTrackingAllowed() {
+export function isTrackingAllowed() {
     if (ENV.TEST) {
         return;
     }

src/lib/components/alert.svelte

@@ -32,7 +32,7 @@
             class:icon-exclamation={type === 'warning'}
             class:icon-exclamation-circle={type === 'error'}
             aria-hidden="true" />
-        <div class="alert-content">
+        <div class="alert-content" data-private>
             {#if $$slots.title}
                 <h6 class="alert-title">
                     <slot name="title" />

src/lib/components/cardContainer.svelte

@@ -10,7 +10,8 @@
 
 <ul
     class="grid-box common-section u-margin-block-start-32"
-    style={`--grid-gap:1.5rem; --grid-item-size:${total > 3 ? '22rem' : '25rem'};`}>
+    style={`--grid-gap:1.5rem; --grid-item-size:${total > 3 ? '22rem' : '25rem'};`}
+    data-private>
     <slot />
 
     {#if total > 3 ? total < limit + offset : total % 2 !== 0}

src/lib/components/secret.svelte

@@ -8,7 +8,7 @@
     export let copyEvent: string = null;
 </script>
 
-<div class="interactive-text-output" class:is-textarea={show}>
+<div class="interactive-text-output" class:is-textarea={show} data-private>
     {#if show}
         <span class="text u-line-height-1-5 u-break-all">{value}</span>
     {:else}

src/lib/components/tiles.svelte

@@ -1,3 +1,3 @@
-<ul class="grid-box common-section" style="--grid-item-size:25rem;">
+<ul class="grid-box common-section" style="--grid-item-size:25rem;" data-private>
     <slot />
 </ul>

src/lib/elements/table/cellLink.svelte

@@ -3,6 +3,6 @@
     export let title: string;
 </script>
 
-<div class="table-col" data-title={title} role="cell">
+<div class="table-col" data-title={title} role="cell" data-private>
     <a role="button" tabindex="0" class="link" {href}><slot /></a>
 </div>

src/lib/elements/table/cellText.svelte

@@ -10,6 +10,7 @@
     class:is-only-desktop={onlyDesktop}
     class:u-overflow-visible={showOverflow}
     data-title={title}
-    role="cell">
+    role="cell"
+    data-private>
     <Trim><slot /></Trim>
 </div>

src/lib/elements/table/table.svelte

@@ -7,6 +7,7 @@
     class="table is-selected-columns-mobile"
     class:u-margin-block-start-32={!noMargin}
     class:is-remove-outer-styles={noStyles}
-    role="table">
+    role="table"
+    data-private>
     <slot />
 </div>

src/lib/elements/table/tableList.svelte

@@ -1,5 +1,5 @@
 <!-- TODO: is 100% height needed? -->
-<div class="table-with-scroll">
+<div class="table-with-scroll" data-private>
     <div class="table-wrapper">
         <div class="table is-remove-outer-styles">
             <ul class="table-thead">

src/lib/elements/table/tableScroll.svelte

@@ -2,7 +2,7 @@
     export let isSticky = false;
 </script>
 
-<div class="table-with-scroll u-margin-block-start-32">
+<div class="table-with-scroll u-margin-block-start-32" data-private>
     <div class="table-wrapper">
         <table class="table" class:is-sticky-scroll={isSticky}>
             <slot />

src/lib/layout/breadcrumbs.svelte

@@ -18,7 +18,7 @@
 <nav class="breadcrumbs is-only-desktop" aria-label="breadcrumb">
     <ol class="breadcrumbs-list">
         {#each breadcrumbs as breadcrumb}
-            <li class="breadcrumbs-item">
+            <li class="breadcrumbs-item" data-private>
                 {#if breadcrumb.href}
                     <a href={breadcrumb.href} title={breadcrumb.title} on:click={track}>
                         {breadcrumb.title}

src/lib/layout/coverTitle.svelte

@@ -10,7 +10,7 @@
             <span class="icon-cheveron-left" aria-hidden="true" />
         </a>
     {/if}
-    <span class="text u-trim-1">
+    <span class="text u-trim-1" data-private>
         <slot />
     </span>
 </Heading>

src/routes/+layout.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
-    import { browser, dev } from '$app/environment';
+    import { browser } from '$app/environment';
     import { afterNavigate, goto } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { trackPageView } from '$lib/actions/analytics';
+    import { isTrackingAllowed, trackPageView } from '$lib/actions/analytics';
     import { reportWebVitals } from '$lib/helpers/vitals';
     import { Notifications, Progress } from '$lib/layout';
     import { app } from '$lib/stores/app';
     import { user } from '$lib/stores/user';
+    import { ENV, isCloud } from '$lib/system';
     import * as Sentry from '@sentry/svelte';
+    import LogRocket from 'logrocket';
     import { BrowserTracing } from '@sentry/tracing';
     import { onMount } from 'svelte';
     import { onCLS, onFCP, onFID, onINP, onLCP, onTTFB } from 'web-vitals';
@@ -23,7 +25,7 @@
         /**
          * Reporting Web Vitals.
          */
-        if (!dev && window.VERCEL_ANALYTICS_ID) {
+        if (ENV.PROD && window.VERCEL_ANALYTICS_ID) {
             onCLS(reportWebVitals);
             onFID(reportWebVitals);
             onLCP(reportWebVitals);
@@ -32,15 +34,26 @@
             onTTFB(reportWebVitals);
         }
 
-        /**
-         * Sentry Error Logging
-         */
-        if (!dev) {
+        if (ENV.PROD) {
+            /**
+             * Sentry Error Logging
+             */
             Sentry.init({
                 dsn: 'https://c7ce178bdedd486480317b72f282fd39@o1063647.ingest.sentry.io/4504158071422976',
                 integrations: [new BrowserTracing()],
                 tracesSampleRate: 1.0
             });
+
+            /**
+             * LogRocket
+             */
+            if (isCloud && isTrackingAllowed()) {
+                LogRocket.init('rgthvf/appwrite', {
+                    dom: {
+                        inputSanitizer: true
+                    }
+                });
+            }
         }
 
         /**

src/routes/+layout.ts

@@ -1,6 +1,7 @@
 import '@appwrite.io/pink';
 import '@appwrite.io/pink-icons';
 import 'tippy.js/dist/tippy.css';
+import LogRocket from 'logrocket';
 import { sdkForConsole } from '$lib/stores/sdk';
 import { redirect } from '@sveltejs/kit';
 import { Dependencies } from '$lib/constants';
@@ -13,6 +14,11 @@ export const load: LayoutLoad = async ({ depends, url }) => {
     try {
         const account = await sdkForConsole.account.get();
 
+        LogRocket.identify(account.$id, {
+            name: account.name,
+            email: account.email
+        });
+
         return {
             account,
             organizations: sdkForConsole.teams.list()

src/routes/console/organization-[organization]/deleteMember.svelte

@@ -47,7 +47,7 @@
     <svelte:fragment slot="header">
         {isUser ? 'Leave Organization' : 'Delete Member'}
     </svelte:fragment>
-    <p>
+    <p data-private>
         {isUser
             ? `Are you sure you want to leave '${selectedMember?.teamName}'?`
             : `Are you sure you want to delete ${selectedMember?.userName} from '${selectedMember?.teamName}'?`}

src/routes/console/project-[project]/auth/teams/team-[team]/deleteMembership.svelte

@@ -39,7 +39,7 @@
 
 <Modal bind:show={showDelete} on:submit={deleteMembership} warning>
     <svelte:fragment slot="header">Delete Member</svelte:fragment>
-    <p>
+    <p data-private>
         Are you sure you want to delete <b>{selectedMembership.userName}</b> from '{selectedMembership.teamName}'?
     </p>
     <svelte:fragment slot="footer">

src/routes/console/project-[project]/auth/teams/team-[team]/deleteTeam.svelte

@@ -30,8 +30,7 @@
 
 <Modal bind:show={showDelete} on:submit={deleteTeam} warning>
     <svelte:fragment slot="header">Delete Team</svelte:fragment>
-
-    <p>
+    <p data-private>
         Are you sure you want to delete <b>{team.name}</b>?
     </p>
     <svelte:fragment slot="footer">

src/routes/console/project-[project]/auth/user-[user]/dangerZone.svelte

@@ -33,11 +33,11 @@
                 {/if}
             </svelte:fragment>
             <svelte:fragment slot="title">
-                <h6 class="u-bold u-trim-1">
+                <h6 class="u-bold u-trim-1" data-private>
                     {$user.name || $user.email || $user.phone || 'Anonymous'}
                 </h6>
             </svelte:fragment>
-            <p class="u-trim-1">
+            <p class="u-trim-1" data-private>
                 {$user.email && $user.phone
                     ? [$user.email, $user.phone].join(',')
                     : $user.email || $user.phone}

src/routes/console/project-[project]/auth/user-[user]/deleteAllSessions.svelte

@@ -33,7 +33,7 @@
 
 <Modal bind:show={showDeleteAll} on:submit={deleteAllSessions} warning>
     <svelte:fragment slot="header">Delete All Sessions</svelte:fragment>
-    <p>
+    <p data-private>
         Are you sure you want to delete <b>all of {$user.name}'s sessions?</b>
     </p>
     <svelte:fragment slot="footer">

src/routes/console/project-[project]/auth/user-[user]/deleteMembership.svelte

@@ -43,7 +43,7 @@
 <Modal bind:show={showDelete} on:submit={deleteMembership} warning>
     <svelte:fragment slot="header">Delete Member</svelte:fragment>
     {#if selectedMembership}
-        <p>
+        <p data-private>
             Are you sure you want to delete <b>{selectedMembership.userName}</b> from '{selectedMembership.teamName}'?
         </p>
     {/if}

src/routes/console/project-[project]/auth/user-[user]/deleteUser.svelte

@@ -34,7 +34,7 @@
 
 <Modal bind:show={showDelete} on:submit={deleteUser} warning>
     <svelte:fragment slot="header">Delete User</svelte:fragment>
-    <p>Are you sure you want to delete <b>{$user.name}</b> from '{$project.name}'?</p>
+    <p data-private>Are you sure you want to delete <b>{$user.name}</b> from '{$project.name}'?</p>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>
         <Button secondary submit>Delete</Button>

src/routes/console/project-[project]/auth/user-[user]/updateName.svelte

@@ -38,7 +38,7 @@
         <Heading tag="h6" size="7">Update Name</Heading>
 
         <svelte:fragment slot="aside">
-            <ul>
+            <ul data-private>
                 <InputText
                     id="name"
                     label="Name"

src/routes/console/project-[project]/auth/user-[user]/updateStatus.svelte

@@ -74,7 +74,7 @@
 </script>
 
 <CardGrid>
-    <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16">
+    <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16" data-private>
         {#if $user.email || $user.phone}
             {#if $user.name}
                 <AvatarInitials size={48} name={$user.name} />
@@ -92,7 +92,7 @@
     </div>
     <svelte:fragment slot="aside">
         <div class="u-flex u-main-space-between">
-            <div>
+            <div data-private>
                 {#if $user.email}
                     <p class="title">{$user.email}</p>
                 {/if}

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte

@@ -44,7 +44,7 @@
 
 <Modal warning={true} bind:show={showDelete} on:submit={handleDelete}>
     <svelte:fragment slot="header">Delete Attribute</svelte:fragment>
-    <p>
+    <p data-private>
         Are you sure you want to delete <b>'{selectedAttribute?.key}' from {$collection?.name}</b>?
     </p>
     <svelte:fragment slot="footer">

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/delete.svelte

@@ -42,7 +42,7 @@
 <Modal warning={true} on:submit={handleDelete} bind:show={showDelete}>
     <svelte:fragment slot="header">Delete Document</svelte:fragment>
 
-    <p>
+    <p data-private>
         Are you sure you want to delete <b>the document from {$collection.name}</b>?
     </p>
     <svelte:fragment slot="footer">

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/deleteIndex.svelte

@@ -42,7 +42,7 @@
 <Modal warning={true} on:submit={handleDelete} bind:show={showDelete}>
     <svelte:fragment slot="header">Delete Index</svelte:fragment>
 
-    <p>
+    <p data-private>
         Are you sure you want to delete <b>'{selectedIndex.key}' from {$collection.name}</b>?
     </p>
     <svelte:fragment slot="footer">

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/deleteCollection.svelte

@@ -38,7 +38,7 @@
 <Modal warning={true} bind:show={showDelete} on:submit={handleDelete}>
     <svelte:fragment slot="header">Delete Collection</svelte:fragment>
 
-    <p>
+    <p data-private>
         Are you sure you want to delete <b>{$collection.name}</b>?
     </p>
     <svelte:fragment slot="footer">

src/routes/console/project-[project]/databases/database-[database]/delete.svelte

@@ -34,7 +34,7 @@
 
 <Modal warning={true} bind:show={showDelete} on:submit={handleDelete}>
     <svelte:fragment slot="header">Delete Database</svelte:fragment>
-    <p class="text">
+    <p class="text" data-private>
         Are you sure you want to delete <b>{$database.name}</b>?
     </p>
     <svelte:fragment slot="footer">

src/routes/console/project-[project]/functions/function-[function]/delete.svelte

@@ -36,7 +36,7 @@
 
 <Modal bind:show={showDelete} on:submit={handleSubmit} warning>
     <svelte:fragment slot="header">Delete Deployment</svelte:fragment>
-    <p>Are you sure you want to delete this deployment?</p>
+    <p data-private>Are you sure you want to delete this deployment?</p>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>
         <Button secondary submit>Delete</Button>

src/routes/console/project-[project]/functions/function-[function]/settings/delete.svelte

@@ -33,7 +33,7 @@
 
 <Modal bind:show={showDelete} on:submit={handleSubmit} warning>
     <svelte:fragment slot="header">Delete Function</svelte:fragment>
-    <p>
+    <p data-private>
         Are you sure you want to delete this function and all associated deployments from your
         project?
     </p>

src/routes/console/project-[project]/overview/platforms/+page.svelte

@@ -97,7 +97,8 @@
 {#if data.platforms.platforms.length}
     <div
         class="grid-box u-margin-block-start-32"
-        style="--grid-gap:1.5rem; --grid-item-size:20rem;">
+        style="--grid-gap:1.5rem; --grid-item-size:20rem;"
+        data-private>
         {#each data.platforms.platforms as platform}
             <a class="card" href={`${path}/${platform.$id}`}>
                 <div class="grid-item-1" style="min-block-size: calc(182 / 16 * 1rem)">

src/routes/console/project-[project]/settings/domains/delete.svelte

@@ -35,7 +35,7 @@
 <Modal bind:show={showDelete} on:submit={deleteDomain} warning>
     <svelte:fragment slot="header">Delete Domain</svelte:fragment>
     {#if selectedDomain}
-        <p>
+        <p data-private>
             Are you sure you want to delete <b>{selectedDomain.domain}</b> from '{$project.name}'?
         </p>
     {/if}

src/routes/console/project-[project]/settings/webhooks/[webhook]/delete.svelte

@@ -35,7 +35,9 @@
 
 <Modal bind:show={showDelete} on:submit={handleDelete} warning>
     <svelte:fragment slot="header">Delete Webhook</svelte:fragment>
-    <p>Are you sure you want to delete <b>{$webhook.name}</b> from '{$project.name}'?</p>
+    <p data-private>
+        Are you sure you want to delete <b>{$webhook.name}</b> from '{$project.name}'?
+    </p>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>
         <Button secondary submit>Delete</Button>

src/routes/console/project-[project]/storage/bucket-[bucket]/deleteBucket.svelte

@@ -33,7 +33,7 @@
 
 <Modal bind:show={showDelete} on:submit={deleteUser} warning>
     <svelte:fragment slot="header">Delete Bucket</svelte:fragment>
-    <p>Are you sure you want to delete <b>{$bucket.name}</b>?</p>
+    <p data-private>Are you sure you want to delete <b>{$bucket.name}</b>?</p>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>
         <Button secondary submit>Delete</Button>

src/routes/console/project-[project]/storage/bucket-[bucket]/deleteFile.svelte

@@ -34,7 +34,7 @@
 
 <Modal bind:show={showDelete} on:submit={deleteFile} warning>
     <svelte:fragment slot="header">Delete File</svelte:fragment>
-    <p>Are you sure you want to delete <b>{file.name}</b>?</p>
+    <p data-private>Are you sure you want to delete <b>{file.name}</b>?</p>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>
         <Button secondary submit>Delete</Button>

src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/+page.svelte

@@ -68,7 +68,7 @@
 <Container>
     {#if $file}
         <CardGrid>
-            <div class="u-flex u-gap-16">
+            <div class="u-flex u-gap-16" data-private>
                 <a
                     href={getView($file.$id)}
                     class="file-preview is-with-image"
@@ -157,7 +157,7 @@
             <svelte:fragment slot="aside">
                 <Box>
                     <svelte:fragment slot="title">
-                        <h6 class="u-bold u-trim-1">{$file.name}</h6>
+                        <h6 class="u-bold u-trim-1" data-private>{$file.name}</h6>
                     </svelte:fragment>
                     <p>
                         Last Updated: {toLocaleDateTime($file.$updatedAt)}

src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/deleteFile.svelte

@@ -35,7 +35,7 @@
 
 <Modal bind:show={showDelete} on:submit={deleteFile} warning>
     <svelte:fragment slot="header">Delete File</svelte:fragment>
-    <p>Are you sure you want to delete <b>{$file.name}</b>?</p>
+    <p data-private>Are you sure you want to delete <b>{$file.name}</b>?</p>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>
         <Button secondary submit>Delete</Button>