layflags / elm-monitor

Monitor your elm program with redux-devtools

elm-monitor

Monitor your elm program with redux-devtools during development. It's really just for monitoring and inspecting state and actions. Action replay (time travel) is not supported.

How to use it?

1. Install the dependency: $ npm install elm-monitor

2. Import and initialize elm-monitor in your index.js:

   import monitor from 'elm-monitor';
   ...
   monitor();
   

3. Copy or symlink Monitor.elm into your source folder, via e.g. ln -s ../node_modules/elm-monitor/src/Monitor.elm src

4. Import Monitor.elm into your Main.elm with import Monitor

5. Replace Browser.application with Monitor.application in your Main.elm

6. Open Redux Devtools in your browser and reload your app.

Attention!

You should only use this during development. Elm won't build when Monitor.elm is used, because it depends on Debug.log.

What if I don't use Browser.application?

Besides being able to monitor Browser.application, Monitor.elm additionally exports:

• Monitor.worker - when using Platform.worker
• Monitor.sandbox - when using Browser.sandbox
• Monitor.element - when using Browser.element
• Monitor.document - when using Browser.document

How does it work under the hood?

It's quite simple. Monitor.elm just logs the state on init as well as every action and resulting state on update to the browser console. monitor.js connects to redux-devtools, patches console.log to extract messages logged by Monitor.elm, parses and transforms the log messages using elm/parser (thx @ChristophP) and passes them over to redux-devtools.

How does it map Elm to JS data structures?

• Int, Float -> Number
• Char, String -> String
• Unit () -> null
• List -> Array
• Tuple -> Array
• Type constructor -> Array [⟨Ctor⟩, param1, param2] or String ⟨Nothing⟩

elm-monitor's Issues

Console gets spammed with exceptions

After setting up elm-monitor I get the following exception in the console repeatedly

Expecting Keyword False at row 1, col 1
Expecting Symbol () at row 1, col 1
Expecting Symbol ' at row 1, col 1
Expecting Symbol " at row 1, col 1
Expecting Symbol < at row 1, col 1
Expecting { at row 1, col 1
Expecting [ at row 1, col 1
Expecting Keyword True at row 1, col 116
Expecting Keyword False at row 1, col 116
Expecting Symbol () at row 1, col 116
Expecting Symbol ' at row 1, col 116
Expecting Symbol " at row 1, col 116
Expecting Symbol < at row 1, col 116
Expecting { at row 1, col 116
Expecting [ at row 1, col 116
Expecting Symbol ( at row 1, col 116
Expecting Variable at row 1, col 116
Expecting Number at row 1, col 116
Expecting Variable at row 1, col 1
Expecting Number at row 1, col 1

I've used elm-monitor with another Elm project and I haven't seen the exception there. I'm not sure what the difference is that causes it to appear here. This exception appears both on Firefox and Chrome.

Edit: The frequency of these exceptions seems to match when a certain Elm msg is received. In case it helps, this is what elm-monitor writes out for that msg

(LongPollRequest (Err NetworkError),{ currentTime = Posix 1551788676113, hideErrorOverlay = False, lastMessageId = -1, messages = [], quietForOneSecond = Debouncer (Config { accumulator = <function>, emitWhenUnsettled = Nothing, emitWhileUnsettled = Nothing, settleWhenQuietFor = Just 1000 }) Settled, releaseBuilds = Loading, serverData = Failure NetworkError, uploadTimeRequest = Nothing })

Model containing "\\" causes parsing to fail

A model containing an escaped backslash will cause elm-monitors parsing to fail.

Here's a simple example

main : Program () String ()
main =
    Monitor.sandbox
        { init = "\\"
        , view = \_ -> Html.button [ Html.Events.onClick () ] [ Html.text "produces an error in console" ]
        , update = \_ model -> model
        }

This occurred in version 0.0.9

Model containing Vec3 (from elm-explorations/linear-algebra) causes parsing to fail

The following code will generate an error in the console when clicking the button. Note that the error is not generated if Vec3 is removed from the model.

module Main exposing (main)

import Math.Vector3 as Vec3
import Monitor
import Html exposing (Html)
import Html.Events

type Msg_
    = Msg_ 


type alias Model_ =
    { v : Vec3.Vec3
    }


main : Program () Model_ Msg_
main =
    Monitor.sandbox
        { init =
            { v = Vec3.vec3 0 0 0
            }
        , view = \_ -> Html.button [ Html.Events.onClick Msg_ ] [ Html.text "produces an error in console" ]
        , update = \_ model -> model
        }

Fails to parse custom type with space character

The following code prints the error Expecting Variable at row 1, col 25 in the console

type alias NewModel =
    { aField : SomeType
    }

type SomeType
    = WithChar Char

main : Program Flags NewModel MsgBase
main =
    Monitor.element
        { init = \_ -> ({ aField = WithChar ' '}, Cmd.none)
        , view = \_ -> Html.div [] []
        , update = \_ model -> (model, Cmd.none)
        , subscriptions = \_ -> Sub.none
        }

The output elm-monitor output looks like this [Monitor:init]: { aField = WithChar (' ') }.

Edit: I'm using version 0.0.11

Updates containing a message with no parameters throws an exception

Steps to reproduce:

1. Create a new project with elm-monitor hooked up
2. Add a button that sends off a message with no parameter (i.e. NoOp)
3. Notice that when you click the button the following error appears
   
4. Notice that if you add a parameter to your message (i.e. NoOp Int) the error no longer appears.

Record field containing "\"" causes parsing to fail

If the model has a string field with the text \" in it then

Expecting Keyword True at row 1, col 1
Expecting Keyword False at row 1, col 1
Expecting Symbol () at row 1, col 1
Expecting Symbol ' at row 1, col 1
Expecting Symbol " at row 1, col 1
Expecting Symbol < at row 1, col 1
Expecting { at row 1, col 1
Expecting [ at row 1, col 1
Expecting , at row 1, col 386
Expecting } at row 1, col 386
Expecting Variable at row 1, col 1
Expecting Symbol - at row 1, col 1
Expecting Number at row 1, col 1

gets printed to the console on every update.

Edit: So for example, type alias Model = { someText : String} and initialModel = { someText = "\""}

Edit2: This occurred in version 0.0.8

Error when trying to use union type as message

I think it has to do with msg being the unit type.

type alias Model_ =
    { array : Array Int
    }


type Msg_
    = Blah


main : Program () Model_ Msg_
main =
    Monitor.sandbox
        { init = { array = Array.fromList [ 5 ] }
        , view = \_ -> Html.button [ Html.Events.onClick Blah ] [ Html.text "produces an error in console" ]
        , update = \_ model -> model
        }

This code works fine, but if I replace Msg_ with () then I get the n is null exception.

Originally posted by @MartinSStewart in #9 (comment)