Unify logging between Tauri/Front-End, remove pino (#760)

package.json

@@ -48,8 +48,6 @@
     "lodash": "^4.17.21",
     "nanoid": "^5.0.6",
     "normalize.css": "^8.0.1",
-    "pino": "^8.19.0",
-    "pino-pretty": "^10.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-fontawesome": "^1.7.1",

src/lib/utils.ts

@@ -1,4 +1,4 @@
-import { error } from '@tauri-apps/plugin-log';
+import * as logger from '@tauri-apps/plugin-log';
 
 import useToastsStore from '../stores/useToastsStore';
 
@@ -28,7 +28,12 @@ export const parseDuration = (duration: number | null): string => {
  * Friendly logging for caught errors
  * https://kentcdodds.com/blog/get-a-catch-block-error-message-with-typescript
  */
-export const logAndNotifyError = (err: unknown, pre?: string): void => {
+export const logAndNotifyError = (
+  err: unknown,
+  pre?: string,
+  isWarning = false,
+  silent = false,
+): void => {
   let message;
   if (err instanceof Error) message = err.message;
   else message = String(err);
@@ -37,6 +42,13 @@ export const logAndNotifyError = (err: unknown, pre?: string): void => {
     message = `${pre}: ${message}`;
   }
 
-  error(message);
-  useToastsStore.getState().api.add('danger', message);
+  if (isWarning) {
+    logger.warn(message);
+  } else {
+    logger.error(message);
+  }
+
+  if (silent === false) {
+    useToastsStore.getState().api.add('danger', message);
+  }
 };

src/main.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
 import { QueryClientProvider } from '@tanstack/react-query';
-import { attachConsole } from '@tauri-apps/plugin-log';
+import * as logger from '@tauri-apps/plugin-log';
 
 import router from './views/router';
 import { queryClient } from './lib/query';
@@ -28,7 +28,7 @@ import './styles/main.module.css';
 |--------------------------------------------------------------------------
 */
 
-attachConsole();
+logger.attachConsole();
 
 const wrap = document.getElementById('wrap');
 

src/stores/PlaylistsAPI.ts

@@ -1,5 +1,4 @@
 import { Playlist, Track } from '../generated/typings';
-import logger from '../lib/logger';
 import channels from '../lib/ipc-channels';
 import router from '../views/router';
 import library from '../lib/library';
@@ -16,7 +15,7 @@ const play = async (playlistID: string): Promise<void> => {
   try {
     const playlist = await library.getPlaylist(playlistID);
     const tracks = await library.getTracks(playlist.tracks);
-    usePlayerStore.getState().api.start(tracks).catch(logger.warn);
+    usePlayerStore.getState().api.start(tracks);
   } catch (err) {
     logAndNotifyError(err);
   }

src/stores/SettingsAPI.ts

@@ -7,6 +7,7 @@ import { Config, DefaultView } from '../generated/typings';
 import { Theme } from '../types/museeks';
 import { themes } from '../lib/themes';
 import config from '../lib/config';
+import { logAndNotifyError } from '../lib/utils';
 
 import useToastsStore from './useToastsStore';
 
@@ -102,10 +103,12 @@ const checkForUpdate = async (
       useToastsStore.getState().api.add('success', message);
     }
   } catch (e) {
-    if (!options.silentFail)
-      useToastsStore
-        .getState()
-        .api.add('danger', 'An error occurred while checking updates.');
+    logAndNotifyError(
+      e,
+      'An error occurred while checking updates.',
+      true,
+      options.silentFail,
+    );
   }
 };
 

src/stores/usePlayerStore.ts

@@ -4,7 +4,6 @@ import { persist } from 'zustand/middleware';
 
 import { PlayerStatus } from '../types/museeks';
 import { shuffleTracks } from '../lib/utils-player';
-import logger from '../lib/logger';
 import router from '../views/router';
 import player from '../lib/player';
 import { Track, Repeat } from '../generated/typings';
@@ -500,9 +499,9 @@ function createPlayerStore<T extends PlayerState>(store: StateCreator<T>) {
       onRehydrateStorage: () => {
         return (state, error) => {
           if (error || state == null) {
-            logger.error(
-              'an error happened during player store hydration',
+            logAndNotifyError(
               error,
+              'an error happened during player store hydration',
             );
           } else {
             //  Let's set the player's src and currentTime with the info we have persisted in store

src/views/router.tsx

@@ -4,10 +4,10 @@ import {
   isRouteErrorResponse,
   useRouteError,
 } from 'react-router-dom';
+import * as logger from '@tauri-apps/plugin-log';
 
 import * as ViewMessage from '../elements/ViewMessage/ViewMessage';
 import ExternalLink from '../elements/ExternalLink/ExternalLink';
-import logger from '../lib/logger';
 
 import RootView from './Root';
 import ViewLibrary from './ViewLibrary';
@@ -92,8 +92,6 @@ export default router;
 
 function GlobalErrorBoundary() {
   const error = useRouteError();
-  logger.error(error);
-
   let errorMessage: string;
 
   if (isRouteErrorResponse(error)) {
@@ -106,6 +104,8 @@ function GlobalErrorBoundary() {
     errorMessage = 'Unknown error';
   }
 
+  logger.error(errorMessage);
+
   return (
     <ViewMessage.Notice>
       <p>