Why does console.log give the line number but console.error doesn't?

Question

How can I record an error in JavaScript with the line number? console.error gives the line number index.js:1 while console.log gives the correct line number.

Is there a way to modify console.error to provide the line number automatically or another way of logging errors?

Edit: I am using ReactJS and react-redux.

const messageState = createSlice({
    name: 'messageState',
    initialState: {
        currentMessage: "No action has been selected"
    },
    reducers: { },
    extraReducers: {

        [recordAction]: (state, action) => {
            switch(action.payload.action) {
                case "ACTION1":
                    state.currentMessage = SELECT_ACTION1;
                    break;
                case "ACTION2":
                    state.currentMessage = SELECT_ACTION2;
                    break;
                default:
                    console.error(`messageState recordAction: Invalid action: ${action.payload.action}`);
                    return;
            }
        },

        [recordActionPosition]: (state, action) => {

            let qPos = action.payload.position.qPos;
            let rPos = action.payload.position.rPos;

            let actor = Global.entityList[action.payload.actorID];

            switch(action.payload.action) {
                case "ACTION1":
                    state.currentMessage = ACTION1_MESSAGE(actor.name, undefined, qPos, rPos);
                    break;
                case "ACTION2":
                    state.currentMessage = ACTION2_MESSAGE(actor.name, qPos, rPos);
                    break;
                default:
                    console.error(`messageState recordActionPosition: Invalid action: ${action.payload.action}`);
                    return;
            }
        }
    }
})

The error message is messageState recordActionPosition: Invalid action: undefined... index.js:1

Answer 1

Try to limit usage of console.error and instead try throw new Error() (but be careful it acts like a return statement)

Also. Please share your code. It is hard to figure out what is wrong with it when we can't see it.
Are you using a minified file? That might be the issue.
Are you using Angular, React or any other framework? Might cause the issue.
And a bajillion other possible causes.

Alternate solution: Add to each error printing the function it comes from so you can find where to look and what caused it.

Answer 2

I suspect you're talking about how the message appears in the browser's console. The browser is showing the filename/line number as assistance to you during development to show where the error happened. It's the browser's implementation of console.error that is adding the line number. Using console.log simply outputs the text, but an error call causes it to be more helpful in identifying where the error happened.

The line number is showing as index.js:1 because your source has probably been put through a preprocessor and by the time the browser is running the code it's all one line. We don't see how your code is packaged before being run (webpack?) so it's hard to give you advice beyond that.

Also it would be good to understand why you want to show line numbers in your source code. If it's just during development, then the text of the message being unique is enough to identify which line it was. If it's not for debugging purposes, why would users want to know line numbers from your source code?